手游折扣平台

書名： jQuery從入門到精通（軟件開發視頻大講堂）
作者名：明日科技
本章字數： 591字
更新時間： 2020-11-28 23:47:24

4.9 選擇器中的一些注意事項

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

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

根據W3C規定，屬性值中是不能包含這些特殊字符的，但在實際項目應用中偶爾也會遇到這種表達式中含有“#”和“]”等特殊字符的情況。這時，如果按照普通方式去處理的話就會出現錯誤。解決這類錯誤的方法是使用轉義符號將其轉義。例如，有如下HTML代碼：

        <div id=”mr#soft”>明日科技</div>
        <div id=”mrbook(1)”>明日圖書</div>

如果按照普通方式來獲取，例如：

        $("#mr#soft");
        $("#mrbook(1)");

這樣是不能正確獲取到元素的，正確的寫法如下：

        $("#mr\\#soft");
        $("#mrbook\\(1\\)");

2．屬性選擇器的@符號問題

在jQuery升級版本過程中，jQuery在1.3.1版本中徹底放棄了1.1.0版本遺留下的@符號，假如我們使用1.3.1以上的版本，那么不需要在屬性前添加@符號，例如以下代碼：

        $("div[@name='mingri']");

正確的寫法是將@符號去掉，即改為如下形式：

        $("div[name='mingri']");

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

在實際應用當中，選擇器中含有空格也是不容忽視的，多一個空格或者少一個空格也會得到截然不同的結果。請看如下實例代碼：

        <div class="name">
            <div style="display:none; ">小科</div>
            <div style="display:none; ">小王</div>
            <div style="display:none; ">小張</div>
            <div style="display:none; "class="name">小辛</div>
        </div>
        <div style="display:none; "class="name">小楊</div>
        <div style="display:none; "class="name">小劉</div>

使用如下的jQuery選擇器分別獲取它們。

        <script type="text/javascript">
            var$l_a=$(".name:hidden");             //帶空格的jQuery選擇器
            var$l_b=$(".name:hidden");             //不帶空格的jQuery選擇器
            var len_a = $l_a.length;
            var len_b = $l_b.length;
            alert("$('.name:hidden')="+len_a);     //輸出4
            alert("$('.name:hidden')="+len_b);     //輸出3
        </script>

以上代碼會出現不同的結果，是因為后代選擇器和過濾選擇器的不同。

        var$l_a=$(".name:hidden");                 //帶空格的jQuery選擇器

以上代碼是選擇class為name的元素之內的隱藏元素，也就是內容為小科、小王、小張、小辛的4個div元素。

而代碼

        var$l_b=$(".name:hidden");                 //不帶空格的jQuery選擇器

則是獲取隱藏的class為name的元素，即內容為小辛、小楊、小劉的div元素。

官术网_书友最值得收藏!

jQuery從入門到精通 （軟件開發視頻大講堂）

4.9 選擇器中的一些注意事項

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

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

jQuery從入門到精通（軟件開發視頻大講堂）