89453862 2015-08-04
1、选择器中含有"."、"#"、"("、“]”等特殊字符:
按命名规则属性值中是不能出现这些特殊字符的,但是在实际情况中偶尔也会遇到。如果按照普通方式去处理出来的话一定会报错,解决的办法可以使用转义符进行转义。如:
/* HTML: <div id="test#1">1111111</div> <div id="test[2]">2222222</div> */ //普通处理方式 var id1 = $("#test#1"); var id2 = $("#test[2]"); alert(id1+"\n"+id2);//两个Object alert(id1.text()+"\n"+id2.text());//alert出来空,没有数据 //转义 var id3 = $("#test\\#1"); var id4 = $("#test\\[2\\]"); alert(id3+"\n"+id4);//两个Object alert(id3.text()+"\n"+id4.text());//1111111 2222222
(说明:上面的测试代码用的Jquery1.4.2版本。有时候转义可能因为Jquery版本的问题导致转义失效。)
2、属性选择器的@问题:
有时候在代码里面可能看到某个属性过滤器前面有个@符号,这个@符号在Jquery1.3.1之前的可能有用(跟一般的属性选择权一样),之后的版本都不再支持@,所以在使用1.3.1以上版本时,就不能在属性前添加@符号,如:
/* HTML: <div id="test3">3333333</div> */ //以前的: $("div[@id='test3']"); //现在的: $("div[id='test3']");
3、选择器中含有空格的问题:
选择器中有空格,通常会理解成子孙后代元素,没有空格的只会想成是当前元素的过滤条件。因此有无空格效果会截然不同。如:
/* HTML: <div class="test"> <div style="display:none;">11111</div> <div style="display:none;">22222</div> <div style="display:none;">33333</div> <div class="test" style="display:none;">44444</div> </div> <div class="test" style="display:none;">55555</div> <div class="test" style="display:none;">66666</div> */ var $t_1 = $(".test :hidden");//带空格的 var $t_2 = $(".test:hidden");//不带空格的 alert($t_1.length);//4 alert($t_2.length);//3
有空格的得到4,是因为选取class为“test”的元素里面的隐藏元素,hidden是用来修饰test里面的元素的,即11111、22222、33333、44444四个不显示的DIV。
没有空格的得到3,是因为选取隐藏的class为"test"的元素,hidden修饰的是test本身,即44444、55555、66666三个隐藏的DIV。