jQuery 选择器
liuian 2025-04-26 19:25 20 浏览
本节我们来学习 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/
相关推荐
- 深入解析 MySQL 8.0 JSON 相关函数:解锁数据存储的无限可能
-
引言在现代应用程序中，数据的存储和处理变得愈发复杂多样。MySQL8.0引入了丰富的JSON相关函数，为我们提供了更灵活的数据存储和检索方式。本文将深入探讨MySQL8.0中的JSON...
- MySQL的Json类型个人用法详解（mysql json类型对应java什么类型）
-
前言虽然MySQL很早就添加了Json类型，但是在业务开发过程中还是很少设计带这种类型的表。少不代表没有，当真正要对Json类型进行特定查询，修改，插入和优化等操作时，却感觉一下子想不起那些函数怎么使...
- MySQL的json查询之json_array（mysql json_search）
-
json_array顾名思义就是创建一个数组，实际的用法，我目前没有想到很好的使用场景。使用官方的例子说明一下吧。例一selectjson_array(1,2,3,4);json_array虽然单独...
- 头条创作挑战赛#一、LSTM 原理 长短期记忆网络
-
#头条创作挑战赛#一、LSTM原理长短期记忆网络（LongShort-TermMemory，LSTM）是一种特殊类型的循环神经网络（RNN），旨在解决传统RNN在处理长序列数据时面临的梯度...
- TensorBoard最全使用教程:看这篇就够了
-
机器学习通常涉及在训练期间可视化和度量模型的性能。有许多工具可用于此任务。在本文中，我们将重点介绍TensorFlow的开源工具套件，称为TensorBoard，虽然他是TensorFlow...
- 图神经网络版本的Kolmogorov Arnold(KAN)代码实现和效果对比
-
本文约4600字，建议阅读10分钟本文介绍了图神经网络版本的对比。KolmogorovArnoldNetworks(KAN)最近作为MLP的替代而流行起来，KANs使用Kolmogorov-Ar...
- kornia，一个实用的 Python 库!（python kkb_tools）
-
大家好，今天为大家分享一个实用的Python库-kornia。Github地址：https://github.com/kornia/kornia/Kornia是一个基于PyTorch的开源计算...
- 图像分割掩码标注转YOLO多边形标注
-
Ultralytics团队付出了巨大的努力，使创建自定义YOLO模型变得非常容易。但是，处理大型数据集仍然很痛苦。训练yolo分割模型需要数据集具有其特定格式，这可能与你从大型数据集中获得的...
- [python] 向量检索库Faiss使用指北
-
Faiss是一个由facebook开发以用于高效相似性搜索和密集向量聚类的库。它能够在任意大小的向量集中进行搜索。它还包含用于评估和参数调整的支持代码。Faiss是用C++编写的，带有Python的完...
- 如何把未量化的 70B 大模型加载到笔记本电脑上运行?
-
并行运行70B大模型我们已经看到，量化已经成为在低端GPU（比如Colab、Kaggle等）上加载大型语言模型（LLMs）的最常见方法了，但这会降低准确性并增加幻觉现象。那如果你和你的朋友们...
- ncnn+PPYOLOv2首次结合!全网最详细代码解读来了
-
编辑：好困LRS【新智元导读】今天给大家安利一个宝藏仓库miemiedetection，该仓库集合了PPYOLO、PPYOLOv2、PPYOLOE三个算法pytorch实现三合一，其中的PPYOL...
- 人工智能——图像识别（人工智能图像识别流程）
-
概述图像识别（ImageRecognition）是计算机视觉的核心任务之一，旨在通过算法让计算机理解图像内容，包括分类（识别物体类别）、检测（定位并识别多个物体）、分割（像素级识别）等，常见的应用场...
- PyTorch 深度学习实战(15):Twin Delayed DDPG (TD3) 算法
-
在上一篇文章中，我们介绍了DeepDeterministicPolicyGradient(DDPG)算法，并使用它解决了Pendulum问题。本文将深入探讨TwinDelayed...
- 大模型中常用的注意力机制GQA详解以及Pytorch代码实现
-
分组查询注意力(GroupedQueryAttention)是一种在大型语言模型中的多查询注意力(MQA)和多头注意力(MHA)之间进行插值的方法，它的目标是在保持MQA速度的同时...
- pytorch如何快速创建具有特殊意思的tensor张量?
-
专栏推荐正文我们通过值可以看到torch.empty并没有进行初始化创建tensor并进行随机初始化操作，常用rand/rand_like,randint正态分布（0，1）指定正态分布的均值还有方差i...
- 一周热门
-
-
Python实现人事自动打卡，再也不会被批评
-
Psutil + Flask + Pyecharts + Bootstrap 开发动态可视化系统监控
-
一个解决支持HTML/CSS/JS网页转PDF(高质量)的终极解决方案
-
再见Swagger UI 国人开源了一款超好用的 API 文档生成框架，真香
-
【验证码逆向专栏】vaptcha 手势验证码逆向分析
-
网页转成pdf文件的经验分享 网页转成pdf文件的经验分享怎么弄
-
C++ std::vector 简介
-
python使用fitz模块提取pdf中的图片
-
《人人译客》如何规划你的移动电商网站(2)
-
Jupyterhub安装教程 jupyter怎么安装包
-
- 最近发表
-
- 深入解析 MySQL 8.0 JSON 相关函数:解锁数据存储的无限可能
- MySQL的Json类型个人用法详解（mysql json类型对应java什么类型）
- MySQL的json查询之json_array（mysql json_search）
- 头条创作挑战赛#一、LSTM 原理 长短期记忆网络
- TensorBoard最全使用教程:看这篇就够了
- 图神经网络版本的Kolmogorov Arnold(KAN)代码实现和效果对比
- kornia，一个实用的 Python 库!（python kkb_tools）
- 图像分割掩码标注转YOLO多边形标注
- [python] 向量检索库Faiss使用指北
- 如何把未量化的 70B 大模型加载到笔记本电脑上运行?
- 标签列表
-
- 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)
- table.render (33)
- uniapp textarea (33)
- python判断元素在不在列表里 (34)
- python 字典删除元素 (34)
- react-admin (33)
- vscode切换git分支 (35)
- vscode美化代码 (33)
- python bytes转16进制 (35)