jQuery 选择器
liuian 2025-04-26 19:25 40 浏览
本节我们来学习 jQuery 中的选择器，选择器是 jQuery 库中最重要的部分之一。
jQuery选择器
jQuery 选择器允许我们选取和操作 HTML 元素，它用于根据 HTML 元素的名称、ID、类、类型、属性和属性值等来查找 HTML 元素。除了基于现有的 CSS 选择器，它还有一些自己自定义的选择器。
要注意 jQuery 中的所有选择器都以美元符号和圆括号开头，例如 $()。
元素选择器
jQuery 元素选择器是根据元素名称匹配相对应的元素。也就是说它是根据元素的标签名来选择的，指向的是 DOM 元素的标签名。
示例：
例如有下面一段 HTML 代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery_侠课岛(9xkd.com)</title>
</head>
<body>
<h2>你好，欢迎来到侠课岛！</h2>
<div>
<p>侠课岛的学习课程：</p>
<ul>
<li class="course">Python</li>
<li class="course">前端</li>
<li class="course">Java</li>
<li class="course">PHP</li>
</ul>
<div>
<button>点击按钮</button>
</div>
</div>
</body>
</html>
如果我们要在这个页面中写入 jQuery 代码，首先需要引入 jQuery 文件，格式如下所示：
<script src="jquery-3.5.1.min.js"></script>
这表示我们引入的 jquery-3.5.1.min.js 和 index.html 文件位于同一目录下。
接着我们要在一个新的 <script> 标签中编写 jQuery 代码，注意一定要另外写一个 <script> ，不能写在 引入文件的 <script> 标签中哟。
例如要实现点击页面中的按钮，隐藏所有 <li> 标签的效果：
<script>
$(function(){
$("button").click(function(){
$("li").hide();
});
});
</script>
上述代码中，最开始是一个 jQuery 的加载函数 $(function(){})，这个我们前面一节讲到过。然后在 button 标签选择器上绑定了一个 click() 点击事件，表示当点击元素时，会触发这个点击事件。然后会运行点击事件中的函数，这函数中的 $("li").hide() 表示选取页面所有的 <li> 标签然后进行隐藏，hide() 就是一个隐藏元素方法。
在浏览器中的演示效果：
[图片上传失败...(
image-d7b503-1629555686452)]
class类选择器
jQuery 类选择器可以通过指定的 class 来查找元素。语法和标签选择器有一点区别，就是需要在类选择器名称前面加上一个点号.。
示例：
例如下面这段代码，其实和上述元素选择器中的示例效果差不多，不同的是这表示对页面中所有 class="course" 的元素进行隐藏：
<script>
$(function(){
$("button").click(function(){
$(".course").hide();
});
});
</script>
虽然在本节教程中这两个示例的在浏览器中的演示效果是一样的，但是还有有很大的区别，对于前一个示例来说，只要是标签为 <li> 的元素都会进行隐藏，而对于此示例来说，只有设置了 class="course" 的元素才会进行隐藏。
ID选择器
jQuery 中的 ID 选择器通过 HTML 元素的 id 属性来查找指定的元素。一个 ID 在一个页面中应该是唯一的，所以当我们想要选取唯一的元素时，应该使用 ID 选择器。
示例：
例如获取页面中 id 为 xkd 的元素文本内容，并通过 alert() 方法显示在浏览器中：
alert($("#xkd").text());
我们在使用 ID 选择器时，需要在选择器前面加上一个井号 #。text() 方法可以用于返回所选元素的文本内容。
在浏览器中的演示效果：
JQuery 中的其他选择器
除了标签选择器、类选择器、ID选择器，JQuery 中还有一些自定义的选择器，如下所示：
语法 | 描述 |
$("*") | 选取所有元素 |
$(this) | 选取当前 HTML 元素 |
$("p.xkd") | 选取所有 class="xkd" 的 <p> 元素 |
$("p:first") | 选取第一个 <p> 元素 |
$("ul li:first") | 选取第一个 <ul> 元素下的第一个 <li> 元素 |
$("ul li:first-child") | 选取每个 <ul> 元素下的第一个 <li> 元素 |
$("[href]") | 选取所有具有 href 属性的元素 |
$(a[target='_blank']) | 选取所有目标属性值等于 _blank 的 <a>元素 |
$(a[target!='_blank']) | 选取所有目标属性值不等于_blank 的<a> 元素 |
$("div#xkd .good") | 选取 id="xkd" 的 <div> 元素中的所有 class="good" 的元素 |
$("tr:even") | 选取所有偶数位置的 <tr> 元素 |
$("tr:odd") | 选取所有奇数位置的 <tr> 元素 |
链接：https://www.9xkd.com/
相关推荐
- eino v0.4.5版本深度解析:接口类型处理优化与错误机制全面升级
-
近日，eino框架发布了v0.4.5版本，该版本在错误处理、类型安全、流处理机制以及代理配置注释等方面进行了多项优化与修复。本次更新共包含6个提交，涉及10个文件的修改，由2位贡献者共同完成。本文将详...
- SpringBoot异常处理_springboot异常注解
-
在SpringBoot中，异常处理是构建健壮、可维护Web应用的关键部分。良好的异常处理机制可以统一返回格式、提升用户体验、便于调试和监控。以下是SpringBoot中处理异常的完整指...
- Jenkins运维之路(Jenkins流水线改造Day02-1-容器项目)
-
这回对线上容器服务器的流水线进行了一定的改造来满足目前线上的需求，还是会将所有的自动化脚本都放置到代码库中统一管理，我感觉一章不一定写的完，所以先给标题加了个-1，话不多说开干1.本次流水线的流程设计...
- 告别宕机!零基础搭建服务器监控告警系统!小白也能学会!
-
前言本文将带你从零开始，一步步搭建一个完整的服务器指标监控与邮件告警系统，使用的技术栈均为业界主流、稳定可靠的开源工具：Prometheus：云原生时代的监控王者，擅长指标采集与告警规则定义Node_...
- httprunner实战接口测试笔记，拿走不谢
-
每天进步一点点，关注我们哦，每天分享测试技术文章本文章出自【码同学软件测试】码同学公众号：自动化软件测试码同学抖音号：小码哥聊软件测试01开始安装跟创建项目pipinstallhttprunne...
- 基于JMeter的性能压测平台实现_jmeter压测方案
-
这篇文章已经是两年前写的，短短两年时间，JMeter开源应用技术的发展已经是翻天覆地，最初由github开源项目zyanycall/stressTestPlatform形成的这款测试工具也开始慢...
- 12K+ Star!新一代的开源持续测试工具!
-
大家好，我是Java陈序员。在企业软件研发的持续交付流程中，测试环节往往是影响效率的关键瓶颈，用例管理混乱、接口调试复杂、团队协作不畅、与DevOps流程脱节等问题都能影响软件交付。今天，给大家...
- Spring Boot3 中分库分表之后如何合并查询
-
在当今互联网应用飞速发展的时代，数据量呈爆发式增长。对于互联网软件开发人员而言，如何高效管理和查询海量数据成为了一项关键挑战。分库分表技术应运而生，它能有效缓解单库单表数据量过大带来的性能瓶颈。而在...
- 离线在docker镜像方式部署ragflow0.17.2
-
经常项目上会出现不能连外网的情况，要怎么使用ragflow镜像部署呢，这里提供详细的步骤。1、下载基础镜像根据docker-compose-base.yml及docker-compose.yml中的i...
- 看，教你手写一个最简单的SpringBoot Starter
-
何为Starter？想必大家都使用过SpringBoot，在SpringBoot项目中，使用最多的无非就是各种各样的Starter了。那何为Starter呢？你可以理解为一个可拔插式...
- 《群星stellaris》军事基地跳出怎么办?解决方法一览
-
《群星stellaris》军事基地跳出情况有些小伙伴出现过这种情况，究竟该怎么解决呢？玩家“gmjdadk”分享的自己的解决方法，看看能不能解决。我用英文原版、德语、法语和俄语四个版本对比了一下，结果...
- 数据开发工具dbt手拉手教程-03.定义数据源模型
-
本章节介绍在dbt项目中，如何定义数据源模型。定义并引入数据源通过Extract和Load方式加载到仓库中的数据，可以使用dbt中的sources组件进行定义和描述。通过在dbt中将这些数据集(表)声...
- docker compose 常用命令手册_docker-compose init
-
以下是DockerCompose常用命令手册，按生命周期管理、服务运维、构建配置、扩缩容、调试工具分类，附带参数解析、示例和关键说明，覆盖多容器编排核心场景：一、生命周期管理（核心命令...
- RagFlow与DeepSeek R1本地知识库搭建详细步骤及代码实现
-
一、环境准备硬件要求独立显卡（建议NVIDIAGPU，8GB显存以上）内存16GB以上，推荐32GB（处理大规模文档时更高效）SSD硬盘（加速文档解析与检索）软件安装bash#必装组件Docker...
- Docker Compose 配置更新指南_docker-compose配置
-
高效管理容器配置变更的最佳实践方法重启范围保留数据卷适用场景docker-composeup-d变更的服务常规配置更新--force-recreate指定/所有服务强制重建down→up流程...
- 一周热门
-
-
【验证码逆向专栏】vaptcha 手势验证码逆向分析
-
Python实现人事自动打卡，再也不会被批评
-
Psutil + Flask + Pyecharts + Bootstrap 开发动态可视化系统监控
-
一个解决支持HTML/CSS/JS网页转PDF(高质量)的终极解决方案
-
再见Swagger UI 国人开源了一款超好用的 API 文档生成框架，真香
-
网页转成pdf文件的经验分享 网页转成pdf文件的经验分享怎么弄
-
C++ std::vector 简介
-
飞牛OS入门安装遇到问题，如何解决?
-
系统C盘清理:微信PC端文件清理，扩大C盘可用空间步骤
-
10款高性能NAS丨双十一必看，轻松搞定虚拟机、Docker、软路由
-
- 最近发表
- 标签列表
-
- python判断字典是否为空 (50)
- crontab每周一执行 (48)
- aes和des区别 (43)
- bash脚本和shell脚本的区别 (35)
- canvas库 (33)
- dataframe筛选满足条件的行 (35)
- gitlab日志 (33)
- lua xpcall (36)
- blob转json (33)
- python判断是否在列表中 (34)
- python html转pdf (36)
- 安装指定版本npm (37)
- idea搜索jar包内容 (33)
- css鼠标悬停出现隐藏的文字 (34)
- linux nacos启动命令 (33)
- gitlab 日志 (36)
- adb pull (37)
- python判断元素在不在列表里 (34)
- python 字典删除元素 (34)
- vscode切换git分支 (35)
- python bytes转16进制 (35)
- grep前后几行 (34)
- hashmap转list (35)
- c++ 字符串查找 (35)
- mysql刷新权限 (34)