百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 技术资源 > 正文

jquery选择器

moboyou 2025-06-13 07:52 16 浏览

1 jQuery 选择器

jQuery选择器共有四大类,分别为基本选择器,层次选择器,过滤选择器和表单选择器。

1.1 基本选择器

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

选择器

描述

返回

#id

根据给定的ID匹配一个元素

单个元素组成的集合

element

根据给定的元素名匹配所有元素

元素集合

.class

根据给定的类匹配元素

元素集合

*

匹配所有元素

元素集合

seletor1,seletor2

…,selectorN

将每一个选择器匹配到的元素合并后一起返回;可以指定任意多个选择器,并将匹配到的元素合并到一个结果内

元素集合


1.2 层级选择器

适合于通过DOM元素之间的层次关系来获取特定元素,例如后代元素,子元素,相邻元素和兄弟元素。

选择器

描述

返回

ancestor descendant


后代元素选择器

$(“div span”)选取<div>里的所有的<span>元素


元素集合

parent > child


子元素选择器

$(“div>span”)选取<div>元素下元素名是<span>的子元素


元素集合

prev + next


相邻元素选择器

$(“.one+div”)选取class为one的下一个<div>兄弟元素


元素集合

prev ~ siblings


兄弟元素选择器

$(“#two~div”)选取Id为two的元素后面的所有<div>兄弟元素


元素集合

注意:$(“prev~siblings”)选择器与siblings()方法的区别。

$(“#prev~div”)选择的是”#prev”元素后面的所有的同辈的div元素。而siblings()方法与 前后位置无关,只要是同辈节点就都能匹配。


1.3 过滤选择器

过滤选择器主要是通过特定的过滤规则来筛选出所需的DOM元素,过滤规则与CSS中的伪类选择器语法相同,即选择器都以一个冒号(:)开头。按照不同的过滤规则,过滤选择器可以分为基本过滤,内容过滤,可见性过滤,属性过滤,子元素过滤,表单过滤和表单对象属性过滤选择器共七种选择器。

1.3.1 基本过滤


选择器

描述

返回

:first

选取第一个元素

$('li:first');


单元素

:last

选取最后一个元素

$('li:last');


单元素

:not(selector)

去除所有与给定选择器匹配的元素。

$("input:not(:checked)");查找所有未选中的 input 元素

元素集合

:even

选取索引号为偶数的元素,索引号从0开始

$("tr:even")


元素集合

:odd

选取索引号为奇数的元素,索引号从0开始

$("tr:odd”)


元素集合

:eq(index)

选取索引号为index的元素,索引号从0开始

$("tr:eq(1)")


单元素

:gt(index)

选取索引号大于index的元素,索引号从0开始

$("tr:gt(1)")


元素集合

:lt(index)

选取索引号小于index的元素,索引号从0开始

$("tr:lt(1)")


元素集合

:header

选取如 h1, h2, h3之类的标题元素$(":header").css("background", "#EEE")


元素集合

:animated

选取所有正在执行动画效果的元素

$("div:animated")

元素集合


1.3.2 内容过滤

主要对所选择的元素中所包含的子元素或内容进行过滤。

选择器

描述

返回

:contains(text)

选取包含给定文本的元素

$("div:contains('John')")


元素集合

:empty

选取所有不包含子元素或者文本的空元素

$("td:empty")


元素集合

:has(selector)

选取含有选择器所匹配的元素的元素

$("div:has(p)").addClass("text");给所有包含 p 元素的 div 元素添加一个 text 样式


元素集合

:parent

选取含有子元素或者文本的元素

$("td:parent")

元素集合


1.3.3 可见性过滤

主要对元素的可见性(可见或不可见)进行过滤。

选择器

描述

返回

:hidden

选取所有不可见元素,或者type为hidden的元素

$("div:hidden")


元素集合

:visible

选取所有的可见元素

$("input:visible")


元素集合

可见选择器:hidden,可以对样式的display的值为none的元素进行过滤选择;以外;还可以对表单的隐藏元素(即类型为hidden的表单项)或visible:hidden的元素进行过滤选择。


1.3.4 属性过滤

主要对元素的属性进行过滤选择符合属性特征符合的元素。

选择器

描述

返回

[attribute]

选取包含给定属性的元素 $("div[id]")

查找所有含有 id 属性的 div 元素


元素集合

[attribute=value]

选取给定的属性是某个特定值的元素 $("input[name='newsletter']") 查找所有 name 属性是 newsletter 的 input 元素


元素集合

[attribute!=value]

选取所有不含有指定的属性,或者属性不等于特定值的元素 $("input[name!='newsletter']") 查找所有 name 属性不是 newsletter 的 input 元素


元素集合

[attribute^=value]

选取给定的属性是以某些值开始的元素

$("input[name^='news']") 查找所有 name 以 'news' 开始的 input 元素

元素集合

[attribute$=value]

选取给定的属性是以某些值结尾的元素

$("input[name$='letter']") 查找所有 name 以 'letter' 结尾的 input 元素

元素集合

[attribute*=value]

选取给定的属性是以包含某些值的元素

$("input[name*='man']") 查找所有 name 包含 'man' 的 input 元素

元素集合

[attrSel1][attrSel2][attrSelN]

复合属性选择器,需要同时满足多个条件时使用

$("input[id][name$='man']") 找到所有含有 id 属性,并且它的 name 属性是以 man 结尾的


元素集合


1.3.5 子元素过滤

主要选择元素中所含有的子元素。

选择器

描述

返回

:nth-child

选取父元素下的第N个子或奇偶元素(index序号从1开始)

$("ul li:nth-child(2)") 在每个 ul 查找第 2 个li


元素集合

:first-child

选取父元素的第一个子元素

$("ul li:first-child") 在每个 ul 中查找第一个 li


元素集合

:last-child

选取父元素中的最后一个子元素 $("ul li:last-child") 在每个 ul 中查找最后一个 li


元素集合

:only-child

如果某个元素是父元素中唯一的子元素,那将会被匹配;如果父元素中含有其他元素,那将不会被匹配。 $("ul li:only-child") 在 ul 中查找是唯一子元素的 li

元素集合

:nth-child 过滤选择器:

:nth-child(even) 选取父元素下索引号为偶数的子元素

:nth-child(odd) 选取父元素下索引号为奇数的子元素

:nth-child(5n) 选取父元素下索引号为5n的子元素

:nth-child(5n+1) 选取父元素下索引号为5n+1的子元素


1.3.6 表单过滤

主要对表单元素进行过滤选择。

选择器

描述

返回

:input

匹配所有 input, textarea, select 和 button 元素 $(":input") 查找所有的input元素。


元素集合

:text

匹配所有的单行文本框 $(":text")


元素集合

:password

匹配所有密码框

$(":password")


元素集合

:radio

匹配所有单选按钮

$(":radio")


元素集合

:checkbox

匹配所有复选框

$(":checkbox")


元素集合

:submit

匹配所有提交按钮

$(":submit")


元素集合

:image

匹配所有图像域

$(":image")


元素集合

:reset

匹配所有重置按钮

$(":reset")


元素集合

:button

匹配所有按钮<button></button>,$(":button")


元素集合

:file

匹配所有文件域

$(":file")


元素集合

:hidden

匹配所有不可见元素(display:none),或者type为hidden的元素

$("tr:hidden")


元素集合


1.3.7 表单对象属性过滤

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

选择器

描述

返回

:enabled

选取所有可用元素

$("input:enabled")


元素集合

:disabled

选取所有不可用元素

$("input:disabled")


元素集合

:checked

选取所有被选中的元素(单、复选框)

$("input:checked")


元素集合

:selected

选取所有被选中的选项元素(下拉列表

$("select option:selected")查找所有选中的选项元素

元素集合

相关推荐

Excel技巧:SHEETSNA函数一键提取所有工作表名称批量生产目录

首先介绍一下此函数:SHEETSNAME函数用于获取工作表的名称,有三个可选参数。语法:=SHEETSNAME([参照区域],[结果方向],[工作表范围])(参照区域,可选。给出参照,只返回参照单元格...

Excel HOUR函数:“小时”提取器_excel+hour函数提取器怎么用

一、函数概述HOUR函数是Excel中用于提取时间值小时部分的日期时间函数,返回0(12:00AM)到23(11:00PM)之间的整数。该函数在时间数据分析、考勤统计、日程安排等场景中应用广泛。语...

Filter+Search信息管理不再难|多条件|模糊查找|Excel函数应用

原创版权所有介绍一个信息管理系统,要求可以实现:多条件、模糊查找,手动输入的内容能去空格。先看效果,如下图动画演示这样的一个效果要怎样实现呢?本文所用函数有Filter和Search。先用filter...

FILTER函数介绍及经典用法12:FILTER+切片器的应用

EXCEL函数技巧:FILTER经典用法12。FILTER+切片器制作筛选按钮。FILTER的函数的经典用法12是用FILTER的函数和切片器制作一个筛选按钮。像左边的原始数据,右边想要制作一...

office办公应用网站推荐_office办公软件大全

以下是针对Office办公应用(Word/Excel/PPT等)的免费学习网站推荐,涵盖官方教程、综合平台及垂直领域资源,适合不同学习需求:一、官方权威资源1.微软Office官方培训...

WPS/Excel职场办公最常用的60个函数大全(含卡片),效率翻倍!

办公最常用的60个函数大全:从入门到精通,效率翻倍!在职场中,WPS/Excel几乎是每个人都离不开的工具,而函数则是其灵魂。掌握常用的函数,不仅能大幅提升工作效率,还能让你在数据处理、报表分析、自动...

收藏|查找神器Xlookup全集|一篇就够|Excel函数|图解教程

原创版权所有全程图解,方便阅读,内容比较多,请先收藏!Xlookup是Vlookup的升级函数,解决了Vlookup的所有缺点,可以完全取代Vlookup,学完本文后你将可以应对所有的查找难题,内容...

批量查询快递总耗时?用Excel这个公式,自动计算揽收到签收天数

批量查询快递总耗时?用Excel这个公式,自动计算揽收到签收天数在电商运营、物流对账等工作中,经常需要统计快递“揽收到签收”的耗时——比如判断某快递公司是否符合“3天内送达”的服务承...

Excel函数公式教程(490个实例详解)

Excel函数公式教程(490个实例详解)管理层的财务人员为什么那么厉害?就是因为他们精通excel技能!财务人员在日常工作中,经常会用到Excel财务函数公式,比如财务报表分析、工资核算、库存管理等...

Excel(WPS表格)Tocol函数应用技巧案例解读,建议收藏备用!

工作中,经常需要从多个单元格区域中提取唯一值,如体育赛事报名信息中提取唯一的参赛者信息等,此时如果复制粘贴然后去重,效率就会很低。如果能合理利用Tocol函数,将会极大地提高工作效率。一、功能及语法结...

Excel中的SCAN函数公式,把计算过程理清,你就会了

Excel新版本里面,除了出现非常好用的xlookup,Filter公式之外,还更新一批自定义函数,可以像写代码一样写公式其中SCAN函数公式,也非常强大,它是一个循环函数,今天来了解这个函数公式的计...

Excel(WPS表格)中多列去重就用Tocol+Unique组合函数,简单高效

在数据的分析和处理中,“去重”一直是绕不开的话题,如果单列去重,可以使用Unique函数完成,如果多列去重,如下图:从数据信息中可以看到,每位参赛者参加了多项运动,如果想知道去重后的参赛者有多少人,该...

Excel(WPS表格)函数Groupby,聚合统计,快速提高效率!

在前期的内容中,我们讲了很多的统计函数,如Sum系列、Average系列、Count系列、Rank系列等等……但如果用一个函数实现类似数据透视表的功能,就必须用Groupby函数,按指定字段进行聚合汇...

Excel新版本,IFS函数公式,太强大了!

我们举一个工作实例,现在需要计算业务员的奖励数据,右边是公司的奖励标准:在新版本的函数公式出来之前,我们需要使用IF函数公式来解决1、IF函数公式IF函数公式由三个参数组成,IF(判断条件,对的时候返...

Excel不用函数公式数据透视表,1秒完成多列项目汇总统计

如何将这里的多组数据进行汇总统计?每组数据当中一列是不同菜品,另一列就是该菜品的销售数量。如何进行汇总统计得到所有的菜品销售数量的求和、技术、平均、最大、最小值等数据?不用函数公式和数据透视表,一秒就...