1. 全栈程序员必看首页

jQuery选择器大全总结

全栈程序员-站长 • • 未分类 • 阅读 3

jQuery选择器大全总结jQuery 选择器 jQuery 的选择器基本选择器基本过滤选择器属性过滤选择器表单选择器子元素选择器操作元素属性操作样式操作样式类获取或设置元素高度和宽度操作 HTML 代码操作 text 代码 jQuery 的选择器基本选择器 id 选择器 id 类选择器 class 标签名选择器 匹配所有元素基本过滤选择器 Element first 选取第一个元素 Element last 选取最后一个元素 Element not selector 去除所有与给定选择器匹配的元素 Element ev

jQuery选择器

jQuery的选择器

基本选择器

基本选择器是 jQuery 中最常用的选择器, 也是最简单的选择器, 它通过元素 id, class 和标记名来查找 DOM 元素

id选择器：#id
类选择器：.class
标签名选择器：
* ：匹配所有元素
在这里插入图片描述
示例：
改变 id 为 one 的元素的背景色为 红色












$("#one").css("backgroundColor","red");

改变元素名为

的所有元素的背景色为 # bbffaa，字体颜色为红色

$("p").css({ 
   color:"red",backgroundColor:"#bbffaa"});

改变第一个

元素的背景色为红色

$("p").eq(0).css("backgroundColor","red");

改变所有

元素和 id 为 one 的元素的背景色为 # bbffaa

$("h1,#one").css("backgroundColor","#bbffaa");

层次选择器

如果想通过 DOM 元素之间的层次关系来获取特定元素, 例如后代元素, 子元素, 相邻元素, 兄弟元素等, 则需要使用层次选择器

在这里插入图片描述
注意: (“prev ~ div”) 选择器只能选择 “# prev ” 元素后面的同辈元素; 而 jQuery 中的方法 siblings() 与前后位置无关, 只要是同辈节点就可以选取

示例：

改变 内所有

的背景色为
# bbffaa 

