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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,863评论 1 92
  • 通过jQuery,您可以选取(查询,query)HTML元素,并对它们执行“操作”(actions)。 jQuer...
    枇杷树8824阅读 680评论 0 3
  • <a name='html'>HTML</a> Doctype作用?标准模式与兼容模式各有什么区别? (1)、<...
    clark124阅读 3,613评论 1 19
  • 分享人:蔡永坚 1. 查看数据库操作记录 2. 弹窗问题 A页面通过AlertPage弹出高为200px的B页面,...
    胡諾阅读 745评论 0 1
  • 10月19日,以“创业创新---汇聚发展新动能”为主题的“全国大众创业万众创新活动周”正式拉开帷幕。 作为在北京创...
    小郭hhhh阅读 601评论 0 2