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

作者: 提小莫 | 来源:发表于2017-06-21 18:17 被阅读195次

面试题: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》内容,仅供参考。

相关文章

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

    面试题:css选择器和jq选择器的相同点和不同点,你怎么使用的? 其实我觉得面试题是小事,主要是我们要掌握这些知识...

  • JQ常见面试题之DOM操作详解

    关于JQ的DOM操作面试问题很多,可以从各个点问,所以列举几个常见问题,毕竟面试只是过程,重要的是知识自己掌握了。...

  • jq初始,选择器,事件,内容操作,样式操作

    jq初始 jq选择器 jq事件 jq内容操作 jq样式操作

  • CSS选择器

    元素选择器 类选择器详解 ID选择器详解 属性选择器详解 后代选择器 子元素选择器 相邻兄弟选择器 CSS派生选择器:

  • CSS选择器

    CSS 元素选择器CSS 选择器分组CSS 类选择器详解CSS ID 选择器详解CSS 属性选择器详解CSS 后代...

  • 前端

    1.闭包 2.JQ加载 3.JQ选择器

  • jQuery学习指南01

    jQuery的优点 轻,jq一共30kb左右。 选择器强大,jq支持从css1到css3几乎所有的选择器。而jq自...

  • JQ常见面试题之事件详解(1)

    废话不多说,直接上面试题,答案请在内容具体讲解中查找。 面试题一:事件绑定的函数哪些?他们的区别? 1.事件绑定函...

  • dom对象和jq对象-2020-01-01

    dir =>显示对象的所有属性和方法。原生选择器获取dom对象.png JQ选择器获取图片.png ?JQ对象和D...

  • jq

    1.选择器获取元素$("")//里面放字符串--选择器 2.原生对象与jq对象之间的转化 注意:(1)通过jq获取...

网友评论

    本文标题:JQ常见面试题之选择器详解

    本文链接:https://www.haomeiwen.com/subject/vtswqxtx.html