js 小贴士一星期合集
1.今天聊聊自定义事件
事件大家都知道，但在很多的框架中都有自定义事件的实现，我写了个简单的，跟大家分享一下，
代码如下:
<script>
var cusEvent = function(){
var cache = {};
return {
addEvent:function(type,fn){
cache[type]?cache[type].push(fn):(cache[type]=[fn]);
},
removeEvent:function(type,fn){
if(cache[type]){
if(fn){
for(var i=0,ci;ci=cache[type][i];i++){
ci===fn&&cache[type].splice(i,1);
}
}else{
delete cache[type];
}
}
},
//e可以是个自定义的对象，也可以是字符串
fire:function(e){
if(typeof e =='string'){
e = {type:e}
};
var t = cache[e.type];
if(t){
for(var i=0,ci;ci=t[i];i++){
//e可以有自己的target,没有就用this代替
ci.call(e.target||this,e)
}
}
}
}
}()
//使用
cusEvent.addEvent('start',function(e){alert(e.type)})
cusEvent.addEvent('start',function(e){alert(e.type+"1")})
cusEvent.fire('start')
cusEvent.removeEvent('start')
</script>
2. innerHTML大家都用过，肥肠好使，但在ie下有些时候却不行，比如select如果你想在select上用option就是不行的，因为select的innerHTML是只读的，当然除了这个还有像tr,table等等,我写了个小方法，来兼容innerHTML在ie下对这些元素的使用，希望给大家 点启示
代码如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Untitled</title>
</head>
<body>
Hello World!
<select id="aa"><option>sdfsdf</option><option>sdfsdf</option></select>
<input onclick="html(document.getElementById('aa'),'<option>change1</option><option>change</option>')" type="button" value="use innerHTML"/>
</body>
</html>
<script>
var html = function(){
var div = document.createElement('div');
return document.all?function(pN,h){
div.innerHTML = '<select>'+h+'</select>';
for(var i=0,ci;ci=pN.firstChild;) pN.removeChild(ci)
debugger;
for(;ci=div.firstChild.firstChild;) pN.appendChild(ci);
}:function(pN,h){
pN.innerHTML = h;
}
}()
</script>
原理就是在ie中，我用个临时元素div来跳过innerHTML不能用的问题，可以再写点负载点，就是判断传进来的是tr,table的话用相应的元素套用，
这个方法也可以解决select中option不好添加修改的问题
3.
在js中全局g-add变量是恶魔，是绝对建议不要使用的，但有的时候，可能要写个静态变量，随着函数的执行而累计比如
代码如下:
var a = 1;
function fn(){
alert(++a);
}
fn()
fn()
想随着函数的执行而改变
好的写法可以这样
代码如下:
<script>
var fn = function(){
var a = 1;
return function(){
alert(++a);
}
}()
fn();
fn();
</script>
a作为闭包，可以被内部的function访问到，但在全局中却没有产生一个全局的a
当然如果你想直接修改a也可以
代码如下:
<script>
var fn = function(){
var a = 1;
return function(p){
a = p===undefined?a+1:p;
alert(a);
}
}()
fn();
fn(0);
</script>
4.
传统的方式一般是用el.offsetParent,el.offsetLeft遍历去取得
但其实又跟好的跟容易的方式那就是 getBoundingClientRect
代码如下
代码如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Untitled</title>
</head>
<body>
<div id="aa" style="position:absolute;width:200px;height:200px;left:200px;top:1000px;border:1px solid #ccc" onclick=offset(this) ></div>
<div id="bb" style="position:absolute;width:200px;height:200px;border:1px solid red"></div>
</body>
</html>
<script>
var offset = function (o){
var d = document,m = Math.max,bl = m(d.body.clientLeft,d.documentElement.clientLeft),st,sl,
bt = m(d.body.clientTop,d.documentElement.clientTop),b,bb = document.getElementById('bb');
return function(o){
b = o.getBoundingClientRect();
st = m(d.body.scrollTop,d.documentElement.scrollTop),sl = m(d.body.scrollLeft,d.documentElement.scrollLeft);
bb.style.cssText +=";top:"+(b.top+st-bt)+'px;left:'+(b.left+sl-bl)+"px";
}
}()
</script>
当你点击最下边的灰色的div时，上边的红色的会跟灰色的完全重叠
5.
ie下的outerHTML大家都用过吧，肥肠好用，在你不仅仅只想返回某个元素下的html,还想返回这个元素的html
但是这个属性只能用在ie下，别的浏览器没有这个属性，怎么办呢，
js小贴士帮你解决这个问题
代码如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Untitled</title>
</head>
<body>
<div >
<div id="aa" ksjfkls="sdf" style="">
<p>sdf</p>
<p djkfjd="df"></p>
</div>
<div id="bb" sdfksf=333 >
</div>
</div>
</body>
</html>
<script>
var html = function(){
var d = document,div = d.createElement('div');
return function(id){
var o = d.getElementById(id);
if(o.outerHTML)
return o.outerHTML;
else{
div.innerHTML = ''
var h = '';
div.appendChild(o.cloneNode(true));
return div.innerHTML
}
}
}()
alert(html('aa'))
alert(html('bb'))
</script>
相关推荐
-
js 小贴士一星期合集
1.今天聊聊自定义事件 事件大家都知道,但在很多的框架中都有自定义事件的实现,我写了个简单的,跟大家分享一下, 复制代码 代码如下: <script> var cusEvent = function(){ var cache = {}; return { addEvent:function(type,fn){ cache[type]?cache[type].push(fn):(cache[type]=[fn]); }, removeEvent:function(type,fn){ if(cac
-
十个Python经典小游戏的代码合集
目录 1.小猫运动 游戏源码 游戏效果 2.弹球 游戏源码 游戏效果 3.画正方形 游戏源码 游戏效果 4.彩点实验 游戏源码 游戏效果 5.彩点实验圆形 游戏源码 游戏效果 6.彩点实验下三角 游戏源码 游戏效果 7.彩点实验抛物线 游戏源码 游戏效果 8.彩点实验椭圆形 游戏源码 游戏效果 9.旋转文字 游戏源码 游戏效果 10.迷宫游戏 游戏源码 游戏效果 1.小猫运动 游戏源码 # @Author : 辣条 ''' 多行注释 本程序运行后会有一只小猫向前走 安装模块 pip instal
-
Python实现四个经典小游戏合集
目录 一.效果展示 1.俄罗斯方块 2.扫雷 3.五子棋 4.贪吃蛇 二.代码展示 1.俄罗斯方块 2.扫雷 3.五子棋 4.贪吃蛇 一.效果展示 1.俄罗斯方块 这个应该是玩起来最最简单的了- 2.扫雷 运气好,点了四下都没踩雷哈哈- 3.五子棋 我是菜鸡,玩不赢电脑人- 4.贪吃蛇 害,这个是最惊心动魄的,为了我的小心脏,不玩了不玩了- 女朋友:你就是借机在玩游戏,逮到了 啊这- 那我不吹牛逼了,我们来敲代码吧~ 二.代码展示 1.俄罗斯方块 方块部分 这部分代码单独保存py文件,这里我
-
五个有趣的Python整蛊小程序合集
目录 无聊程序之一 无聊程序之二 无聊程序之三 无聊程序之四 无聊程序之五 pyinstaller 编码 BUG Python 能做很多无聊,但有意思的事情,例如接下来的一些案例. 以下程序,不要发代码,要不实现不了你整蛊的目的. 要打包成一个 exe 程序,发给朋友才有意思. 使用 pip install pyinstaller. 打包命令如下: pyinstaller -F 文件名.py 过程中如果出现 BUG(一般是编码错误),点击导航查看解决方案 无聊程序之一 while True: n
-
基于apicloudAJAX请求代码合集
get请求代码: api.ajax({ url:'http://m.weather.com.cn/data/101010100.html' //天气预报网站的WebService接口 },function(ret,err){ if (ret) { api.alert({msg:JSON.stringify(ret)}); } else { api.alert({msg:JSON.stringify(err)}); }; }); POST请求-Form表单提交: api.ajax({ url: '
-
Vim命令合集
命令历史 以:和/开头的命令都有历史纪录,可以首先键入:或/然后按上下箭头来选择某个历史命令. 启动vim 在命令行窗口中输入以下命令即可 vim 直接启动vim vim filename 打开vim并创建名为filename的文件 文件命令 打开单个文件 vim file 同时打开多个文件 vim file1 file2 file3 ... 在vim窗口中打开一个新文件 :open file 在新窗口中打开文件 :split file 切换到下一个文件 :bn 切换到上一个文件 :bp 查看当
-
使用CDN的优势以及小贴士分享
什么文件适合用CDN加载 CDN主要适用于一些静态资源文件的加载,比如javascript文件.css样式文件.字体.图片.视频等其他资源文件.这些文件我们往往放到自己的一些前端服务器中做处理(nginx),使用CDN就可以免除前端服务器部分工作了. 使用CDN的好处 提升网站的性能 使用CDN最大的益处是为你的服务器提供"分流",节省了你的带宽,减少了服务器的压力,很多CDN厂商提供的资源访问服务加载速度还是比较快的(墙内除外). 文件缓存 对于那些被普遍使用的资源文件(比如jque
-
基于PHP中自带的字符串操作函数合集
1.查找字符位置函数: strpos($str,search,[int])://查找search在$str中的第一次位置从int开始: strrpos($str,search,[int])://查找search在$str中的最后一次出现的位置从int开始 2.提取子字符函数(双字节) submit($str,int start[,int length])://从$str中strat位置开始提取[length长度的字符串]. strstr($str1,$str2)://从$str1(第一个的位置)
-
javascript四个方向无间隙滚动合集(多浏览器IE,firefox兼容)
学习中...本段JS制作参考 MSClass.js 复制代码 代码如下: boxmove(d1,d2,d3,e,obj) d1 = 外围容器 d2 = 内容 d3 = 复制d2的内容接替循环滚动 e = 方向与方法 1,2,3,4 = 自动滚动,分别对应:上,右,下,左 "top","right","bottom","left" = 手动滚动,分别对应:上,右,下,左 obj = 选择手
-
人尽可用的Windows小贴士之上篇第1/2页
不管你是否已经升级到最新版Vista系统还是继续留守在XP阵营,我们列出的这些小贴士都能够帮助您加快电脑的处理速度.提升电脑的安全性能,甚至还能够改善电脑的时尚可观性,相信我吧! 客观说来,Windows操作系统的性能可谓一般,如果你不尽力去深度"挖掘",或者按照你的意愿去改变它,那么就永远无法让其发挥出真正的潜力. 无论你是想提高XP的运行速度.自定义Vista的Aero界面.管理自己的磁盘分区或进行快速照片处理,以下我们给出的案例都能悉数告诉你具体的实现方法,在文章中,我们首先会介