原文链接:https://www.3mooc.com/front/articleinfo/157
基本选择器
选择器描述返回类型示例
#id根据给定的id匹配一个元素单个元素$("#test")选取id为test的元素
.class根据给定的类名匹配元素集合元素$(".test")选取所有class为test的元素
element根据给定的元素名匹配元素集合元素$(“p”)选取所有的
元素
匹配所有元素集合元素$("")选取所有的元素
selector1, selector2, …, selectorN将每一个选择器匹配到的元素合并后一起返回集合元素$(“dic,span,p.myClass”)选取所有
标签的一组元素
层次选择器
选择器描述返回类型示例
( " a n c e s t o r d e s c e n d a n t " ) 选 取 a n c e s t o r 元 素 中 的 所 有 d e s c e n d a n t ( 次 级 ) 元 素 集 合 元 素 ("ancestor descendant")选取ancestor元素中的所有descendant(次级)元素集合元素 ("ancestordescendant")选取ancestor元素中的所有descendant(次级)元素集合元素(“div span”)选取
( " p a r e n t > c h i l d " ) 选 取 p a r e n t 元 素 下 的 c h i l d ( 二 级 ) 元 素 , 与 ("parent>child")选取parent元素下的child(二级)元素,与 ("parent>child")选取parent元素下的child(二级)元素,与(“ancestor descendant”)有区别,后者选择的是所有次级元素集合元素$(“div span”)选取
( " p r e v + n e x t " ) 选 取 紧 接 在 p r e v 元 素 后 的 n e x t 元 素 集 合 元 素 ("prev+next")选取紧接在prev元素后的next元素集合元素 ("prev+next")选取紧接在prev元素后的next元素集合元素(".one + div")选取class为one的下一个
( " p r e v s i b l i n g s " ) 选 取 p r e v 元 素 之 后 的 所 有 s i b l i n g s 元 素 集 合 元 素 ("prev~siblings")选取prev元素之后的所有siblings元素集合元素 ("prev siblings")选取prev元素之后的所有siblings元素集合元素("#two~div")选取id为two的元素后面的所有
基本过滤选择器
选择器描述返回类型示例
:first选取第一个元素单个元素$(“div:first”)选取所有
:last选取最后一个元素单个元素$(“div:last”)选取所有
:not(selector)排除所有与给定选择器匹配的元素集合元素$(“input:not(.myClass)”)选取class不是myClass的元素
:even选取索引是偶数的所有元素,索引从0开始集合元素$(“input:even”)选取索引是偶数的元素
:odd选取索引是奇数的所有元素,索引从0开始集合元素$(“input:odd”)选取索引是奇数数的元素
:eq(index)选取索引等于index的元素(index从0开始)单个元素$(“input:eq(1)”)选取索引等于1的<input元素>
:gt(index)选取索引大于index的元素(index从0开始)集合元素$(“input:gt(1)”)选取索引大于1的元素(注:大于1,而不包括1)
:lt(index)选取索引小于index的元素(index从0开始)集合元素$(“input:lt(1)”)选取索引小于1的元素(注:小于1,而不包括1)
:header选取所有的标题元素,例如h1,h2,h3等等集合元素$(":header")选取网页中所有的
,
,
…
:animated选取当前正在执行动画的所有元素集合元素$(“div:animated”)选取正在执行动画的
内容过滤选择器
选择器描述返回类型示例
:contains(text)选取含有文本内容为"text"的元素集合元素$(“div:contains(‘你好’)”)选取含有文本"你好"的
:empty选取不包含子元素或者文本的空元素集合元素$(“div:empty”)选取不包含子元素(包括文本元素)的
:has(selector)选取含有选择器所匹配的元素的元素集合元素$(“div:has§”)选取含有
元素的
:parent选取含有子元素或者文本的元素集合元素$(“div:parent”)选取拥有二级元素(包括文本元素)的
可见性 过滤选择器
选择器描述返回类型示例
:hidden选取所有不可见的元素集合元素 ( " : h i d d e n " ) 选 取 所 有 不 可 见 的 元 素 . 包 括 < i n p u t t y p e = " h i d d e n " / > , < d i v s t y l e = " d i s p l a y : n o n e ; " / > 和 < d i v s t y l e = " v i s i b i l i t y : h i d d e n ; " / > 等 元 素 . 如 果 只 想 选 取 < i n p u t > 元 素 , 可 以 使 用 (":hidden")选取所有不可见的元素.包括<input type="hidden" />, <div style="display:none;" />和<div style="visibility:hidden;" />等元素.如果只想选取<input>元素,可以使用 (":hidden")选取所有不可见的元素.包括<inputtype="hidden"/>,<divstyle="display:none;"/>和<divstyle="visibility:hidden;"/>等元素.如果只想选取<input>元素,可以使用(“input:hidden”)
:visible选取所有可见的元素集合元素$(“div:visible”)选取所有可见的
属性过滤选择器
选择器描述返回类型示例
[attribute]选取拥有此属性的元素集合元素$(“div[id]”)选取拥有属性id的元素
[attribute=value]选取属性的值为value的元素集合元素$(“div[title=test]”)选取属性title为"test"的
[attribute!=value]选取属性的值不等于value的元素集合元素$(“div[title!=test]”)选取属性title不等于"test"的
[attribute=value]选取属性的值以value开始的元素集合元素$("div[title=test]")选取属性title以"test"开始的
[attribute = v a l u e ] 选 取 属 性 的 值 以 v a l u e 结 束 的 元 素 集 合 元 素 =value]选取属性的值以value结束的元素集合元素 =value]选取属性的值以value结束的元素集合元素(“div[title$=‘test’]”)选取属性title一"test"结束的
[attribute*=value]选取属性的值包含有value的元素集合元素$(“div[title*=‘test’]”)选取属性title含有"test"的
[selector1][selector2][selectorN]用属性选择器合并成一个复合属性选择器,满足多个添加.每选择依次,缩小一次范围集合元素 ( " d i v [ i d ] [ t i t l e ("div[id][title ("div[id][title=‘test’]")选取拥有属性id,并且属性title以"test"结束的
子元素 过滤选择器
选择器描述返回类型示例
:nth-child(index/even/odd/equation)选取每个上级元素下的第index个子元素或者奇偶元素.(index从1算起)集合元素:eq(index)只匹配一个元素,而:nth-child将为每一个上级元素匹配次级元素,并且:nth-child(index)的index是从1开始的,而:eq(index)是从0算起的
:first-child选取每个上级元素的第一个子元素集合元素:first只返回单个元素,而:first-child选择符将为每个上级元素匹配第一个次级元素.例如$(“ul li:first-child”);选取每个
- 中第一个
- 元素
:last-child选取每个上级元素的最后一个次级元素集合元素同上,:last只返回单个元素,而:last-child选择符将为每个上级元素匹配最后一个次级元素.例如$(“ul li:last-child”);选择每个
- 中最后一个
- 元素
:only-child如果某个元素是它上级元素中唯一的次级元素,那么将会被匹配.如果上级元素中含有其他元素,则不会被匹配集合元素$(“ul li:only-child”)在
- 中选取是唯一次级元素的
- 元素
表单属性状态 过滤选择器
选择器描述返回类型示例
:enable选取所有可用元素集合元素$("#form1 :enable");选取id为"form1"的表单内的所有可用元素
:disable选取所有不可用元素集合元素$("#form2 :disable")选取id为"form2"的表单内的所有不可用元素
:checked选取所有被选中的元素(单选框,复选框)集合元素$(“input:checked”);选取所有被选中的元素
:selected选取所有被选中的选项元素(下拉列表)集合元素$(“select :selected”);选取所有被选中的选项元素
表单对象属性 过滤选择器
选择器描述返回类型示例
:input选取所有的,,和元素集合元素$(":input")选取所有,,和元素
:text选取所有的单行文本框集合元素$(":text")选取所有的单行文本框
:password选取所有的密码框集合元素$(":password")选取所有的密码框
:radio选取所有的单选框集合元素$(":radio")选取所有的单选框
:checkbox获取所有的多选框集合元素$(":checkbox")选取所有的复选框
:submit选取所有的提交按钮集合元素$(":submit")选取所有的提交按钮
:images选取所有的图像按钮集合元素$(":image")选取所有的图像按钮
:reset选取所有的重置按钮集合元素$(":reset")选取所有的重置按钮
:button选取所有的按钮集合元素$(":button")选取所有的按钮
:file选取所有的上传域集合元素$(":file")选取所有的上传域
:hidden选取所有不可见元素集合元素$(":hidden")选取所有不可见元素(见:不可见性过滤选择器)