選擇器中含有特殊符號的注意事項

2022-02-02 09:27:30 字數 1420 閱讀 6527

1.選擇器中含有「.」、「#」、「(」或「]」等特殊字元

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

bb

< div id="id[1]">cc

不能這樣寫:

\(('#id#b');

\)('#id[1]');

應該使用轉義符號:

\(('#id\\#b'); //轉義特殊字元「#」

\)('#id\[1\]'); //轉義特殊字元「[ ]」

2.屬性選擇器的引號問題

1.3.1版本徹底放棄了1.1.0版本遺留下的@符號,如果你使用1.3.1以上的版本,那麼你不能在屬性前新增@符號,比如:

$('div[@title="test"'];
正確的寫法是:

$('div[title="test"'];
選擇器中的空格也是不容忽視的,多乙個空格或少乙個空格也許會得到截然不同的結果。看下面這個例子,它的html**如下:

aa

bbcc

dd< /div>

< div class="test" style="display:none;">ee

< div class="test" style="display:none;">ff

使用如下的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); //輸出 4

alert("$('.test:hidden') = "+len_b); //輸出 3

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

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

var $t_b = $('.test:hidden'); //沒有空格 則是選取隱藏的class為「test」的元素。
這點和css是一樣的 css中假如有個div有兩個class屬性.top 和 .right

,在css中我們要選擇它定義樣式只能這樣寫 .top.right 而不能寫成.top .right

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

選擇器中的空格也是不容忽視的,多乙個空格或少乙個空格也許會得到截然不同的結果。看下面的例子,它的html 如下 aa bbcc dd ee ff 使用如下的jquery選擇器分別獲取它們。var t a test hidden var t b test hidden var len a t a.le...

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

此文摘自 鋒利的jquery 另外新增了一點自己的東西 選擇器中的空格是不容忽視的,多乙個空格或少乙個空格也許得到的結果會截然不同的。下面來看乙個例子。先構建如下的html view source print?1 divclass test 2 divstyle display none jquer...

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

選擇器中的空格也是不容忽視的,多乙個空格和少乙個空格會得到不同結果 例子如下 class test aadiv bbdiv ccdiv class test style display none dddiv div class test style display none eediv class ...