1.选择器中含有“.”、“#”、“(”或“]”等特殊字符
根据W3C的规定,属性值中是不能含有这些特殊字符的,但在实际项目中偶尔会遇到表达式中含有“#”和“.”等特殊字符,如果按照普通的方式去处理出来的话就会出错。解决此类错误的方法是使用转义符转义。
HTML代码如下:
折叠
展开
XML/HTML 代码
复制内容到剪贴板
- <div id="id#b">bb</div>
- <div id="id[1]">cc</div>
如果按照普通的方式来获取,例如:
折叠
展开
JavaScript 代码
复制内容到剪贴板
- $('#id#b');
- $('#id[1]');
以上代码不能正确获取到元素,正确的写法如下:
折叠
展开
JavaScript 代码
复制内容到剪贴板
- $('#id\\#b'); //转义特殊字符“#”
- $('#id\\[1\\]'); //转义特殊字符“[ ]”
2.属性选择器的引号问题
1.3.1版本彻底放弃了1.1.0版本遗留下的@符号,如果你使用1.3.1以上的版本,那么你不能在属性前添加@符号,比如:
折叠
展开
JavaScript 代码
复制内容到剪贴板
- $('div[@title="test"'];
正确的写法是去掉@符号,比如:
折叠
展开
JavaScript 代码
复制内容到剪贴板
- $('div[title="test"'];
二、选择器中含有空格的注意事项
选择器中的空格也是不容忽视的,多一个空格或少一个空格也许会得到截然不同的结果。看下面这个例子,它的HTML代码如下:
折叠
展开
XML/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选择器分别获取它们。
之所以会出现不同的结果,是因为后代选择器与过滤选择器的不同。
折叠
展开
JavaScript 代码
复制内容到剪贴板
- //注意区分类似这样的选择器
- //虽然一个空格,却截然不同的效果.
- 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
之所以会出现不同的结果,是因为后代选择器与过滤选择器的不同。
折叠
展开
JavaScript 代码
复制内容到剪贴板
- var $t_a = $('.test :hidden'); //有空格
以上代码是选取class为“test”的元素里面的隐藏元素。lodidance.com
而代码:
折叠
展开
JavaScript 代码
复制内容到剪贴板
- var $t_b = $('.test:hidden'); //没有空格