js选择器
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js选择器相关的知识，希望对你有一定的参考价值。
标题无关紧要，请看内容学习的过程中，发现js选择器很多，自己就综合整理了一下，
1）核心选择器（应用最广泛的选择器）
-
选择所有元素
元素 选择特定类型的元素
.类名 选择具有特定class的元素
元素.类名 选择具有特定class的某类元素
#id名 选择具有特定id属性值的元素2）属性选择器（根据元素的属性来选择元素） [attr] 选取定义了attr属性的元素，即使这个属性没有值 [attr="val"] 选取attr属性值等于字符串val的元素 [attr^="val"] 选取attr属性值以字符串val开头的元素 [attr$="val"] 选取attr属性值以字符串val结尾的元素 [attr*="val"] 选取attr属性值包含字符串val的元素 [attr~="val"] 选取attr属性其中一个值是字符串val的元素 [attr|="val"] 选取attr属性值等于字符串val，或属性值为连字符分隔的值列表且第一个值是字符串val的元素 [selector1][selector2][selectorN] 复合属性选择器，需要同时满足多个条件时使用 属性选择器可以配合其他选择器使用！3）关系选择器
<selector1> <selector2> 在给定的祖先元素下匹配所有的后代元素
<selector1> > <selector2> 在给定的父元素下匹配所有的子元素
<selector1> + <selector2> 匹配所有紧接在 <selector1> 元素后的 <selector2>
<selector1> ~ <selector2> 匹配 所有在<selector1> 元素之后的所有同辈 <selector2> 元素
4）伪元素和伪类选择器
:checked 用于表单，匹配所有被选中元素(复选框、单选框等，不包括select中的option)
:disabled 用于表单，匹配所有不可用元素
:enabled 用于表单，匹配所有可用元素
:focus 主要用于表单，选取得到焦点的元素
:required 用于表单，选取具有required属性的元素
:optional 用于表单，选取缺少required属性的元素
:empty 匹配所有既不包含子元素也不包含文本的空元素
:first-child 选取第一个子元素
:last-child 选取最后一个子元素
:nth-child(n) 选取元素的第n个子元素(从1开始计数)
n可为even或odd
:nth-last-child(n) 选取元素的倒数第n个子元素
:nth-of-type(n) 选择同属于一个父元素之下，并且标签名相同的元素中的第n个(注：从1开始计数)
:nth-last-of-type(n) 选择同属于一个父元素之下，并且标签名相同的元素中的倒数第n个
:only-child 如果某个元素是父元素中唯一的子元素，那将会被匹配
:only-of-type 选择所有没有兄弟元素，且具有相同的元素名称的元素
:root 选取文档的根元素，在html文档中即是<html>元素
等等....
5）联合选择器和反选择器
通过对选择器的合理安排，我们几乎能达成任何目标。我们还可以利用选择器组合实现联合选择和反选择
<selector>,<selector>,<selector>.. 选取匹配第一个选择器的元素和匹配第二个选择器的元素
:not(selector) 选取不匹配指定选择器的元素
6）jQuery扩充的选择器
上面是css中本身就提供的选择器，为了满足更复杂的需求，jQuery还额外的支持一些选择器，这些选择器不但给我们带来方便，还能
实现更细的控制。
:animated 匹配所有正在执行动画效果的元素
:contains(text) 如果元素内或者后代元素内包含指定的文本即被选中
:eq(n) 选择第n个元素（从0开始计数）
:first 选择第一个匹配的元素
:last 选择最后一个匹配的元素
:lt(n) 选择序号小于n的所有元素（从0开始计数）
:gt(n) 选择序号大于n的所有元素（从0开始计数）
:odd 选择所有奇数元素(从0开始计数)
:even 选择所有的偶数元素（从0开始计数）
:has(选择器) 匹配包含 选择器所匹配的元素的元素
:text 用于表单，匹配所有的单行文本框
:button 匹配所有按钮（input标签type为button以及<button>标签）
:checkbox 用于表单，选择所有的复选框（匹配所有复选框）
:file 用于表单，选择所有的文件上传输入框
:input 用于表单，选择所有的input元素（匹配所有 input, textarea, select 和 button 元素）
:password 用于表单，选择所有的密码输入框
:radio 用于表单，选择所有的单选框
:submit 用于表单，选择所有的表单提交按钮
:image 用于表单，匹配所有图像域
:reset 用于表单，选择所有的表单重置按钮
:selected 用于表单，匹配所有选中的option元素
:header 匹配如 h1, h2, h3之类的标题元素
:hidden 选择所有的被隐藏文件
:visible 选择所有的可见元素
:parent 匹配含有子元素或者文本的元素
选择器可以单独使用，也可以配合其他选择器使用！![]
以上是关于js选择器的主要内容，如果未能解决你的问题，请参考以下文章