Jquery之选择器和过滤器

基本选择器

基本选择器	功能	返回值	示例
$("#id")	根据给定的id匹配一个元素	单个元素	$(“xdl”):选取id值为xdl的元素
$(".class")	根据给定的类匹配元素	元素集合	$(".xdl"):选择所有class值为xdl的元素
$(“element”)	根据给定的元素名匹配元素	元素集合	$(“p”):选择所有< p >元素
$("*")	匹配所有元素	元素集合	$("*"):选择所有元素
$(“selector1,selector2,selector3,…”)	将每个选择器匹配到的元素合并后一起返回	元素集合	$(“p,.xdl”):选择所有的p元素和类名为xdl的元素

---

层次选择器

层级选择器	功能	返回值	示例
$(“ancestor descendant”)	根据祖先ancestor元素匹配所有的后代descendant元素	元素集合	$(“ul li”):选择ul元素中的所有li元素
$(“parent > child”)	选取parent元素下所有的child元素。注意：孙子及孙子一下的所有元素都不会命中	元素集合	$(“ul > li”):选择所有ul元素的子元素 li
$(“prev+next”)	选择prev元素后面紧跟的next兄弟元素	元素集合	$(“h1+p”):选择h1元素后面紧跟的兄弟元素 p
$(“prev~siblings”)	匹配prev元素后面所有的siblings兄弟元素	元素集合	$(“h1~p”):选择h1元素后面所有的兄弟元素p

---

过滤选择器

基本过滤选择器

基本过滤选择器	功能	返回值	示例
:first	选取第一个元素	单个元素	$(".xdl:first"):选取所有class值为"xdl"中的第一个元素
:last	选取最后一个元素	单个元素	$(".xdl:last"):选取所有class值为"xdl"中的最后一个元素
:not(selector)	去除所有与给定选择器匹配的元素	元素集合	$(“li:not(.xdl)”):选取所有li元素，其中不包括有class为xdl的li元素
:even	选取索引为偶数的所有元素	元素集合	$(".xdl:even"):选取索引是偶数的所有class值为xdl的元素
:odd	选取索引为奇数的所有元素	元素集合	$(".xdl:even"):选取索引是奇数的所有class值为xdl的元素
:eq(index)	选取索引值等于index的元素	单个元素	$(“li:eq(1)”):在所有li元素中，选取索引值为1的元素
:gt(index)	选取索引值大于index的元素	元素集合	$(“li:gt(1)”):在所有li元素中，选取索引值大于1的元素
:lt(index)	选取索引值小于index的元素	元素集合	$(“li:lt(1)”):在所有li元素中，选取索引值小于1的元素
:header	选取所有标题元素	元素集合	$(":header"):选取整个网页中所有h1，h2等标题元素
:animated	选取当前正在执行动画的所有元素	元素集合	$(“div:animated”)
:lang	选取指定语言下的所有元素	元素集合	$(“div:lang(en)”):选取所有< div lang = “en” >或< div lang = “en-us” >的元素
:focus	选取当前获取焦点的元素	单个元素	$(“input:focus”):选取当前获取焦点的input元素
:root	选取该文档的根元素	单个元素	$(":root"):永远都是选取< html >元素

内容过滤选择器

内容过滤选择器	功能	返回值	示例
:contains(text)	选取含有文本内容为"text"的元素	元素集合	$(“div:contains(‘删除’)”)：选取含有文本"删除"的div元素
:empty	选取不包含子元素或文本元素的空元素	元素集合	$(“div:empty”):选取不包含子元素或文本元素的div元素
:has(selector)	获取含有选择器所匹配的元素的元素	元素集合	$(“div:has(li)”):选取包含li元素的div元素
:parent	获取含有子元素或文本元素的非空元素	元素集合	$(“div:parent”):选取含有子元素或文本元素的div元素

可见性过滤选择器

可见性过滤选择器	功能	返回值	示例
:hidden	获取所有的不可见元素，包括css的display:none,visibility:hidden;以及input元素属性为type=hidden	元素集合	$(“input:hidden”):选取所有不可见的input元素
:visible	获取所有可见元素	元素集合	$(“input:visible”):选取所有可见的input元素

属性过滤选择器

