zoukankan      html  css  js  c++  java
  • 选择器中含有特殊符号的注意事项

    一、选择器中含有特殊符号的注意事项

    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"'];
    

    正确的写法是:

    $('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); //输出 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{ }

  • 相关阅读:
    Redis源码分析(二十一)--- anet网络通信的封装
    leetcode 总结part1
    leetcode String to Integer (atoi)
    leetcode 165. Compare Version Numbers
    leetcode 189. Rotate Array
    leetcode 168. Excel Sheet Column Title
    leetcode 155. Min Stack
    leetcode 228. Summary Ranges
    leetcode 204. Count Primes
    leetcode 6. ZigZag Conversion
  • 原文地址:https://www.cnblogs.com/moyuling/p/4568610.html
Copyright © 2011-2022 走看看