Jquery选择器的一些特殊情况

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。