js 小贴士一星期合集


Posted in Javascript onApril 07, 2010

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>
Javascript 相关文章推荐
JavaScript对象创建及继承原理实例解剖
Feb 28 Javascript
巧用局部变量提升javascript性能
Feb 24 Javascript
javascript自定义的addClass()方法
May 28 Javascript
node.js中的fs.truncate方法使用说明
Dec 15 Javascript
jQuery选择器源码解读(二):select方法
Mar 31 Javascript
JS实现的最简Table选项卡效果
Oct 14 Javascript
学习JavaScript设计模式之策略模式
Jan 12 Javascript
实例详解AngularJS实现无限级联动菜单
Jan 15 Javascript
jQuery 调用WebService 实例讲解
Jun 28 Javascript
在vue中v-bind使用三目运算符绑定class的实例
Sep 29 Javascript
用element的upload组件实现多图片上传和压缩的示例代码
Feb 12 Javascript
vue实现随机验证码功能(完整代码)
Dec 10 Javascript
Javascript 实用小技巧
Apr 07 #Javascript
javascript 函数使用说明
Apr 07 #Javascript
js下获取div中的数据的原理分析
Apr 07 #Javascript
Exjs 入门篇
Apr 07 #Javascript
javascript window.opener的用法分析
Apr 07 #Javascript
JS的反射问题
Apr 07 #Javascript
Extjs在exlipse中设置自动提示的方法
Apr 07 #Javascript
You might like
adodb与adodb_lite之比较
2006/12/31 PHP
php ZipArchive压缩函数详解实例
2013/11/06 PHP
PHP数组操作类实例
2015/07/11 PHP
php生成酷炫的四个字符验证码
2016/04/22 PHP
yii2利用自带UploadedFile实现上传图片的示例
2017/02/16 PHP
php设计模式之享元模式分析【星际争霸游戏案例】
2020/03/23 PHP
php中get_object_vars()在数组的实例用法
2021/02/22 PHP
jQeury淡入淡出需要注意的问题
2010/09/08 Javascript
javascript多种数据类型表格排序代码分析
2010/09/11 Javascript
js简单实现删除记录时的提示效果
2013/12/05 Javascript
js中同步与异步处理的方法和区别总结
2013/12/25 Javascript
javascript里绝对用的上的字符分割函数总结
2014/07/31 Javascript
NodeJS学习笔记之Connect中间件模块(二)
2015/01/27 NodeJs
javascript实现对表格元素进行排序操作
2015/11/18 Javascript
浅谈javascript中关于日期和时间的基础知识
2016/07/13 Javascript
学习使用Bootstrap栅格系统
2017/05/11 Javascript
详解vue组件开发脚手架
2018/06/15 Javascript
微信小程序实现多选功能
2018/11/04 Javascript
node.js中express模块创建服务器和http模块客户端发请求
2019/03/06 Javascript
如何在Angular应用中创建包含组件方法示例
2019/03/23 Javascript
JS实现百度搜索框
2021/02/25 Javascript
python编码总结(编码类型、格式、转码)
2016/07/01 Python
python中numpy的矩阵、多维数组的用法
2018/02/05 Python
单利模式及python实现方式详解
2018/03/20 Python
python与caffe改变通道顺序的方法
2018/08/04 Python
NLTK 3.2.4 环境搭建教程
2018/09/19 Python
python字典和json.dumps()的遇到的坑分析
2020/03/11 Python
Keras框架中的epoch、bacth、batch size、iteration使用介绍
2020/06/10 Python
使用python画出逻辑斯蒂映射(logistic map)中的分叉图案例
2020/12/11 Python
英国百安居装饰建材网上超市:B&Q
2016/09/13 全球购物
eharmony澳大利亚:网上约会服务
2020/02/29 全球购物
酒店保洁主管岗位职责
2013/11/28 职场文书
父亲节活动策划方案
2014/08/24 职场文书
2016春节慰问信范文
2015/03/25 职场文书
财务人员入职担保书
2015/09/22 职场文书
TV动画《史上最强大魔王转生为村民A》番宣CM公布
2022/04/01 日漫