js 进阶 10 js选择器大全
一、总结
一句话总结：和css选择器很像
二、JQuery选择器
原生javaScript中,只能使用getELementById()、getElementByName、getElementByTagName()等几种有限的方法来获取元素，JQuery为我们提供了大量的选择器，极大地方便了我们快速选择元素来进行各种操作。
JQuery的选择器完全是继承了css选择器的风格，大家在学习JQuery选择器的时候，一定要先联系CSS选择器进行对比记忆。
虽然选择器很多，但是并不要求大家一下子全记住。可以先记住常用的几种，其他的等到需要的时候查阅下资料。因为这些选择器，我们是必须通过真正的开发实践才能够真正的熟练掌握
1. 基本选择器
- id选择器：$("#id名")
- 元素选择器:$("元素名")
- 类选择器:$(".类名")
- 群组选择器:$("选择器1,选择器2,.......,选择器n")
- *选择器:$("*")选择所有元素
2.层级选择器
层次选择器,就是能过元素之间的层次关系来获取元素.常见的层次关系包括:父子、后代、兄弟、相邻。
- $（"M N")后代选择器，选择M元素内部后代N元素
- $（"M＞N")子代选择器,选择M元素内部子代N元素
- $（"M~N")兄弟选择器,选择M元素后所有的同级N元素
- $（"M+N")相邻选择器,选择M元素相邻的下一个元素
3. 属性选择器
HTML元素通常包含很多属性，JQuery的属性选择器就是把各种属性作为选择器。
- $("selector[attr]")选择包含给定属性的元素
- $("selector[attr='value']")选择给定的属性是某个特定值的元素
- $("selector[attr!='value']")选择所有含有指定的属性,但属性不等于特定值的元素
- $("selector[attr*='value']")选择给定的属性是以包含某些值的元素
- $("selector[attr^='value']")选择给定的属性是以某些值开始的元素(比较少用)
4. 伪类选择器
伪类选择器也称作过滤选择器。
JQuery伪类选择器都是以英文冒号“：”开头，和css中的伪类选择器用法相似，使得我们可以快速地选择我们想要获取的元素。
- 简单伪类选择器元素
- ：not(selector)选择除了某个选择器之外的所有元素
- ：first或first()选择某元素的第一个元素（非子元素）
- ：last或last()选择某元素的最后一个元素（非子元素）
- ：odd选择某元素的索引值为奇数的元素
- ：even选择某元素的索引值为偶数的元素
- ：eq(index)选择给定索引值的元素，索引值index是一个整数，从0开始
- ：lt(index)选择所有小于索引值的元素，索引值index是一个整数，从0开始
- ：header选择h1~h6的标题元素：focus选取当前具有焦点的元素
- ：root选择页面的根元素
- ：animated选择所有正在执行动画效果的元素
- 子元素伪类选择器
- ：first-child选择父元素的第1个子元素
- ：last-child选择父元素的最后1个子元素
- ：nth-child(n)选择父元素下的第n个元素或奇偶元素，n的值为"整数|odd|vevn
- ：only-child选择父元素中唯一的子元素（该父元素只有一个子元素）
- ：first-of-type选择同元素类型的第1个同级兄弟元素
- ：last-of-type选择同元素类型的最后1个同级兄弟元素
- ：nth-of-type选择同元素类型的第n个同级兄弟元素，n的值可以是"整数|odd|even"
- ：onlt-of-type匹配父元素中特定类型的唯一子元素（但是父元素可以有多个子元素）
- 可见性伪类选择器
- ：hidden选取所有不可见元素
“：hidden”选择器选择的不仅包括样式为display:none所有元素，而且还包括属性type=”hidden”和样式为visibility:hidden的所有元素。
- ：visible选取所有可见元素
- ：hidden选取所有不可见元素
- 内容伪类选择器
内容伪类选择器，就是根据元素中的文字内容或所包含的子元素特征来选择元素，其文字内容可以模糊或绝对匹配进行元素定位。
- ：contains(text)选择包含给定文本内容的元素
- ：has（selector)选择含有选择器所匹配元素的元素
- ：empty选择所有不包含子元素或者不包含文本的元素
- ：parent选择含有子元素或者文本的元素（跟：empty相反）
- 表单伪类选择器
- : Input选择所有input元素
- ：button选择所有type="button"的input元素
- ：submit选择所有type="submit"的input元素
- ：reset选择所有type="reset"的input元素
- ：text选择所有单选文本框
- ：textarea选择所有多行文本框
- ：password选择所有密码文本框
- ：radio选择所有单选按钮
- ：checkbox选择所有复选框
- ：image选择所有图像域
- ：hidden选择所有隐藏域
- ：file选择所有文件域
- 表单属性伪类选择器
- ：enabled选择所有可用input元素
- ：disabled所有禁用的input元素
- ：selected选择所有被选中的option元素
- ：checked选择所被选中的表单元素，一般用于radio和checkbox
js 进阶 10 js选择器大全