jQuery选择器

jQuery选择器的概述

选择器是jQuery的基础，在jQuery中，对事件处理、遍历DOM和Ajax操作都依赖于选择器。jQuery选择器可通过CSS选择器、条件过滤两种方式获取元素。通过CSS选择器语法规则获取元素，jQuery选择器包括基本选择器、层次选择器和属性选择器；通过条件过滤选取元素，jQuery选择器包括基本过滤选择器和可见性过滤选择器。

什么是jQuery选择器？

说到选择器，会让人自然地联想到层叠样式表(Cascading Style Sheets,CSS),在CSS中择器的作用是获取元素，而后为其添加CSS样式，美化其外观,而jQuery选择器不仅良好地继承了CSS选择器的语法。还继承了其获取页面元素便捷高效的特点，jQuery选择器与CSS选择器的不同之处就在于，jQuery选择器获取元素后，为该元素添加的是行为，使页面交互变得更加丰富多彩。

此外，jQuery选择器拥有着良好的浏览器兼容性，不用像使用CSS选择器那样需要考虑各个浏览器对它的支持情况。

jQuery选择器的优势

1.简洁的写法

2.完善的处理机制

jQuery选择器的类型

jQuery选择器可通过CSS选择器和过滤选择器两种方式获取元素。

通过CSS选择器选取元素

基本选择器

层次选择器

属性选择器

通过过滤选择器选取元素

基本过滤选择器

可见性过滤选择器

基本选择器

 

选择器（名称）	描述	返回值
#id（id选择器）	根据给定的 ID 匹配一个元素	单个元素
element（标签选择器）	根据给定的元素名匹配所有元素	元素集合
.class（类选择器）	根据给定的类匹配元素	元素集合
*（全局选择器）	匹配所有元素	元素集合
Selector1, selector N（并集选择器）	将每一个选择器匹配到的元素合并后一起返回	元素集合

示例：

 

<script src="js/jquery-1.12.4.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $("dt").click(function () {
            $("dd").css({"display":"block"});
        })
        $("h1").css({"color":"blue"});
        $(".price").css({"background":"#efefef","padding":"5px"});
        $("#author").css({"color":"#083499"});
        $(".intro,dt,dd").css({"color":"#ff0000"});
    })
</script>

层次选择器

 

选择器（名称）	描述	返回值
root offspring（后代选择器）	选取root元素里的所有offspring（后代元素）	元素集合
Parent > child（子选择器）	根据父元素匹配所有的子元素	元素集合
Prev + next（相邻选择器）	匹配所有紧接在 prev 元素后的相邻元素	元素集合
Prev ~sibling（同辈选择器）	匹配 prev 元素之后的所有兄弟元素	元素集合

示例：

 

<script src="js/jquery-1.12.4.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $(".textRight p").css({"color":"red"});
        /*$("h1^p").css({"color":"red"});*/
    })
</script>

属性选择器

 

选择器	描述	返回值
[attribute]	获取包含给定属性的元素	元素集合
[attribute=value]	获取等于给定的属性是某个特定值的元素	元素集合
[attribute!=value]	获取不等于给定的属性是某个特定值的元素	元素集合
[attribute^=value]	获取给定的属性是以某些值开始的元素	元素集合
[attribute$=value]	获取给定的属性是以某些值结尾的元素	元素集合
[attribute*=value]	获取给定的属性是以包含某些值的元素	元素集合
[selector1] [selectorN]	获取满足多个条件的复合属性的元素	元素集合

示例：

 

<script src="js/jquery-1.12.4.js"></script>
<script type="text/javascript">
   $(document).ready(function () {
      $("dt").click(function () {
         $("dd span[id]").css({"color":"#ff0099","font-weight":"bolder"});
        })
      $("#director").click(function () {
         $("[title='导演']").css({"font-weight":"bolder"})
        })
      $("#label").click(function () {
       $("#label~span").css({"background":"#e0f8ea","color":"#10a14b","padding-top":"2px","padding-left":"8px"})
        })

      $("img[alt=收藏本片]").click(function () {
         alert("您已收藏成功！");
        })
    })
</script>

基本过滤选择器

 

示例：

 

<script src="js/jquery-1.12.4.js"></script>
<script type="text/javascript">
 $(document).ready(function () {
        $("tr:even").css({"background":"#eff7d1"});
        $("tr:odd").css({"background":"#f7e195"});
    })
</script>

可见性过滤选择器

 

选择器	描述	返回值
:hidden	获取所有不可见的元素，或者 type 为 hidden	元素集合
:visible	获取所有可见的元素	元素集合

示例：

<script src="js/jquery-1.12.4.js"></script>
<script>
    $(document).ready(function () {
        $("#show").click(function () {
           $("p:hidden").show();
        })
        $("#hide").click(function () {
            $("p:visible").hide();
        })
    })

</script>

jQuery选择器的注意事项

选择器中含有特殊符号的注意事项
选择器中含有“.”、“#”、“(”或“]”等特殊字符根据W3C的规定，属性值中是不能含有这些特殊字符的，但在实际项目中偶尔会遇到表达式中含有“#”和“.”等特殊字符，如果按照普通的方式去处理出来的话就会出错。
解决此类错误的方法是使用转义符转义。
<div id="id#b">bb</div> 
<div id="id[1]">cc</div> 
不能这样写：
$('#id#b');  
$('#id[1]');
应该使用转义符号：
$('#id\\#b');//转义特殊字符“#”  
$('#id\\[1\\]');//转义特殊字符“[ ]”

选择器中含有空格的注意事项
选择器中的空格也是不容忽视的，多一个空格或少一个空格也许会得到截然不同的结果。看下面这个例子，它的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选择器分别获取它们。
//注意区分类似这样的选择器
//虽然一个空格，却截然不同的效果
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之所以会出现不同的结果，是因为后代选择器与过滤选择器的不同。
var $t_a = $('.test :hidden'); //有空格 是选取class为“test”的元素里面的隐藏元素。
var $t_b = $('.test:hidden'); //没有空格 则是选取隐藏的class为“test”的元素。这点和css是一样的 css中假如有个div有两个class属性.top 和 .right <div class="top right "></div>,在css中我们要选择它定义样式只能这样写 .top.right{ } 而不能写成.top .right{ }