选择器是JQuery的根基,在JQuery中对事件处理、选择遍历Dom、ajax操作都依赖选择器。JQuery选择器分为基本选择器、层次选择器、过滤选择器、表单选择器。
一、基本选择器
ID选择器$("#ID")
页面中每个ID是唯一的,ID选择器选择每个ID元素,如下方法如下:$("#ID");例:$("#tbxName")这个方法选择id=tbxName的页面元素。选择结果为单个元素。
2、类选择器$(".class")
据给定的类匹配查找元素,类选择器选择页面中样式类定义为要查找类的元素,方法如下:$(".class");例:$(".mini")这个方法选择类定义为mini的页面元素集合。
选择结果为元素集合。
3、元素选择器$("element")
根据元素类型选择对应的元素集合。元素选择器选择页面中给定元素名匹配的所有元素,方法如下:$("div");例:$("div")这个方法选择页面中所有div元素的集合。
选择结果为元素集合。
4、多个元素选择器$("selector1,selector2,...,selectorN")
将每一个选择器匹配到的元素合并后一起返回。可以指定任意多个选择器,并将匹配到的元素合并到一个结果内,方法如下:$("selector1,selector2,...,selectorN");
例:$("div,#two,.one")这个方法查找页面中所有div元素,id=two的页面元素和class=one的元素,并将结果以集合的形式返回。选择结果为元素集合。
5、所有元素选择$("*)
元素集合。
二、层次选择器
1、后代元素选择器$("ancestor descandent ")
子节点,孙节点、重孙节点等】,方法如下:$("ancestor descandent ");
例:$("body div")这个方法查找body的所有的div元素,返回结果是元素集合。
2、子元素选择器$("parent > child")
在给定的交节点中查找子节点元素,只查找匹配的子节点元素【只能是子节点】,方法如下:$("parent > child");例:$("body > div")这个方法查找body中的子div元素,
返回结果是元素集合。
3、紧邻下个元素选择器$("prev + next")
在给定的节点后的兄弟元素中查找指定的元素,查找指定节点的兄弟元素中与节点紧邻且匹配的一个元素,方法如下:$("prev + next");例:$(".one + div")这个方法查找
类为one的元素后的兄弟元素中紧邻的div元素,返回结果是元素集合。
PS:可以使用next()方法替代该方法,替代形式如下:$("prev").next("next");改写上面的例子为$(".one").next("div");返回结果为元素集合。
4、紧邻兄弟元素选择器$("prev ~ sibling")
指定节点后的所有兄弟元素,查找指定的节点后的兄弟元素中所有匹配的兄弟元素,方法如下:$("prev ~ sibling");例:$("#two ~div")这个方法查找id=two元素的所有兄
弟节点中的div元素,返回结果是元素集合。
PS:可以使用NextAll()方法替代该方法,替代形式如下:$("prev").ntextAll("next");改写上面的例子为$("#two").nextAll("div");返回结果为元素集合。使用siblings()方法
可以查找元素的同辈元素,方法如下:$("prev").siblings("siblings");例:$("#two").siblings("div")这个方法查找id=two元素的所有同辈div元素,返回结果是元素集合。
三、过滤选择器
子元素过滤和表单对象属性过滤选择器。
1.)基本过滤
1、取第一个元素$("selector:first")
单个元素。
2、取最后一个元素$("selector:last")
单个元素。
3、not选择器$("selector:not(selector2)")
not选择器去除所有和selector2匹配的元素,最终结果是取所有不和selector2匹配的元素集合,方法如下:$("selector:not(selector2)");例:$("div:not(.mini)")
这个方法结果是取div中所有样式类不是mini的元素,返回结果是元素集合。
4、取偶数元素$("selector:even")
取索引是偶数的所有元素,索引丛0开始计数,返回结果是所有偶数索引的元素,方法如下:$("selector:even");例:$("input:even")这个方法结果是取input中偶数的
所有input元素,返回结果是元素集合。
5、取奇数元素$("selector:odd")
元素集合。
6、取索引值所在位置的元素$("selector:eq(index)")
单个元素。
7、选择索引值大于索引的元素$("selector:gt(index)")
元素集合。
8、选择索引值小于索引的元素$("selector:lt(index)")
元素集合。
9、标题元素选择器$(":header")
元素集合。
10、正在执行动画选择器$("selector:animated")
元素集合。
2.)内容过滤
1、含有内容选择器$("selector:contains(text)")
元素集合。
2、空元素选择器$("selector:empty")
元素集合。
3、含有选择器匹配元素选择器$("selector:has(selector2)")
元素集合。
4、选择拥有子元素或者文本的选择器$("selector:parent")
元素集合。
3.)可见性过滤
可见性过滤根据元素的可见或者不可见性来选择对应的元素。
1、可见性选择$("selector:visible")
元素集合。
2、不可见性选择$("selector:hidden")
元素集合。
PS:此处hidden不仅仅包括样式dispaly:none,也包括文本隐藏域<input type=hidden />和visible=false这样的元素。
4.)属性过滤
属性过滤选择器是通过元素的属性来选取相应的元素。
1、属性名选择器$("[attribute]")
元素集合。
2、属性值选择器$("[attribute=value]")
元素集合。
3、属性值不为待查值选择器$("[attribute!=value")
元素集合。
4、属性值以待查值开始选择器$("[attribute^=value]")
元素集合。
5、属性值以待查值结束选择器$("[attribute$=value]")
元素集合。
6、属性值含有待查值选择器$("[attribute*=value]")
元素集合。
7、多属性选择器$("selector[attribute][attribute=value],...,[attribute^=value])
元素集合。
5.)子元素过滤
子元素过滤选择器用于选择父元素中的符合查找条件的子元素。
1、第一个子元素选择器$("selector:first-child")
元素集合。
PS:基本内容选择器first选取是的第一个元素,返回结果是单个元素,first-child返回的是每个父元素中第一个子元素,返回结果是元素集合。
2、最后一个元素选择器$("selector:last-child")
元素集合。
PS:基本内容选择器last选取是的最后一个元素,返回结果是单个元素,last-child返回的是每个父元素中最后一个子元素,返回结果是元素集合。
3、index根据位置选择元素选择器$("selector:nth-child(index)")
index从1开始计数,方法如下:$("selector:nth-child(index)");例:$("ul li:nth-child(even)"此方法选择ul中li为偶数的元素,例:$("ul li:nth-child(3n+1)")此方法选择ul元素中被3整除余数为1的元素。返回结果是元素集合。
4、只有一个子元素的元素选择器$("selector:only-child")
元素集合。
6.)表单对象属性过滤
1、可用元素选择器$(":enabled")
元素集合。
2、不可用元素选择器$(":disabled")
元素集合。
3、被选中的元素选择器$(":checked")
元素集合。
4、补选择的选项选择器$(":selected")
元素集合。
四、表单选择器
1、input选择器$(":input")
元素集合。
2、text选择器$(":text")
元素集合。
3、password选择器$(":password")
元素集合。
4、radio选择器$(":radio")
元素集合。
5、checkbox选择器$(":checkbox")
元素集合。
6、submit选择器$(":submit")
元素集合。
7、image选择器$(":image")
元素集合。
8、reset选择器$(":reset")
元素集合。
9、button选择器$(":button")
元素集合。
10、file选择器$(":file")
元素集合。
11、hidden选择器$(":hidden")
元素集合。
选择器中注意事项:
1、选择器中含有特殊字符[.,#,*,(,],]时候需要使用车转义符转义如id="id#2"。选择时候操作如下:$("#id\\#2");
2、选择器中含有空格会对结果产生不同影响。