基本选择器是jQuery中最简单和最常用的选择器
1. *:选取所有的元素 例如:$("*")
2. #id:根据id属性值选取元素 (在同一个页面中只能使用一次) 例如:$("#bottom")
3. .class:根据class属性值选取元素 (执行效率比较低) 例如:$(".clear")
4. element:根据标签名选取元素 例如:$("h")
过滤选择器分为基本过滤选择器、内容过滤选择器、子元素过滤选择器、可见性过滤选择器、属性过滤选择器等
1、基本过滤选择器
(1) :first :选取第一个元素 例如:$("p:first")
(2) :last :选取最后一个元素 例如:$("p:last")
(3) :even :选取索引值是偶数的元素 例如:$("p:even')
(4) :odd :选取索引值是奇数的元素 例如:$("p:odd")
(5) :eq(index) :选取索引值等于index的元素 例如:$("h:eq(3)")
(6) :gt(index) :选取索引值大于index的元素 例如:$("h:gt(2)")
(7) :lt(index) :选取索引值小于index的元素 例如:$("h:lt(3)")
(8) :not(selector) :选取匹配selector以外的元素 例如:$("p:not(.top)")
(9) :header :选取所有标题元素 例如:$(":header")
(10):animated :选取所有正在执行动画的元素 例如:$(":animated")
2、内容过滤选择器
(1) :contains(text) :选取含有文本内容为text的元素 例如:$("div:contains('aaa')")
(2) :has(selector) :选取含有后代元素为selector的元素 例如:$("div:has(h)")
(3) :parent :选取含有后代元素或文本的非空元素 例如:$("div:parent")
(4) :empty :选取不包含后代元素和文本的空元素 例如: $("div:empty")
3、子元素过滤选择器
(1) :first-child :选取第一个子元素 例如:$("div:first-child")
(2) :last-child :选取最后一个子元素 例如: $("div:last-child")
(3) :only-child :选取唯一的子元素 例如:$("div:only-child")
(4) :nth-child(odd) :选取索引值是奇数的子元素 例如:$("p:nth-child(odd)")
(5) :nth-child(even) :选取索引值是偶数的子元素 例如:$("p:nth-child(even)")
(6) :nth-child(index) :选取索引值等于index的子元素 例如:$("p:nth-child(4)")
(7) :nth-child(equation) :选取索引值符合equation的子元素 例如:$("p:nth-child(n+1)")
4、可见性过滤选择器
(1) :hidden :选取不可见元素 例如:$("div:hidden")
(2) :visible :选取可见元素 例如:$("div:visible")
5、属性过滤选择器
(1) :【attr】: 取使用attr属性的元素 例如:$("div[class]")
(2) :【attr=value】 :选取attr属性值为value的元素 例如:$("div[class=bottom]")
(3) :【att!=value】 :选取attr属性值不为value的元素 例如:$("div[class!=bottom]")
(4) :【attr~=value】 :选取attr属性值用空格分隔的值中有一个为value的元素 例如:$("div[class~=bottom]")
(5) :【attr^=value】 :选取attr属性值以value开始的元素 例如:$("div[class^=bottom]")
(6) :【attr$=value】 :选取attr属性值以value结束的元素 例如:$("div[class$=bottom]")
(7) :【attr*=value】 :选取attr属性值含有value的元素 例如:$("div[class*=bottom]")
层次选择器
(1):selector1 selector2 :从selector1的后代元素里选取selector2 例如:$("show h")
(2):selector1>selector2 :从selector1的子元素里选取selector2 例如:$("show>h")
(3):selector1+selector2 :从selector1后面的第一个兄弟元素里选取selector2 例如:$("div+h")
(4):selector1~selector2 :从selector1后面的所有兄弟元素里选取selector2 例如:$("div~h")
表单选择器
一、表单选择器
(1) :input :选取<input><textarea><select><button>元素
(2) :text :选取符合【type=text】的<input>元素
(3) :password :选取符合【type=password】的<input>元素
(4) :radio :选取符合【type=radio】的<input>元素
(5) :checkbox :选取符合【type=checkbox】的<input>元素