jQuery選擇器使用時需要注意的問題說明

1．選擇器中含有“.”、“#”、“(”或“]”等特殊字符

根據W3C的規定，屬性值中是不能含有這些特殊字符的，但在實際項目中偶爾會遇到表達式中含有“#”和“.”等特殊字符，如果按照普通的方式去處理出來的話就會出錯。解決此類錯誤的方法是使用轉義符轉義。

<div id="id#b">bb</div> 
<div id="id[1]">cc</div>

不能這樣寫：

$('#id#b'); $('#id[1]');

應該使用轉義符號：

$('#id\\#b'); //轉義特殊字符“#” 
$('#id\\[1\\]'); //轉義特殊字符“[ ]”

2．屬性選擇器的引號問題
1.3.1版本徹底放棄了1.1.0版本遺留下的@符號，如果你使用1.3.1以上的版本，那么你不能在屬性前添加@符號，比如：

$('div[title="test"'];

二、選擇器中含有空格的注意事項

選擇器中的空格也是不容忽視的，多一個空格或少一個空格也許會得到截然不同的結果。看下面這個例子，它的HTML代碼如下：

<div class="test"> 
 <div style="display:none;">aa</div> 
 <div style="display:none;">bb</div> 
 <div style="display:none;">cc</div> 
 <div class="test" style="display:none;">dd</div> 
</div> 
<div class="test" style="display:none;">ee</div> 
<div class="test" style="display:none;">ff</div>

使用如下的jQuery選擇器分別獲取它們。
//注意區分類似這樣的選擇器
//雖然一個空格，卻截然不同的效果.

var $t_a = $('.test :hidden'); 
var $t_b = $('.test:hidden'); 
var len_a = $t_a.length; 
var len_b = $t_b.length; 
alert("$('.test :hidden') = "+len_a); //

之所以會出現不同的結果，是因為后代選擇器與過濾選擇器的不同。

var $t_a = $('.test :hidden'); //有空格 是選取class為“test”的元素里面的隱藏元素。
var $t_b = $('.test:hidden'); //沒有空格 則是選取隱藏的class為“test”的元素。
這點和css是一樣的 css中假如有個div有兩個class屬性.top 和 .right <div class="top right "></div>,在css中我們要選擇它定義樣式只能這樣寫 .top.right{ } 而不能寫成.top .right{ }

jquery選擇器結果是數組時需要主要的一個問題，并詳細分析了產生此問題的原因：

$("#div1 span")獲得三個對象的數組

1.如果執行 $("#div1 span").html("aaa"),則數組內的所有對象都會改變

2.如果執行$("#div1 span").html(),只取值的話,則只會取數組第一個對象的值

所以如果選擇器獲得是一個數組,要對數組每個元素都進行操作時,最好用each().

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com