第六章

第六章

jQuery选择器

1.概念
jQuery选择器类似于CSS选择器，用来选取网页中的元素

例：$("h3").css("background","#09F");

功能：获取并设置网页中所有<h3>元素的背景；
      “h3”为选择器语法，必须放在$()中；
      $(“h3”)返回jQuery对象；
      .css()是为jQuery对象设置样式的方法

分类：通过CSS选择器选取元素
          ①基本选择器
          ②层次选择器
          ③属性选择器
          
      通过过滤选择器选择元素
          ①基本过滤选择器
          ②可见性过滤选择器

注：不清楚的时候查看文档寻找即可！！！！！！！！！！！！

2.基本选择器
标签选择器（element）          根据给定的标签名匹配元素
例：$("h2" )              选取所有h2元素

类选择器（.class）             根据给定的class匹配元素
例：$(" .title")          选取所有class为title的元素

ID选择器（#id）            	  根据给定的id匹配元素
例：$(" #title")          选取id为title的元素

并集选择器（selector1,selector2,...,selectorN）      将每一个选择器匹配的元素合并后一起返回
例：$("div,p,.title" )    选取所有div、p和拥有class为title的元素

全局选择器（*）	             匹配所有元素
例：$("*" )                选取所有元素

3.层次选择器
后代选择器（ancestor descendant）	选取ancestor元素里的所有descendant（后代）元素
例：$("#menu span" )       选取#menu下的<span>元素

子选择器（parent>child）	         选取parent元素下的child（子）元素
例：$(" #menu>span" )      选取#menu的子元素<span>

相邻元素选择器	prev+next	        选取紧邻prev元素之后的next元素
例：$(" h2+dl " )          选取紧邻<h2>元素之后的同辈元素<dl>

同辈元素选择器（prev~sibings）	   选取prev元素之后的所有siblings元素
例：$(" h2~dl " )          选取<h2>元素之后所有的同辈元素<dl>

4.属性选择器
[attribute^=value]                 选取给定属性是以某些特定值开始的元素
例：$("[href^='en']")      选取href属性值以en开头的元素

[attribute$=value]                 选取给定属性是以某些特定值结尾的元素
例：$("[href$='.jpg']")    选取href属性值以.jpg结尾的元素

[attribute*=value]                 选取给定属性是以包含某些值的元素
例：$("[href* ='txt']")    选取href属性值中含有txt的元素

属性选择器可以根据是否包含某属性来选取元素
例：$("#news a[class]").css("background","#c9cbcb");            a标签带有class属性

属性选择器可以根据属性的值来选取元素
例：$("#news a[class='hot']").css("background","#c9cbcb");      class属性值为hot

属性选择器可以指定选取不等于属性是某个特定值的元素
例：$("#news a[class!='hot']").css("background","#c9cbcb");     class值不等于hot

5.基本过滤选择器
:first                             选取第一个元素
例：$("li:first")            选取所有<li>元素中的第一个<li>元素

:last                              选取最后一个元素
例：$(" li:last" )           选取所有<li>元素中的最后一个<li>元素

:not(selector)                     选取去除所有与给定选择器匹配的元素
例：$(" li:not(.three)" )    选取class不是three的元素

:even                              选取索引是偶数的所有元素（index从0开始）
例：$(" li:even" )           选取索引是偶数的所有<li>元素

:odd                               选取索引是奇数的所有元素（index从0开始）
例：$(" li:odd" )            选取索引是奇数的所有<li>元素

:eq(index)                         选取索引等于index的元素（index从0开始）
例：$("li:eq(1)" )           选取索引等于1的<li>元素

:gt(index)                         选取索引大于index的元素（index从0开始）
例：$(" li:gt(1)" )          选取索引大于1的<li>元素（注：大于1，不包括1）

:lt(index)                         选取索引小于index的元素（index从0开始）
例：$(“li:lt(1)” )           选取索引小于1的<li>元素（注：小于1，不包括1）

:header                            选取所有标题元素，如h1~h6
例：$(":header" )            选取网页中所有标题元素

:focus                             选取当前获取焦点的元素
例：$(":focus" )             选取当前获取焦点的元素

:animated                          选择所有动画
例：$(":animated" )          选取当前所有动画元素

6.可见性过滤选择器
通过元素显示状态来选取元素
:visible                           选取所有可见的元素
例：$(":visible" )           选取所有可见的元素

:hidden                            选取所有隐藏的元素
例：$(":hidden" )            选取所有隐藏的元素

7.注意事项
①特殊符号的转义
例：<div id="id#a">aa</div>
    <div id="id[2]">cc</div>

②获取这两个元素的选择器
例：$("#id\\#a");
    $("#id\\[2\\]");

③选择器中的空格
选择器的书写规范很严格，多一个空格或少一个空格，都会影响选择器的效果
例：var $t_a = $(".test:hidden");          //带空格的jQuery选择器
选取class为“test”的元素内部的隐藏元素

例：var $t_b = $(".test:hidden");           //不带空格的jQuery选择器
选取隐藏的class为“test”的元素