1. 选择其中含有特殊符号
W3C规范规定属性值中不能含有某些特殊字符,但在实际开发过程中,常遇到表达式中含有“#”或“.”等特殊字符的情况,如果按照普通的方式去处理就会出错,解决此类问题的方法就是使用转义符转义。
有如下代码:
<div id="id#a">aa</div>
<div id="id[2]">cc</div>
按照普通的方式来获取。例如:
$("#id#a");
$("#id[2]");
将不能获取到元素,改为转义符的写法如下:
$("#id\#a");
$("#id\[2\]");
2. 选择器中含有空格
选择器中的空格也是不容忽视的,多一个空格或少一个空格,都会得到截然不同的结果(是由于后代选择器 和 过滤选择器 存在不同引起的):
有如下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"); //带空格的jQuery选择器
以上代码选取的是class为“test”的元素内部的隐藏元素(子元素)。
而以下代码:
var $t_b=$(".test:hidden"); //不带空格的jQuery选择器
选取的是隐藏的class为“test”的元素。