属性过滤选择器	功能	返回值	示例
[attribute]	选取包含此属性的元素	元素集合	$(“div[id]”):选取包含id属性的div元素
[attribute=value]	选取属性值为value的元素	元素集合	$(“div[class=‘xdl’]”):选取所有class值为xdl的div元素
[attribute!=value]	选取属性值不等于value的元素	元素集合	$(“div[class!=‘xdl’]”):选取所有class值不为xdl的div元素
[attribute^=value]	选取属性的值以value开头的元素	元素集合	$(“div[class^=‘xdl’]”):选取所有class的值以xdl开头的div元素
[attribute$=value]	选取属性的值以value结尾的元素	元素集合	$("div[class$=‘xdl’]"):选取所有class的值以xdl结尾的div元素
[attribute*=value]	选取属性的值包含value的元素	元素集合	$(“div[class*=‘xdl’]”):选取所有class的值包含xdl的div元素
[selector1],[selector2],…	获取同时满足多个属性的元素	元素集合	$(“div[class=‘xdl’][page]”):获取所有class的值为xdl并且有page属性的div元素

子元素过滤选择器

子元素过滤选择器	功能	返回值	示例
:first-child	获取每个父元素的第一个元素	元素集合	$(“ul li:first-child”):获取每个ul中第一个li元素
:last-child	获取每个父元素的最后一个元素	元素集合	$(“ul li:last-child”):获取每个ul中最后一个li元素
:first-of-type	获取每个元素的所有同级同名元素的第一个兄弟元素	元素集合	$(“li:first-of-type”):获取每个li元素中的所有同级的li元素的第一个兄弟元素
:last-of-type	获取每个元素的所有同级同名元素的最后一个兄弟元素	元素集合	$(“li:last-of-type”):获取每个li元素中的所有同级的li元素的最后一个兄弟元素
:nth-child(index/even/odd/formula)	1、获取每个父元素下的第index个子元素(index从1开始) 2、获取每个父元素下的奇偶元素 3、获取每个父元素下与"带n参数的表达式"相关的元素	元素集合	1、$("ulli:nth-child(3)"):获取每个ul下的第三个li元素2、$(“ul li:nth-child(even)”):获取每个ul下的所有第偶个li元素 3、$(“ul li:nth-child(3n)”):获取每个ul下的第3n个li元素
:nth-last-child(index/even/odd/formula)	同:nth-child(),不同点是:nth-last-child计数顺序为从最后一个元素开始到第一个元素	元素集合	同理
:nth-of-type(index/even/odd/formula)	同nth-child()，不同点是其获取每个元素的所有同级同名的第index个元素、奇偶元素或formula相关元素	元素集合	$ (“li:nth-of-type(3)”):获取每个li下所有同级同名的元素中的第三个元素
:nth-last-of-type(index/even/odd/formula)	同:nth-of-type(),不同点是:nth-last-of-type计数顺序为从最后一个元素开始到第一个元素	元素集合	同理
:only-child	获取所有父元素中只有唯一一个子元素的元素集合	元素集合	$(“ul li:only-child”):获取每个ul下只有唯一一个li元素的元素集合
:only-of-type	获取在同一级下只有唯一一个同名元素的元素集合	元素集合	$(“li:only-of-type”):获取所有在同一级下只拥有唯一一个li元素的元素集合

表单对象属性过滤选择器

表单对象属性过滤选择器	功能	返回值	示例
:enabled	获取所有可用元素	元素集合	$("#form:enabled"):选取id值为form的表单中所有可用的元素
:disabled	获取所有不可用元素	元素集合	$("#form:disabled"):选取id值为form的表单中所有不可用的元素
:checked	获取所有被选中的元素(包括单选框、复选框)	元素集合	$(“input:checked”):选取所有被选中的input元素
:selected	获取所有被选中的选项元素	元素集合	$(“select:selected”):选取所有被选中的select元素

---

表单选择器

表单选择器	功能	返回值	示例
:input	选取所有input、textarea、select、button元素	元素集合	$("#form:input"):选取id值为form元素下有input、textarea、select、button元素
:text	选取所有的单行文本框	元素集合	$(":text"):选取所有的单行文本框
:password	选取所有的密码框	元素集合	$(":password"):选取所有的密码框
:radio	选取所有的单选框	元素集合	$(":radio"):选取所有的单选框
:checkbox	选取所有的复选框	元素集合	$(":checkbox"):选取所有的复选框
:submit	选取所有的提交按钮	元素集合	$(":submit"):选取所有的提交按钮
:image	选取所有的图片按钮	元素集合	$(":image"):选取所有的图片按钮
:reset	选取所有的重置按钮	元素集合	$(":reset"):选取所有的重置按钮
:button	选取所有的按钮	元素集合	$(":button"):选取所有的按钮
:file	选取所有的上传域	元素集合	$(":file"):选取所有的上传域
:hidden	选取所有的不可见元素	元素集合	$(":hidden"):选取所有的不可见元素