购买
下载掌阅APP,畅读海量书库
立即打开
畅读海量书库
扫码下载掌阅APP

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元素。 h/BoBxP56vfeQUznafWjkxckLyrKBxQop81CURK8ldQLj57OYsb5rSPY730yE9pr

点击中间区域
呼出菜单
上一章
目录
下一章
×