jQuery 选择器
moboyou 2025-06-20 18:59 13 浏览
本节我们来学习 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/
相关推荐
- php宝塔搭建免登录积分商城系统php源码
-
大家好啊，欢迎来到web测评。本期给大家带来一套php开发的免登录积分商城系统php源码，上次是谁要的系统项目啊，帮你找到了，还说不会搭建，让我帮忙录制一期教程，趁着今天有空，简单的录制测试了一下，部...
- 宝塔docker搭建一键部署DooTask开源任务管理工具php源码pro版
-
大家好啊，我是测评君，欢迎来到web测评，本期给大家分享一下怎么在宝塔使用docker管理器一键部署DooTask开源项目任务管理工具源码（pro版），这是一个朋友分享推荐的，让我录制一期宝塔搭建教程...
- 在线考试教学系统平台源码/视频教学系统/在线考试系统PHP源码
-
在线考试教学系统平台系统源码，视频教学系统PHP源码，在线考试系统PHP源码。安装说明：1、部署好网站环境：php5.6+mysql2、将源码传至网站根目录，php源码用二进制上传，或者上传压缩包在空...
- php宝塔搭建实战宏仔杂货商城小店系统php源码
-
大家好啊，欢迎来到web测评。本期给大家带来一套php开发的宏仔杂货商城小店系统源码，上次是谁要的系统项目啊，帮你找到了，还说不会搭建，让我帮忙录制一期教程，趁着今天有空，简单的录制测试了一下，部署方...
- 分析和解析PHP代码的7大工具
-
PHP已成为时下最热门的编程语言之一，然而却有许多PHP程序员苦恼找不到合适的工具来帮助自己分析和解析PHP代码。今天小编就为大家介绍几个非常不错的工具，来帮助程序员们提高自己的工作效率，一起来看看吧...
- php宝塔搭建部署小闪三消游戏PHP源码带后台
-
大家好啊，欢迎来到web测评。本期给大家带来一套php开发的小闪三消游戏PHP源码带后台，上次是谁要的系统项目啊，帮你找到了，还说不会搭建，让我帮忙录制一期教程，趁着今天有空，简单的录制测试了一下，部...
- php宝塔搭建部署昼夜双色WordPress导航模板php源码
-
大家好啊，欢迎来到web测评。本期给大家带来一套php开发的昼夜双色WordPress导航模板php源码，上次是谁要的系统项目啊，帮你找到了，还说不会搭建，让我帮忙录制一期教程，趁着今天有空，简单的录...
- php宝塔搭建实战可乐实物微商城系统php源码
-
大家好啊，欢迎来到web测评。本期给大家带来一套php开发的可乐实物微商城系统php源码php源码，上次是谁要的系统项目啊，帮你找到了，还说不会搭建，让我帮忙录制一期教程，趁着今天有空，简单的录制测试...
- php宝塔搭建实战wordpress英文国外资讯整站php源码
-
大家好啊，欢迎来到web测评。本期给大家带来一套php开发的国外财经资讯商业新闻整站php源码，具有全自动采集发布广告联盟网站的特性，是wordpress二次开发的。上次是谁要的系统项目啊，帮你找到了...
- php宝塔搭建实战小霸王站群池管理系统php源码
-
大家好啊，欢迎来到web测评。本期给大家带来一套php开发小霸王站群池管理系统php源码，上次是谁要的系统项目啊，帮你找到了，还说不会搭建，让我帮忙录制一期教程，趁着今天有空，简单的录制测试了一下，部...
- 完美可用的全媒体广告精准营销服务平台PHP源码
-
今天测试了一套php开发的企业网站展示平台，还是非常不错的，下面来给大家说一下这套系统。1、系统架构这是一套基于ThinkPHP框架开发的HTML5响应式全媒体广告精准营销服务平台PHP源码。现在基于...
- php宝塔搭建实战红蓝两款导航网站自动收录审核检测友链php源码
-
大家好啊，欢迎来到web测评。本期给大家带来一套php开发的php宝塔搭建实战红蓝两款导航网站自动收录审核检测友链php源码。上次是谁要的系统项目啊，帮你找到了，还说不会搭建，让我帮忙录制一期教程，趁...
- php宝塔搭建部署实战抽奖系统开源php源码
-
大家好啊，我是测评君，欢迎来到web测评。本期给大家带来一套抽奖系统开源php源码。感兴趣的朋友可以自行下载学习。技术架构PHP5.4+nginx+mysql5.7+JS+CSS+...
- PHP餐饮点餐外卖系统源码/H5在线点餐系统/支持多餐桌生成
-
搭建一条龙包服务器域名168元安装教程1.获取到项目源码2.配置服务器环境3.部署到服务器（php5.5+mysql5.6/5.7+apache（nginx）,windows,linu...
- 一周热门
- 最近发表
- 标签列表
-
- curseforge官网网址 (16)
- 外键约束 oracle (36)
- oracle的row number (32)
- 唯一索引 oracle (34)
- oracle in 表变量 (28)
- oracle导出dmp导出 (28)
- oracle 数据导出导入 (16)
- oracle两个表 (20)
- oracle 数据库 字符集 (20)
- oracle修改端口 (15)
- oracle安装补丁 (19)
- matlab归一化 (16)
- 共轭梯度法matlab (16)
- matlab化简多项式 (20)
- 多线程的创建方式 (29)
- 多线程 python (30)
- java多线程并发处理 (32)
- 宏程序代码一览表 (35)
- c++需要学多久 (25)
- c语言编程小知识大全 (17)
- css class选择器用法 (25)
- css样式引入 (30)
- html5和css3新特性 (19)
- css教程文字移动 (33)
- php简单源码 (36)