JQuery 选择器总结

主要分为一下几类

一、基本选择器

（1）#id $("#id") 返回单个元素

（2）.class $(".demo") 返回集合元素

（3）element $("p") 返回集合元素

（4）* $("*") 选择全部元素 返回集合元素

（5）A,B,C $("#id,.demo") 选择多个元素 返回集合元素

二、层次选择器

（1）A B $("#id .demo")  选择#id里面的全部class为demo的标签 包含了该标签的子元素 返回集合元素

（2）A>B $("#id>.demo") 选择#id里面全部class为demo的标签 不包含该标签的子元素 返回集合元素

（3）A + B $(“#id+.demo”) 选择#id元素后的下一个class为demo的同辈元素。 返回集合元素

（4）A~B $("#id~.demo") 选择#id之后的全部class为demo的同辈元素 返回集合元素

三、过滤选择器

1、基本过滤选择器

（1） :first $(".demo:first") 选择第一个class为demo的元素 返回单个元素

（2） :last $(".demo:last") 选择最后一个class为demo的元素 返回单个元素

（3） :not(A) $("input:not(.demo)")选择class不是demo的<input>元素 返回集合元素

（4） :even $("input:event") 选择索引是奇数的input元素 返回集合元素

（5） :odd $("input:odd") 选择索引是偶数的input元素 返回集合元素

（6） :eq(index) $("input:eq(1)")   选择索引是1的input元素 返回单个元素

（7） :gt(index) $(""input:gt(1)") 选择索引大于1的input元素 返回集合元素

（8） :lt(index) 选择索引小于1的input元素 返回集合元素

（9） :header $("div:header") 选择div内的全部h标签 返回集合元素

      （10） :animated $("div:animated") 选择正在运行动画的animated 返回集合元素

      （11） :focus $("input:focus") 选择获得焦点的input 返回集合元素

2、内容过滤器

（1） :contains(text) $(div:contains('我')) 选择div中含有我的div元素 返回集合元素

（2） :empty $("div:empty") 选择不含有不论什么文字或子元素的div 返回集合元素

（3） :has(selector) $("div:has(p)") 选择含有P元素的div 返回集合元素

（4） :parent $("div:parent") 选取拥有子元素的div 返回集合元素

3、可见性过滤器

（1） :hidden 选择全部不可见的元素 返回集合元素

（2） :visible 选择所以可见的元素 返回集合元素

  4、属性过滤器

（1） [attribute] $("div[title]") 选择所以有title属性的div 返回集合元素

（2） [attribute=A] $("div[title=test]") 选择全部title=test的div 返回集合元素

（3） [attrebute!=A] 选择所以attribute不等于A的元素 返回集合元素

（4） [attribute^=A] 选择以A开头的attribute 的标签 返回集合元素

（5） [attribute$=A] 选择以A结尾的attribute的标签 返回集合元素

（6） [attribute*=A] 选择包括A的attribute 的标签 返回集合元素

（7） [attribute|=A] 选择等于A或者是A为前缀 的标签 返回集合元素

（8） [(1)][(i)] $(“div[title][class=demo]”) 属性过滤器能够连用 返回集合元素

5、子元素过滤器

（1） :nth-child(index/even/odd/equation) 选取每一个父元素下第index个子元素或者是奇偶元素 返回集合元素

（2） :first-child 返回集合元素

（3） :last-child 返回集合元素

（4） :only-child $("div p:only") 假设某元素是他父亲元素中的唯一的子元素，则将被匹配 返回集合元素

6、表单对象过滤器

（1）:enabled $("#form1 :enabled") 选取id为form1表单被全部的可用元素 返回集合元素

（2）:disabled 返回集合元素

（3）:checked $(“input:checked”) 选取全部被选中的<input>元素（包含单选框，复选框） 返回集合元素

（4）:selected $(select option :selected) 选取全部被选中的选项元素（包含下拉列表） 返回集合元素

四、表单选择器

（1） :input $(":input") 选取全部的<input><button><textarea><select>元素 返回集合元素

（2） :text $(":text") 选取全部的单行文本框 返回集合元素

应用举例：

$("p").click(function{

});

$("#tb tbody tr:even"),css("background","#000000");

$("#btn").click(function{

var items = $("input[name='check']:checked")

alert(“选中的个数为：”+items.length)

});