jQuery选择器

选择器简介

• jQuery选择器允许对HTML元素组成单个元素进行操作。
• jQuery选择器基于元素的id、类型、属性、属性值等(查找或选择)HTML元素。
• jQuery基于已经存在的CSS选择器，除此之外，还有一些自定义的选择器。
• jQuery中所有的选择器都以美元符号开头：$()。

基本选择器

基本选择器是jQuery中最常用的选择器，也是最简单的选择器，它通过元素id、class、和标签名等来查找DOM元素。在网页中，每个id名称只能使用一次，class允许重复使用。

1. *：匹配所有元素(集合元素)
   $( * )
2. #id：根据给定的id匹配一个元素(单个元素)
   $("#test")选取id为test的元素
3. element：根据给定的元素匹配元素(集合元素)
   $(“p”)选取所有的p标签
4. .class：根据给定的类名匹配元素(集合元素)
   $(".test")选取所有class为test的元素
5. selector1，selector2，…，selector n：将每个选择器匹配到的元素合并到一起返回(集合元素)
   $(“div,span,p.myClass”)选取所有div,span和拥有class为myClass的p标签的一组元素。

层次选择器

如果想通过DOM元素之间的层次关系来获取特定元素，例如后代元素、子元素、相邻元素和同辈元素等，层次选择器是一个非常好的选择。

1. $(“ancestor descendant”)选取ancestor元素里的所有后代元素
   例： $(“div span”)返回div里所有的span元素
   $(".container p")返回class为container的所有p元素
2. $(“parent>child”)选取parent元素下的child子元素
   例： $(“div>span”)选取div元素下的元素名是span的子元素
   $("#main>*")选择id值为main的所有子元素
3. $(“prev+next”)选取紧接在prev元素后的next元素
   例： $(".one+div")选取class为one的下一个div同辈元素
   $(“label+input”)选择所有label元素的下一个input元素
4. $(“prev~siblings”)选取prev元素之后的所有siblings元素
   例： $("#two~div")选取id为two的元素后边的所有div同辈元素
   $("#prev~div1")选取id为prev元素后边的所有id为div1的div同辈元素

注意：$(“div span”)和 $(“div>span”)是有区别的
$(“div span”)会选取div里所有的span元素
$(“div>span”)只会选取div直属的span子元素

过滤选择器

过滤选择器主要是通过特定的过滤规则来筛选出所需的DOM元素，过滤规则与css中的伪类选择器语法相同，即选择器都以一个冒号(:)开头。按照不同的过滤规则，过滤选择器可分为基本过滤、内容过滤、可见性过滤、属性过滤、子元素过滤和表单对象属性过滤器。
基本过滤选择器

1. ：first
   示例：$(“p:first”) 选取第一个p元素
2. ：last
   示例：$(“p:last”) 选取最后一个p元素
3. ：even
   示例：$(“tr:even”) 所有偶数tr元素
4. ：odd
   示例：$(“tr:odd”) 所有奇数tr元素
5. ：eq(index)
   示例：$("ul li:eq(3)) 列表中第四个元素(index从0开始)
6. ：gt(no)
   示例：$(“ul li:gt(3)”) 列出index大于3的元素
7. ：hidden
   示例：$(“p:hidden”) 所有隐藏的p元素
8. ：visible
   示例：$(“table:visible”) 所有可见的表格
9. [attribute]
   示例：$([href]) 所有带href属性的元素
10. [attribute=value]
    示例：$([href=’#’]) 所有href属性的值等于"#"的元素
11. [attribute!=value]
    可视化过滤器
    $(“div:hidden”) 选择所有的被hidden的div元素
    $(“div:visible”) 选择所有的可视化的div元素
    属性过滤选择器
    $(“div[id]”) 选择所有含有id属性的div元素
    $(“input[name=‘newsletter’]”) 选择所有name属性等于newsletter的input元素
    $(“input[name!=‘newsletter’]”) 选择所有name属性不等于newsletter的input元素
    $(“input^=‘news’”) 选择所有的name属性以’news’开头的input元素
    $(“input $ =‘news’”) 选择所有的name属性以’news’结尾的input元素
    $(“input[name*=‘news’]”) 选择所有的name属性包含’news’的input元素
    $(“input[id][name $=‘man’]”) 可以使用多个属性进行联合选择，该选择器是得到所有的含有id属性并且name属性以man结尾
    子元素过滤器
    $(“div span:first-child”) 返回所有的div元素的第一个子节点的数组
    $(“div span:last-child”) 返回所有的div元素的最后一个节点的数组
    $(“div button:only-child”)返回所有的div中只有唯一一个子节点的所有子节点的数组

表单选择器

为了使用户能够更加灵活的操作表单，jQuery中专门加入了表单选择器。利用表单选择器，能够及其方便地获取到表单的某个或某些类型的元素。
表单选择器
：input $(":input")所有input元素
：text $(":text")所有text=text的input元素
：password $(":password")所有type=“password"的input元素
：radio $(”:radio")所有type=“radio"的input元素
：checkbox $(”:checkbox")所有type=“checkbox"的input元素
：submit $(”:submit")所有type=“submit"的input元素
：reset $(”:reset")所有type=“reset"的input元素
：button $(”:button")所有type=“button"的input元素
：image $(”:image")所有type=“image"的input元素
：file $(”:file")所有type="file"的input元素

jQuery元素选择方法

可以使用next()方法来代替$(“prev+next”)选择器，用nextAll()方法来代替 $(“prev~siblings”)选择器，siblings()方法来补充nextAll()方法的不足。
选择方法：

1. next() 等价于$(“prev+next”)
2. nextAll() 等价于$(“prev~siblings”)
3. siblings() 类似$(“prev~siblings”)，但无关前后，选择所有同辈节点
4. children() 获取匹配元素的所有子元素
5. parent() 获取匹配元素的父元素
6. parents() 获取匹配元素的所有父元素