选择器是JQuery的根基,在JQuery中对事件处理、选择遍历Dom、ajax操作都依赖选择器。JQuery选择器分为基本选择器、层次选择器、过滤选择器、表单选择器。
一、基本选择器
1、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 ~ slibing")
指定节点后的所有兄弟元素,查找指定的节点后的兄弟元素中所有匹配的兄弟元素,方法如下:$("prev ~
slibing");例:$("#two ~div")这个方法查找id=two元素的所有兄
弟节点中的div元素,返回结果是元素集合。
PS:可以使用NextAll()方法替代该方法,替代形式如下:$("prev").ntextAll("next");改写上面的例子为$("#two").nextAll("div");返回结果为元素集合。使用siblings()方法
可以查找元素的同辈元素,方法如下:$("prev").siblings("siblings");例:$("#two").siblings("div")这个方法查找id=two元素的所有同辈div元素,返回结果是元素集合。
三、过滤选择器
过滤选择器根据特定的选择规则选择Dom元素,根据选择不同的过滤规则可以分为基本过滤、内容过滤、可见性过滤、属性过滤、子元素过滤和表单对象属性过滤选择器。
1.)基本过滤
1、取第一个元素$("selector:first")
选择指定元素中的第一个元素,方法如下:$("selector:first");例:$("div:first")这个方法查找所有div中的第一个元素是单一元素,返回结果是单个元素。
2、取最后一个元素$("selector:last")
选择指定元素中的最后一个元素,方法如下:$("selector:last");例:$("div:last")这个方法查找所有div中的最后一个单一元素,返回结果是单个元素。
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")
取索引是奇数的所有元素,索引丛0开始计数,返回结果是所有奇数索引的元素,方法如下:$("selector:odd");例:$("input:odd")这个方法结果是取input中奇数的所有input元素,返回结果是元素集合。
6、取索引值所在位置的元素$("selector:eq(index)")
取索引值所在位置排序的元素用于获得选择器中某个位置的元素,索引值index丛0开始计数,返回索引等于index的元素,方法如下:$("selector:eq(index)");例:$("div:eq(1)")这个方法返回结果是div中结果是索引值为1的元素,返回结果是单个元素。
7、选择索引值大于索引的元素$("selector:gt(index)")
选择索引值大于index的元素,index丛0开始计数,返回索引大于index的元素集合,方法如下:$("selector:gt(index)");例:$("div:gt(2)")这个方法返回索引值大于2的元素的集合,返回结果是元素集合。
8、选择索引值小于索引的元素$("selector:lt(index)")
选择索引值小于index的元素,index丛0开始计数,返回索引小于index的元素集合,方法如下:$("selector:lt(index)");例:$("div:lt(2)")这个方法返回索引值小于2的元素的集合,返回结果是元素集合。
9、标题元素选择器$(":header")
标题元素选择器选择所有标题元素,方法如下:$(":header");例:$(":header")这个方法选择页面中所有的标题元素,返回结果是元素集合。
10、正在执行动画选择器$("selector:animated")
选取当前正在执行动画的元素,方法如下:$("selectro:animated");例:$("div:animated")这个方法选择div中正在执行动画的元素,返回结果是元素集合。
2.)内容过滤
1、含有内容选择器$("selector:contains(text)")
选取selector中含有文本内容为text的元素.方法如下:$("selector:contains(text)");例:$("div:contains(di)")这个方法选取包含内容为di的div元素,返回结果是元素集合。
2、空元素选择器$("selector:empty")
选取selector中不包含子元素或者内容为空的元素,方法如下:$("selector:empty");例:$("div:empty")这个方法选取内容为空或者不任何子元素的div元素,返回结果是元素集合。
3、含有选择器匹配元素选择器$("selector:has(selector2)")
选取selector中包含有selector2的元素,方法如下:$("selector:has(selector2)");例:$("div:has(p)")这个方法选取内容中包含元素<p>节点的元素,返回结果是元素集合。
4、选择拥有子元素或者文本的选择器$("selector:parent")
选取selector中含有子元素或者文本的元素,方法如下:$("selector:parent");例:$("div:parent")这个方法选取拥有子元素的div元素,返回结果是元素集合。
3.)可见性过滤
可见性过滤根据元素的可见或者不可见性来选择对应的元素。
1、可见性选择$("selector:visible")
可见性选择是选择selector中可见的元素,方法如下:$("selector:visible");例:$("div:visible")这个方法选取可见的div元素的集合,返回结果是元素集合。
2、不可见性选择$("selector:hidden")
不可见性选择是选择selector中不可见的元素,方法如下:$("selector:hidden");例:$("div:hidden")这个方法选取不可见的div元素的集合,返回结果是元素集合。
PS:此处hidden不仅仅包括样式dispaly:none,也包括文本隐藏域<input
type=hidden />和visible=false这样的元素。
4.)属性过滤
属性过滤选择器是通过元素的属性来选取相应的元素。
1、属性名选择器$("[attribute]")
属性名选择器选择属性中包含有某个属性名称的元素,方法如下:$("selector[attribute]");例:$("div[id]")这个方法选择有属性id的div元素,返回结果是元素集合。
2、属性值选择器$("[attribute=value]")
属性值选择器选择属性中包含属性名和值的元素,方法如下:$("selector[attribute=value]");例:$("div[title=test]")这个方法选择属性名为title且属性对应的属性值为test的div元素,返回结果是元素集合。
3、属性值不为待查值选择器$("[attribute!=value")
属性值不为待查值的属性,方法如下:$("selector[attribute!=value]");例:$("div[title!=test]")这个方法选择属性名为title且属性对应的属性值不为test的div元素,返回结果是元素集合。
4、属性值以待查值开始选择器$("[attribute^=value]")
属性值以待查值开始选择器用于选取属性值以待查值开头的元素,方法如下:$("selector[attribut^=value]");例:$("div[id^=te]")这个方法选择属性名称为id且属性值以te开头的元素,返回结果是元素集合。
5、属性值以待查值结束选择器$("[attribute$=value]")
属性值以待查值结束选择器用于选取属性值以待查值结尾的元素,方法如下:$("selector[attribut$=value]");例:$("div[id$=st]")这个方法选择属性名称为id且属性值以st结尾的元素,返回结果是元素集合。
6、属性值含有待查值选择器$("[attribute*=value]")
属性值含有待查值选择器用于选取属性值含有待查值的元素,方法如下:$("selector[attribut*=value]");例:$("div[id*=st]")这个方法选择属性名称为id且属性值含有st的元素,返回结果是元素集合。
7、多属性选择器$("selector[attribute][attribute=value],...,[attribute^=value])
多属性选择器根据多个属性选择元素,每次根据属性缩小选择选择范围,最后选取符合全部属性的元素集合,方法如下:$("selector[attribute][attribut1=value1]");例:$("div[id][title*=es]")这个方法选择属性名中含有id且属性title值中含有es的div元素集合,返回结果是元素集合。
5.)子元素过滤
子元素过滤选择器用于选择父元素中的符合查找条件的子元素。
1、第一个子元素选择器$("selector:first-child")
第一个子元素选择器用于选择父元素中第一个子元素,方法如下:$("selector:first-child");例:$("ul
li:first-child")这个方法返回ul元素集中第一个li子元素,返回结果是元素集合。
PS:基本内容选择器first选取是的第一个元素,返回结果是单个元素,first-child返回的是每个父元素中第一个子元素,返回结果是元素集合。
2、最后一个元素选择器$("selector:last-child")
最后一个子元素选择器用于选择父元素中最后一个子元素,方法如下:$("selector:last-child");例:$("ul
li:last-child")这个方法返回ul元素集中最后一个li子元素,返回结果是元素集合。
PS:基本内容选择器last选取是的最后一个元素,返回结果是单个元素,last-child返回的是每个父元素中最后一个子元素,返回结果是元素集合。
3、index根据位置选择元素选择器$("selector:nth-child(index)")
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")
只有一个子元素的元素选择器,选取元素中只有一个子元素的元素,即如果元素有一个子元素那么该元素就会被选取,方法如下:$("selector:only-child");例:$("div:only-child")此方法选取div中只有一个子元素的div,返回结果是元素集合。
6.)表单对象属性过滤
1、可用元素选择器$(":enabled")
匹配所有可用元素,方法如下:$(":enabled");例:$("#from1
:enabled")选取id=form1的表单中可用的所有元素,返回结果是元素集合。
2、不可用元素选择器$(":disabled")
匹配所有不可用元素,方法如下:$(":disabled");例:$("#from1
:disabled")选取id=form1的表单中所有不可用的元素,返回结果是元素集合。
3、被选中的元素选择器$(":checked")
选取所有被选中【checked】的元素,方法如下:$(":checked");例:$("#from1:checked")选取id=from1的表单中所有被【check】选中的元素,返回结果是元素集合。
4、补选择的选项选择器$(":selected")
撷取所有被选中【selected】的选项元素,方法如下:$(":selected");例:$("#from1:selected")这个方法选取id=form1的表单中所有被【selected】选中的元素,返回结果是元素集合。
四、表单选择器
1、input选择器$(":input")
选取所有的input元素,方法如下:$(":input");例:$("#from2
:input")这个方法选取id=from2中的所有input元素,返回结果是元素集合。
2、text选择器$(":text")
选取所有单行文本框,方法如下:$(":text");例:$("#from2
:text")这个方法选取id=form2中的所有单行文本框,返回结果是元素集合。
3、password选择器$(":password")
选取所有密码框,方法如下:$(":password");例:$("#from2
:password")这个方法选取id=form2中的所有密码框,返回结果是元素集合。
4、radio选择器$(":radio")
选取所有单选框,方法如下:$(":radio");例:$("#from2
:radio")这个方法选取id=form2中的所有单选框,返回结果是元素集合。
5、checkbox选择器$(":checkbox")
选取所有的多选框,方法如下:$(":checkbox");例:$("#from2
:radio")这个方法选取id=form2中的所有复选框,返回结果是元素集合。
6、submit选择器$(":submit")
选取所有的提交按钮,方法如下:$(":submit");例:$("#from2
:submit")这个方法选取id=form2中的所有提交按钮,返回结果是元素集合。
7、image选择器$(":image")
选取所有的图像按钮,方法如下:$(":image");例:$("#from2
:image")这个方法选取id=form2中的所有图像按钮,返回结果是元素集合。
8、reset选择器$(":reset")
选取所有的重置按钮,方法如下:$(":reset");例:$("#from2
:reset")这个方法选取id=form2中的所有重置按钮,返回结果是元素集合。
9、button选择器$(":button")
选取所有的按钮,方法如下:$(":button");例:$("#from2
:button")这个方法选取id=form2中的所有按钮,返回结果是元素集合。
10、file选择器$(":file")
选取所有的上传域,方法如下:$(":file");例:$("#from2
:file")这个方法选取id=form2中的所有上传域,返回结果是元素集合。
11、hidden选择器$(":hidden")
选取所有的不可见元素,方法如下:$(":hidden");例:$("#from2
:hidden")这个方法选取id=form2中的所有不可见元素,返回结果是元素集合。
选择器中注意事项:
1、选择器中含有特殊字符[.,#,*,(,],]时候需要使用车转义符转义如id="id#2"。选择时候操作如下:$("#id\\#2");
2、选择器中含有空格会对结果产生不同影响。