JQ常见面试题之选择器详解

面试题：css选择器和jq选择器的相同点和不同点，你怎么使用的？

其实我觉得面试题是小事，主要是我们要掌握这些知识。其实jq提供了很多选择器，除了CSS的本身提供的选择器外新增了不少，具体看下面的内容。

CSS选择器有11种：通用选择器、标签选择器（元素选择器）、类选择器（class选择器）、ID选择器、群组选择器、后代选择器、子代选、兄弟选择器（临近选择器）、属性选择器、伪类选择器、伪元素选择器。

具体讲解请参考本人云盘公共链接：css选择器及简书你所不知道的css高效编写方法。

css本身的选择器就不啰嗦了，下面说说JQ选择器的种类，以及使用时注意事项。

1.基本选择器

ID选择器、类选择器（class）、通用、标签、群组选择器等。

2.层次选择器

后代选择器：$('parent  children') ，可使用$('parent').children()替代。

子代选择器：$('parent >child')

临近选择器：$('pre+next')，可用$('pre').next()替代。

兄弟选择器：$('pre~nextAll'),，可使用$('pre').nextAll()替代。

除此之外，JQ中pre()查找上一个兄弟，siblings()查找所有兄弟。

3.过滤选择器

a.基本过滤选择器

注意：将所有选中元素放在一个集合中，并且从“0”编号，不管其是否在一个相同的父元素下。

基本过滤选择器

b.内容过滤选择器

内容过滤选择器

c.属性过滤选择器

属性过滤选择器

d.可见性过滤选择器

注意:hidden，包含display:none/hidden、visibility:hidden、input中type=hidden。

可见性过滤选择器

e.子元素过滤选择器

VS 基本过滤选择器

基本过滤选择器: eq(index)只匹配一个元素，index从0开始，不按父元素分组。

子元素过滤选择器:nth-child 将为每个符合条件的父元素匹配子元素，index是从1开始。

子元素过滤选择器

f.表单对象属性过滤选择器

表单属性过滤选择器

�声明：图片为《锋利的jq》内容，仅供参考。