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)

如果您綁定（）相同的事件多次將大火多次。我通?？偸遣鹕?#xff08;'點擊'）。綁定（'點擊'） 以防萬一

?

場景：點擊加號按鈕自動復制加號按鈕所在行，至下一行，然后在一行中補上減號按鈕。

問題：在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值)就應該被存起來，而不應該再下一個元素還要再判斷這個決定。

轉載于:https://www.cnblogs.com/dhz123/archive/2010/05/28/2194277.html

總結

以上是生活随笔為你收集整理的jQuery 陷阱。。。。的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。