$(“body div").css("backgroundColor","#bbffaa");

改变 内子

的背景色为
# bbffaa 

$(“body>div").css("backgroundColor","#bbffaa");

改变 id 为 one 的下一个

的背景色为
# bbffaa 

$("#one+div").css("backgroundColor","#bbffaa");

改变 id 为 two 的元素后面的所有兄弟

的元素的背景色为
# bbffaa 

$("#two~div").css("backgroundColor","#bbffaa");

改变 id 为 two 的元素所有

兄弟元素的背景色为 # bbffaa

$("#two"). siblings("p") .css("backgroundColor","#bbffaa");

过滤选择器

基本过滤选择器

Element:first ：选取第一个元素
Element:last : 选取最后一个元素
Element:not(selector)：去除所有与给定选择器匹配的元素
Element:even ：选取所有索引为偶数的元素，索引从0开始
Element:odd ：选取所有索引为奇数的元素，索引从0开始
Element:eq(index)：选取索引等于index的元素，索引从0开始
Element:gt(index)：选取索引大于index的元素，索引从0开始
Element:lt(index) ：选取索引小于index的元素，索引从0开始
:header ：选取索引的标题标签
在这里插入图片描述
示例：
改变第一个 div 元素的背景色为 # bbffaa






















$("div:first").css("backgroundColor","#bbffaa");

改变id不为 one 的所有p元素的背景色为 # bbffaa

$("p:not('#one')").css("backgroundColor","#bbffaa");

改变索引值为偶数的 tr元素的背景色为 # bbffaa

$("tr:even").css("backgroundColor","#bbffaa");

改变索引值为大于 3 且为奇数的 p元素的背景色为 # bbffaa

$("p:gt(3):odd").css("backgroundColor","#bbffaa");

改变所有的标题元素的背景色为 # bbffaa

$(":header").css("backgroundColor","#bbffaa");

内容过滤选择器

示例：
改变含有文本 ‘di’ 的 p元素的背景色为 # bbffaa

$("p:contains(di)")

改变含有 class 为 mini 元素的 p元素的背景色为 # bbffaa

$("p:has(.mini)")

可见性过滤选择器

可见性过滤选择器是根据元素的可见和不可见状态来选择相应的元素

在这里插入图片描述
可见选择器 :hidden 不仅包含样式属性 display 为 none 的元素, 也包含文本隐藏域 ()和 visible:hidden 之类的元素

属性过滤选择器

属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素

Element[attribute]：选取拥有此属性的选择器
Element[attribute=value]：选取指定属性值为value的元素
Element[attribute!=value]：选取指定属性值不等于value的元素
Element[attribute^=value]：选取指定属性值以value开始的元素
Element[attribute$=value]：选取指定属性值以value结束的元素
Element[attribute*=value]：选取指定属性值中含有value的元素
在这里插入图片描述












表单选择器

:input 选择由input生成的表单控件
:text 选择单行文本框
:password 选择密码框
:radio 单选按钮
:checkbox 复选按钮
在这里插入图片描述










子元素选择器

:nth-child(index/even/odd) –>选取每个父元素下的索引值为偶(奇)数的子元素

  • (1) :nth-child(even/odd): 能选取每个父元素下的索引值为偶(奇)数的元素
  • (2):nth-child(2): 能选取每个父元素下的索引值为 2 的元素
  • (3):nth-child(3n): 能选取每个父元素下的索引值是 3 的倍数 的元素
  • (4):nth-child(3n + 1): 能选取每个父元素下的索引值是 3n + 1的元素

:first-child –> 选择每个父元素下的第一个子元素
:last-child –> 选择每个父元素下的最后一个子元素
在这里插入图片描述




表单对象属性过滤选择器

此选择器主要对所选择的表单元素进行过滤

在这里插入图片描述

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。

发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/216971.html原文链接：https://javaforall.net

赞 (0)
0 0

关于作者

全栈程序员-站长的头像

全栈程序员-站长

133.5K 文章
3 粉丝
本网站汇聚当前互联网主流语音，持续更新，欢迎关注公众号“全栈程序员社区”
上一篇 2026年3月18日 上午10:38
下一篇 2026年3月18日 上午10:38


相关推荐

  • Map集合的遍历[通俗易懂]

    Map集合的遍历[通俗易懂]

    Map集合的遍历[通俗易懂]COPY/***Map接口的使用*特点：1.存储键值对2.键不能重复，值可以重复3.无序*/publicclassDemo1{ publicstaticvoidmain(String[]args){ Map<String,Integer>map=newHashMap<String,Integer>(); //1.添加元素 map.put(“tang”,21); map.put(“he”,22); map.put(“

    全栈程序员-站长的头像 全栈程序员-站长
    2022年5月7日
    44
  • 即梦AI和可灵AI的区别 即梦Ai

    即梦AI和可灵AI的区别

    即梦AI和可灵AI的区别

    Ai探索者的头像 Ai探索者
    2026年3月12日
    2
  • 常见的距离计算公式——欧式距离（Euclidean Distance） idea

    常见的距离计算公式——欧式距离（Euclidean Distance）

    常见的距离计算公式——欧式距离（Euclidean Distance）计算公式二维空间的公式其中，为点与点之间的欧氏距离；为点到原点的欧氏距离。三维空间的公式n维空间的公式

    全栈程序员-站长的头像 全栈程序员-站长
    2025年8月7日
    11
  • <span role="heading" aria-level="2">企业web建站平台—格子平台采用云计算

    企业web建站平台—格子平台采用云计算

    企业web建站平台—格子平台采用云计算运用最先进的IT技术——“云计算”，将互联网上各种实用的、有趣的、新奇的元素都浓缩到一个格子里，并且将所有格子都联接在一起，为用户提供出色的价值体验，这就是格子“云”平台。√您只需要注册一个账

    全栈程序员-站长的头像 全栈程序员-站长
    2022年7月3日
    27
  • AIX mount 命令

    AIX mount 命令

    AIX mount 命令用途使文件系统可用 语法 mount f nNode oOptions p r vVfsName tType Device Node Directory Directory all a V generic options special mount points 描述 mount 命

    全栈程序员-站长的头像 全栈程序员-站长
    2026年3月17日
    2
  • Js：indexOf() 和 lastIndexOf() 的区别[通俗易懂]

    Js：indexOf() 和 lastIndexOf() 的区别[通俗易懂]

    Js：indexOf() 和 lastIndexOf() 的区别[通俗易懂]ECMAScript5为数组实例添加了两个位置方法：indexOf()和lastIndexOf()。这两个方法都接收两个参数：要查找的项和（可选的）表示查找起点位置的索引。indexOf()方法从数组的开头（位置0）开始向后查找lastIndexOf()方法则从数组的末尾开始向前查找。这两个方法都返回要查找的项在数组中的位置，或者在没找到的情况下返回-1。在比较第一个参数与数组中的每一项时，会使用全等操作符；也就是说，要求查找的项必须严格相等（就像使用===一样）。…

    全栈程序员-站长的头像 全栈程序员-站长
    2022年7月14日
    19

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号