jQuery中的delegate与live实现方式简析

http://www.blogjava.net/Hafeyang/archive/2011/04/19/the_implementation_of_jquery_delegate_and_live.html 

Java代码 

1. window.onload = function(){  
2.             function handle(e){  
3.                 //获取event对象  
4.                 //标准DOM方法事件处理函数第一个参数是event对象  
5.                 //IE可以使用全局变量window.event  
6.                 var evt = e||window.event ;  
7.   
8.                 //获取触发事件的原始事件源  
9.                 //标准DOM方法是用target获取当前事件源  
10.                 //IE使用evt.srcElement获取事件源  
11.                 var target = evt.target||evt.srcElement;  
12.   
13.                 //获取当前正在处理的事件源  
14.                 //标准DOM方法是用currentTarget获取当前事件源  
15.                 //IE中的this指向当前处理的事件源  
16.                 var currentTarget= e?e.currentTarget:this;  
17.   
18.                 //问题：在IE 9下  window.event 与 e 不同 evt没有currentTarget属性,e才有currentTarget属性(视为标准浏览器做法？？)  
19.                 alert("src id:"+target.id+"\ncurent target id :"+currentTarget.id);  
20.   
21.                 if(target.id=="newbutton"){  
22.                     alert("触发新增元素的delegate方法");  
23.                 }  
24.             }  
25.             document.getElementById("btn").onclick=handle;  
26.             document.getElementById("c").onclick= handle;  
27.   
28.   
29.             document.getElementById("btnadd").onclick=function(){  
30.                 var btn = document.createElement("input");  
31.                 btn.setAttribute("value","点击我试试");  
32.                 btn.setAttribute("type","button");  
33.                 btn.setAttribute("id","newbutton");  
34.                 //没有监听新按钮的onclick事件  
35.                 document.getElementById("c").appendChild(btn);  
36.             }  
37.         }  
38. <div id="c" class="">  
39.     <input type="button" id="btn" name="" value="button"  />  
40. </div>  
41. <a href="###" id="btnadd">添加一个按钮</a>  

这个应该是用事件的冒泡特性实现代理的把

一些比较好的jquery优化

1.选择：优先用#id,使用.class前面带上tag名称,多次操作是使用变量保存(或链式操作)。 
2.sizzle:1.3后采用的选择器引擎采用‘自右向左’取代传统的‘自左向右’，右边选择器更加明确，比如 $('div.class span.class2')，因此在写选择器时需要考虑这点 
3.绑定事件时用live()/delegate()取代bind() 
4.操作dom时可以先取出dom-&gt;操作dom—&gt;恢复到原来的位置 

Java代码 

1. var theForm = $('#myForm');   
2. var formParent = theForm.parent();   
3. theForm.remove();   
4. inputArr.each(function() {   
5.      theForm.append(this);   
6. });    
7. formParent.append(theForm);  
8. //or detach().doSomething().appendTo();  

5.用find()胜于上下文 

Java代码 

1. var panels = $('div.panel', $('#content'));   
2. var panels = $('#content').find('div.panel');//better  

6.用html5 
html5有增加很多独特的tag,更多的tag说明对于特定的tag共同使用的元素越少， 
选择器引擎有更好的表现 
7.大量添加样式时用渲染元素比$.css()好 

Java代码 

1. $('<style type="text/css"> div.class { color: red; } </style>') .appendTo('head');  

8.多用对象检测 
9.有时用js原始方法更有效率 
10.学一些不常用的方法：map(), slice(),stop(), queue(), dequeue(), prevAll(), pushStack(),inArray(). 

jquery实现aop？

如果想重写jQuery某个方法又不想直接改源码，你可以这样 
改写unique() 

代码 

1. (function($){  
2.    
3.     var _old = $.unique;//备份原始方法  
4.    
5.     $.unique = function(arr){   
6.         //如果是dom对象就使用原始方法  
7.         if (!!arr[0].nodeType){  
8.             return _old.apply(this,arguments);  
9.         } else {  
10.             //使用grep/inArray组合方法去重  
11.             return $.grep(arr,function(v,k){  
12.                 return $.inArray(v,arr) === k;  
13.             });  
14.         }};})(jQuery);  
15.    
16. //test  
17. var arr = ['first',7,true,2,7,true,'last','last'];  
18. $.unique(arr); // ["first", 7, true, 2, "last"]var arr = [1,2,3,4,5,4,3,2,1];  
19. $.unique(arr); // [1, 2, 3, 4, 5]  

方法改写的模式： 

代码 

1. (function($){  
2.    
3.     // store original reference to the method  
4.     var _old = $.fn.method;  
5.    
6.     $.fn.method = function(arg1,arg2){  
7.    
8.         if ( ... condition ... ) {  
9.            return  ....   
10.         } else {           // do the default  
11.            return _old.apply(this,arguments);  
12.         }  
13.     };})(jQuery);  

jQuery + JS 下拉框加载选择

jQuery + JS 下拉框加载选择

请选择   

learning jQuery

jQuery fundamentals jquery_fundamentals_zh jquery_best_practices