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 Array数组对象的扩展函数代码
May 22 Javascript
AJAX分页的代码(后台asp.net)
Feb 14 Javascript
jquery 选取方法都有哪些
May 18 Javascript
使用node.js 制作网站前台后台
Nov 13 Javascript
js实现宇宙星空背景效果的方法
Mar 03 Javascript
基于jquery实现简单的手风琴特效
Nov 24 Javascript
解析JavaScript面向对象概念中的Object类型与作用域
May 10 Javascript
JavaScript实现相册弹窗功能(zepto.js)
Jun 21 Javascript
jquery.serialize() 函数语法及简单实例
Jul 08 Javascript
json与jsonp知识小结(推荐)
Aug 16 Javascript
Chart.js 轻量级HTML5图表绘制工具库(知识整理)
May 22 Javascript
JavaScript如何实现元素全排列实例代码
May 14 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
PHP CKEditor 上传图片实现代码
2009/11/06 PHP
PHP实现恶意DDOS攻击避免带宽占用问题方法
2015/05/27 PHP
PHP查看SSL证书信息的方法
2016/09/22 PHP
详解thinkphp5+swoole实现异步邮件群发(SMTP方式)
2017/10/13 PHP
thinkphp5 URL和路由的功能详解与实例
2017/12/26 PHP
php解决crontab定时任务不能写入文件问题的方法分析
2019/09/16 PHP
Javascript中使用parseInt函数需要注意的问题
2015/04/02 Javascript
node.js连接mongoDB数据库 快速搭建自己的web服务
2016/04/17 Javascript
js实现淡入淡出轮播切换功能
2017/01/13 Javascript
微信小程序的动画效果详解
2017/01/18 Javascript
jQuery获取table下某一行某一列的值实现代码
2017/04/07 jQuery
引入JavaScript时alert弹出框显示中文乱码问题
2017/09/16 Javascript
Node.js利用断言模块assert进行单元测试的方法
2017/09/28 Javascript
angularjs 页面自适应高度的方法
2018/01/17 Javascript
Vuex中的State使用介绍
2019/01/19 Javascript
vue组件实现移动端九宫格转盘抽奖
2020/10/16 Javascript
详解Python中的strftime()方法的使用
2015/05/22 Python
python使用BeautifulSoup与正则表达式爬取时光网不同地区top100电影并对比
2019/04/15 Python
python print出共轭复数的方法详解
2019/06/25 Python
keras导入weights方式
2020/06/12 Python
Python自动化之UnitTest框架实战记录
2020/09/08 Python
详解tensorflow之过拟合问题实战
2020/11/01 Python
CSS3实现的炫酷菜单代码分享
2015/03/12 HTML / CSS
CSS3中颜色线性渐变实战
2015/07/18 HTML / CSS
孤独星球出版物:Lonely Planet Publications
2018/03/17 全球购物
计算 s=(x*y)1/2,用两个宏定义来实现
2016/08/11 面试题
经典导游欢迎词大全
2014/01/16 职场文书
师德模范事迹材料
2014/06/03 职场文书
酒店管理求职信
2014/06/09 职场文书
村干部任职承诺书
2015/01/21 职场文书
司机岗位职责
2015/02/04 职场文书
杨善洲电影观后感
2015/06/04 职场文书
荒岛余生观后感
2015/06/09 职场文书
解决Pytorch修改预训练模型时遇到key不匹配的情况
2021/06/05 Python
Python中Selenium对Cookie的操作方法
2021/07/09 Python
 Redis 串行生成顺序编码的方法实现
2022/04/03 Redis