快捷導(dǎo)航

jQuery選擇器特殊字符與屬性空格問題

更新時(shí)間：2017年08月14日 15:26:58 作者：享受生活

這篇文章主要介紹了jQuery選擇器特殊字符與屬性空格問題。通過選擇器中含有特殊符號(hào)的注意事項(xiàng)和選擇器中含有空格的注意事項(xiàng)詳細(xì)介紹了解決問題的辦法,需要的朋友可以參考下

一、選擇器中含有特殊符號(hào)的注意事項(xiàng)

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

根據(jù)W3C的規(guī)定，屬性值中是不能含有這些特殊字符的，但在實(shí)際項(xiàng)目中偶爾會(huì)遇到表達(dá)式中含有“#”和“.”等特殊字符，如果按照普通的方式去處理出來的話就會(huì)出錯(cuò)。解決此類錯(cuò)誤的方法是使用轉(zhuǎn)義符轉(zhuǎn)義。

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

不能這樣寫：

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

應(yīng)該使用轉(zhuǎn)義符號(hào)：

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

2．屬性選擇器的引號(hào)問題
1.3.1版本徹底放棄了1.1.0版本遺留下的@符號(hào)，如果你使用1.3.1以上的版本，那么你不能在屬性前添加@符號(hào)，比如：
$('div[@title="test"'];

正確的寫法是：

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

二、選擇器中含有空格的注意事項(xiàng)

選擇器中的空格也是不容忽視的，多一個(gè)空格或少一個(gè)空格也許會(huì)得到截然不同的結(jié)果?？聪旅孢@個(gè)例子，它的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選擇器分別獲取它們。

//注意區(qū)分類似這樣的選擇器 
//雖然一個(gè)空格，卻截然不同的效果. 
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); //輸出 4 
alert("$('.test:hidden') = "+len_b); //輸出 3

之所以會(huì)出現(xiàn)不同的結(jié)果，是因?yàn)楹蟠x擇器與過濾選擇器的不同。

var $t_a = $('.test :hidden'); //有空格是選取class為“test”的元素里面的隱藏元素。

var $t_b = $('.test:hidden'); //沒有空格則是選取隱藏的class為“test”的元素。

這點(diǎn)和css是一樣的 css中假如有個(gè)div有兩個(gè)class屬性.top 和 .right <div class="top right "></div>,在css中我們要選擇它定義樣式只能這樣寫 .top.right{ } 而不能寫成.top .right{ }

以上是小編為大家總結(jié)的全部內(nèi)容啦，希望對(duì)大家的學(xué)習(xí)有所幫助~~

您可能感興趣的文章: