jQuery 陷阱。。。。

1）最近接触jquery，觉得jquery确实比较好用，但是在使用过程中碰到不少问题，最典型的问题是选择器通过元素的#id来查找元素对象时，如果id 中包含jquery的特殊字符就会导致查找失败，以下特殊字符需要转义：

                                        #;&,.+*~':"!^$[]()=>|/

 

If you wish to use any of the meta-characters (#;&,.+*~':"!^$[]()=>|/ ) as a literal part of a name, you must escape the character with two backslashes: //. For example, if you have an an input with name="names[]", you can use the selector $("input[name=names//[//]]"). 

 

2） 使用$.ajax 对功能的Ajax 请求到服务器，避免使用complete 事件处理响应数据。

 

过度使用选择器和不分配给本地变量，例如：

$('#button').click(function() {







    $('#label').method();







    $('#label').method2();







    $('#label').css('background-color', 'red');







});

而不是： -

$('#button').click(function() {







    var label = $('#label');







    label.method();







    label.method2();







    label.css('background-color', 'red');







});

我发现这个 富有启发性的一刻，我意识到如何调用堆栈的工作。

 

过量使用的链接。 看 到这样的： this.buttonNext[n ? 'bind' : 'unbind'](this.options.buttonNextEvent, this.funcNext)[n ? 'removeClass' : 'addClass'](this.className('jcarousel-next-disabled')).attr('disabled', n ? false : true); 解 释

 

3)

不理解的事件有约束力。 JavaScript和jQuery的工作方式不同。 应 广大用户要求，例如： 在jQuery： $("#someLink").click(function(){//do something}); 没有jQuery的： <a id="someLink" href="page.html" onClick="SomeClickFunction(this)">Link</a> <script type="text/javascript"> SomeClickFunction(item){ //do something } </script> 基本上所需的JavaScript钩子不再需要。即使用内联标记（的onClick等），因为你可以简单地使用ID和 类，开发人员通常会利用对CSS的目的。

 

4)

如果您绑定（）相同的事件多次将大火多次。我通常总是拆散（'点击'）。绑定（'点击'） 以防万一

 

场景：点击加号按钮自动复制加号按钮所在行，至下一行，然后在一行中补上减号按钮。

问题：在IE下出现nodetype错误。

分析：之前的代码是其它人写的，采用jquery的clone(true)。如果用clone()，就不会报错，然而复制所在行的组件上的事件，就 不起作用了。百思不得其解。

方案：在网上找了半天，每有正解。最后发现ie下报完这个错误后，再点击就可以正常运行了，然后再报错，再点击再正常运行。根据这个特点，给这条语 句加了个try{}catch{}终于解决，try ,catch 中都是同样的语句

               try//在IE下第一次运行以下语句会出异常，捕获异常再次执行该语句就没事了
                {
                    var cloned = parent.clone(true);
                }
                catch(err)
                {
                    var cloned = parent.clone(true);
                }

 

Query有個很方便的function：toggle


，可以讓元素做指定的切換動作，若不指定任何參數，則可以讓元素做很簡單的隱藏、顯示的切換，很是



方便。If they are shown, toggle makes them hidden (using the hide






 method). If they are hidden, toggle makes them shown (using the show






 method).







但今天突然發現在針對大量元素的隱藏顯示時，這個function效能很差。















看範例


（另開視窗）







第一種方式是click之後再跑一個for 



loop讓所有元素做toggle，很明顯的這個方式效能很差(用IE開更是慢到離譜~)。範例裡頭的element有600個。

view source

print ?

1	function dividend_toggle(){

2	$( ".dividend" ).toggle();

3	dividend_toggled = !dividend_toggled;

4	$( "#toggler" ).html(dividend_toggled? 'hide' : 'show' );

5

}

6	$( "#toggler" ).click(dividend_toggle);

第二種方式是利用toggle的切換直接決定show and hide，效能上就比第一種方式好多了。

view source

print ?

1	$( "#toggler2" ).toggle( function (){

2	$( "td.dividend" ).hide();

3	$( this ).html( 'show' );

4	}, function (){

5	$( "td.dividend" ).show();

6	$( this ).html( 'hide' );

7

});

其實這是一個觀念上的陷阱，toggle()交由元素自己判斷顯示還是隱藏，在很多場合是非常方便的，但元素一多就會發生效能上的問題，因為你把顯示還是 隱藏的決定權交給元素去判斷，當元素一多，每個元素都要重複判斷。以下是jquery1.3.2的toggle的片段原始碼：

view source

print ?

1	this .each( function (){

2	var state = bool ? fn : jQuery( this ).is(":hidden");

3	jQuery( this )[ state ? "show" : "hide" ]();

4

}) :

see that?每次都要判斷元素是否被隱藏，然後再決定show or hide。 這也是為何在大量做toggle時效能會差的原因。因此在大量元素的顯示或隱藏時，不要使用toggle來讓元素自己決定要顯示或隱藏。換句話說，當要決 定兩個以上元素的顯示或隱藏時，這個「決定」(boolean值)就應該被存起來，而不應該再下一個元素還要再判斷這個決定。