jQuery选择器

 一、jQuery选择器的优势

1. 简洁的写法

2. 支持ccs1到css3选择器

全部的css1,css2

部分的css3

3. 完善的处理机制

二、jQuery选择器的种类及具体实现方式

1. 基本选择器

2. 层次选择器

      (1) 基本过滤选择器

(2) 内容过滤选择器

(3) 属性过滤选择器

(4) 可见性过滤选择器

(5) 子元素过滤选择器

(6) 表单对象属性过滤选择器

3. 过滤选择器

4. 表单选择器

三、区别

1.选择器中的空格

//HTML代码
<div class="test">
    <div style="display:none;">aa</div>                    //1
    <div style="display:none;">bb</div>                    //2
    <div style="display:none;">cc</div>                    //3
    <div class="test" style="display:none;">dd</div>       //4
</div>
<div class="test" style="display:none;">ff</div>           //5
<div class="test" style="display:none;">ee</div>           //6

//jQuery选择器
var $a = $('.test :hidden');
var $b = $('.test:hidden');
var $len_a = $a.length;
var $len_b = $b.length;
alert("$('.test :hidden') = " + len_a);    //输出4; 选取class为test的元素里面的隐藏元素1234
alert("$('.test:hidden') = " + len_b);     //输出3; 选取隐藏的class为test的元素456

2.选择器中的冒号

$("#form :input");    //form下所有的<input><textarea><select><button>
$("#form input");     //form下的所有的<input>

3.匹配元素

$("div :nth-child(2)");   //数值从1开始算;为每一个父元素匹配子元素
$("div:eq(2)");             //数值从0开始算;只匹配一个元素

4.后代元素及子元素

$("body div").css("background","#bbffaa");    //body中所有元素都变色
$("body>div").css("background","#bbffaa");    //body下一级的div变色但下一级及以后的不变

5.siblings

$("#prev ~ div").css("background","#bbffaa");              //prev之后的所有同辈div变色
$("#prev").siblings("div").css("background","#bbffaa");   //pre同辈的所有div变色，无论在prev前后

 

四、注意事项

1.属性选择器的@符号问题

       在jQuery升级版本过程中，jQuery在1.3.1版本中彻底了1.1.0版本遗留下来的@符号

$("div[@title='test']");     //1.1.0版本代码
$("div[title='test']");      //1.3.1版本代码

2. 选择器中含有".","#","(","]"等特殊字符要用转义符转义

<div id="id#b">bb</div>       //html代码

$("#id\\#b");                 //用jQuery获取元素

 3.检查某元素在网页上是否存在时：--------jQuery------$("#t")获取的永远的对象

a.根据获得元素的长度判断

if($("#t").length > 0){
      //do something
}

b.转换成DOM对象来判段

if($("#t")[0]){       //jQuery对象转换成DOM对象的第一种方法
  //do something
}

if($("#t").get(0)){   //jQuery对象转换为DOM对象的第二种方法
  //do something
}