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 相关文章推荐
jquery插件开发方法(初学者)
Feb 03 Javascript
javascript 判断整数方法分享
Dec 16 Javascript
javascript的日期对象、数组对象、二维数组使用说明
Dec 22 Javascript
Python脚本后台运行的几种方式
Mar 09 Javascript
JQuery实现简单的服务器轮询效果实例
Mar 31 Javascript
JS日期对象简单操作(获取当前年份、星期、时间)
Oct 26 Javascript
Node.js批量给图片加水印的方法
Nov 15 Javascript
Vue2递归组件实现树形菜单
Apr 10 Javascript
基于Node的React图片上传组件实现实例代码
May 10 Javascript
React 源码中的依赖注入方法
Nov 07 Javascript
JS实现的碰撞检测与周期移动完整示例
Sep 02 Javascript
JavaScript实现与web通信的方法详解
Aug 07 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
西德产收音机
2021/03/01 无线电
php获取当前网址url并替换参数或网址的方法
2010/06/06 PHP
PHP实现非阻塞模式的方法分析
2018/07/26 PHP
PHP实现通过二维数组键值获取一维键名操作示例
2019/10/11 PHP
laravel框架中间件简单使用方法示例
2020/01/25 PHP
解决windows上php xdebug 无法调试的问题
2020/02/19 PHP
juqery 学习之三 选择器 可见性 元素属性
2010/11/25 Javascript
关于JS控制代码暂停的实现方法分享
2012/10/11 Javascript
js如何获取兄弟、父类等节点
2014/01/06 Javascript
JavaScript保留两位小数的2个自定义函数
2014/05/05 Javascript
css与javascript跨浏览器兼容性总结
2014/09/15 Javascript
轻松创建nodejs服务器(8):非阻塞是如何实现的
2014/12/18 NodeJs
setinterval()与clearInterval()JS函数的调用方法
2015/01/21 Javascript
jQuery及JS实现循环中暂停的方法
2015/02/02 Javascript
JS+CSS实现电子商务网站导航模板效果代码
2015/09/10 Javascript
js和jquery实现监听键盘事件示例代码
2020/06/24 Javascript
NodeJS创建基础应用并应用模板引擎
2016/04/12 NodeJs
使用RequireJS库加载JavaScript模块的实例教程
2016/06/06 Javascript
JavaScript实现父子dom同时绑定两个点击事件,一个用捕获,一个用冒泡时执行顺序的方法
2017/03/30 Javascript
jQuery选择器_动力节点Java学院整理
2017/07/05 jQuery
浅谈JavaScript中的属性:如何遍历属性
2017/09/14 Javascript
小程序scroll-view安卓机隐藏横向滚动条的实现详解
2019/05/16 Javascript
详解Django定时任务模块设计与实践
2019/07/24 Python
解决Django中修改js css文件但浏览器无法及时与之改变的问题
2019/08/31 Python
Django将默认的SQLite更换为MySQL的实现
2019/11/18 Python
Python flask框架端口失效解决方案
2020/06/04 Python
美国第二大团购网站:LivingSocial
2016/07/24 全球购物
唤醒头发毛囊的秘密武器:Grow Gorgeous
2016/08/28 全球购物
儿媳婚宴答谢词
2014/01/14 职场文书
电子信息工程专业自荐书
2014/06/24 职场文书
环境保护与污染治理求职信
2014/07/16 职场文书
2014年最新领导班子整改方案
2014/09/27 职场文书
校长师德师风自我剖析材料
2014/09/29 职场文书
淮阳太昊陵导游词
2015/02/10 职场文书
鲁滨逊漂流记读书笔记
2015/06/26 职场文书
Android自定义ScrollView实现阻尼回弹
2022/04/01 Java/Android