jQuery选择器详细介绍:基本选择器,层次选择器,HTML标签之表单标签

本文详细介绍了jQuery中的CSS选择器,包括行内样式、id样式、class样式、层次选择器(后代、子代、兄弟、相邻)、以及属性选择器的用法。还提到如何利用这些选择器在前端开发中实现特定效果。此外,还推荐了一些前端工程师必备的书籍和学习资源。
摘要由CSDN通过智能技术生成

$(“#c *”).css(“color”,“green”);

})

我爱简简单单的
我爱简简单单的

我爱简简单单的

我爱简简单单的

在浏览器预览效果如下:

CSS规定了如下优先级:

行内样式->id样式->class样式->标记样式

2、层次选择器

  • (1)后代选择器

  • 语法:$(“M N”)

  • 说明:选择M元素内部后代N元素,包括所有后代元素。

  • (2)子代选择器

    • 语法:$(“M>N”)
  • 说明:选择M元素内部某一个子元素,只限子元素。

  • (3)兄弟选择器

    • 语法:$(“M~N”)
  • 说明:选择M元素后面(不包括前面)的(所有的)某一类兄弟元素N。

  • (4)相邻选择器

    • 语法:$(“M+N”)
  • 说明:选择M元素后面(不包括前面)的(相邻的)某一类兄弟元素N。

JSON Object Example
    • 我爱简简单单的
    • 我爱简简单单的
    • 我爱简简单单的
    • 我爱简简单单的
    • 我爱简简单单的
    • 我爱简简单单的
    • 我爱简简单单的
    • 在浏览器预览效果如下:

      分析:

      ( " l i + l i " ) 使用的是相邻选择器,表示“选择 l i 元素相邻的下一个 l i 元素”。由于最后一个 l i 元素没有相邻的下一个 l i 元素,所以对于最后一个 l i 元素,它是没有下一个 l i 元素可以选取的。 ("li+li")使用的是相邻选择器,表示“选择li元素相邻的下一个li元素”。由于最后一个li元素没有相邻的下一个li元素,所以对于最后一个li元素,它是没有下一个li元素可以选取的。 ("li+li")使用的是相邻选择器,表示选择li元素相邻的下一个li元素。由于最后一个li元素没有相邻的下一个li元素,所以对于最后一个li元素,它是没有下一个li元素可以选取的。(“li+li”).css(“border-top”, “2px solid red”)达到在两两li元素之间添加一个边框的效果。这是一个非常棒的技巧,在实际开发中如果我们想要在两两元素之间实现什么效果,我们经常会用到这个技巧!大家请一定不要浪费这个强大的技巧!

      3、属性选择器

      使用范围:在jQuery中,属性选择器最常见于表单操作。

      选择器说明
      $("selector[attr]")选择包含给定属性的元素
      $("selector[attr='value']")选择给定的属性是某个特定值的元素
      $("selector[attr != 'value']")选择所有含有指定的属性,但属性不等于特定值的元素
      $("selector[attr *= 'value']")选择给定的属性是以包含某些值的元素
      $("selector[attr ^= 'value']")选择给定的属性是以某些值开始的元素(比较少用)
      $("selector[attr $= 'value']")选择给定的属性是以某些值结尾的元素(比较少用)
      $("selector[selector1][selector2]…[selectorN]")复合属性选择器,需要同时满足多个条件时使用

      注:selector指的是选择器,attr指的是属性(attribute),value指的是属性值。

      JSON Object Example

      请选择以下需要购买的蔬菜


      黄瓜

      西红柿

      土豆

      茄子

      在浏览器预览效果如下:

      小编13年上海交大毕业,曾经在小公司待过,也去过华为、OPPO等大厂,18年进入阿里一直到现在。

      深知大多数初中级前端工程师,想要提升技能,往往是自己摸索成长或者是报班学习,但自己不成体系的自学效果低效又漫长,而且极易碰到天花板技术停滞不前!
      因此收集整理了一份《2024年Web前端开发全套学习资料》送给大家,初衷也很简单,就是希望能够帮助到想自学提升又不知道该从何学起的朋友,同时减轻大家的负担。

      img
      img
      img
      img

      由于文件比较大,这里只是将部分目录截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频

      如果你觉得这些内容对你有帮助,可以添加下面V无偿领取!(备注:前端)
      img

      结尾

      学习html5、css、javascript这些基础知识,学习的渠道很多,就不多说了,例如,一些其他的优秀博客。但是本人觉得看书也很必要,可以节省很多时间,常见的javascript的书,例如:javascript的高级程序设计,是每位前端工程师必不可少的一本书,边看边用,了解js的一些基本知识,基本上很全面了,如果有时间可以读一些,js性能相关的书籍,以及设计者模式,在实践中都会用的到。

      开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

      高级程序设计,是每位前端工程师必不可少的一本书,边看边用,了解js的一些基本知识,基本上很全面了,如果有时间可以读一些,js性能相关的书籍,以及设计者模式,在实践中都会用的到。

      html5

      程师必不可少的一本书,边看边用,了解js的一些基本知识,基本上很全面了,如果有时间可以读一些,js性能相关的书籍,以及设计者模式,在实践中都会用的到。

      开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

      高级程序设计,是每位前端工程师必不可少的一本书,边看边用,了解js的一些基本知识,基本上很全面了,如果有时间可以读一些,js性能相关的书籍,以及设计者模式,在实践中都会用的到。

      html5

    • 15
      点赞
    • 21
      收藏
      觉得还不错? 一键收藏
    • 0
      评论
    评论
    添加红包

    请填写红包祝福语或标题

    红包个数最小为10个

    红包金额最低5元

    当前余额3.43前往充值 >
    需支付:10.00
    成就一亿技术人!
    领取后你会自动成为博主和红包主的粉丝 规则
    hope_wisdom
    发出的红包
    实付
    使用余额支付
    点击重新获取
    扫码支付
    钱包余额 0

    抵扣说明:

    1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
    2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

    余额充值