Jquery选择器的一些特殊情况

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。

相关推荐