-
轻松学会jQuery选择器的用法
⛳️ 选择器
本篇重点讲解jQuery中丰富的选择器，以及他们的基本用法。CSS的选择器均可以用jQuery的$进行选择，部分浏览器对CSS3的选择器支持不全，可以用jQuery作为补充，所以本篇重点介绍jQuery扩展的选择器。✨ 属性选择器
属性选择器的语法是在标记的后面用方括号[和]添加相关的属性，然后赋予其不同的逻辑关系。jQuery中的属性选择器的用法如下：
属性选择器 说明 E.C 选中所有名称为E的标记，并且属性类别为C；如果去掉E，就是属性选择器.C E#I 选中所有名称为E的标记，并且id为I；如果去掉E，就是id选择器#I E[A] 选中所有名称为E的标记，并且设置了属性A E[A=V] 选中所有名称为E的标记，并且设置了属性A的值为V E[A^=V] 选中所有名称为E的标记，并且设置了属性A的值以V开头 E[A$=V] 选中所有名称为E的标记，并且设置了属性A的值以V结尾 E[A*=V] 选中所有名称为E的标记，并且设置了属性A的值中包含V 【1】追加、移除和切换样式
追加用法：$(‘p’).addClass(‘test’);
移除用法：$(‘p’).removeClass(‘demo’);
备注：p为标记，test和demo为标记的class属性值。
DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>追加和移除样式title> <style> .demo{ color: #f00; font-size: 30px; } .test{ background-color: #ccc; border: 1px solid #00f; border-radius: 10px; } style> <script src="js/jQuery-3.6.1.js">script> head> <body> <p class="demo">段落标签p> <button>追加样式button> <button>移除样式button> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
效果展示：
以上代码定义了HTML框架，以及相关的CSS类别，供测试使用，此时的显示效果是点击后无任何反应。
如果希望在页面中选择设置了demo属性的标记，并给标记添加或者移除某个样式，可以使用如下方法实现。
DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>追加和移除样式title> <style> .demo{ color: #f00; font-size: 30px; } .test{ background-color: #ccc; border: 1px solid #00f; border-radius: 10px; } style> <script src="js/jQuery-3.6.1.js">script> head> <body> <p class="demo">段落标签p> <button>追加样式button> <button>移除样式button> body> <script> $(function(){ //获取添加样式的按钮，并添加点击事件 $('button:first').click(function(){ $('p').addClass('test'); }); //获取添加样式的按钮，并添加点击事件 $('button:last').click(function(){ $('p').removeClass('demo'); }); }); script> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
效果展示：
不管是追加还是移除，在实际操作中，都不便于具体得使用逻辑，我们大多数使用逻辑都是喜欢点击一个按钮能喜欢两种样式的切换，所以有toggleClass()方法帮我们实现切换样式的需求。切换用法：$(‘p’).toggleClass(‘demo’);
DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>切换样式title> <script src="js/jQuery-3.6.1.js">script> <style> .demo{ color: #f00; font-size: 36px; background-color: #ccc; } style> head> <body> <p>段落标签p> <button>切换样式button> body> <script> $(function(){ $('button').click(function(){ $('p').toggleClass('demo'); }); }); script> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
运行效果：
【2】根据属性值添加样式案例原始代码：
DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>title> <script src="js/jQuery-3.6.1.js">script> <style type="text/css"> a{ text-decoration: none; color: #000; } .myClass{ /* 设定某个CSS类别 */ background-color: #d0baba; color: #5f0000; text-decoration: underline; } style> head> <body> <ul> <li><a href="http://www.artech.com">信息列表a> <ul> <li><a href="https://***.sina.com.cn/">新浪a>li> <li><a href="https://***.baidu.com/" title="百度">百度a>li> <li><a href="https://***.qq.com/">腾讯a>li> <li><a href="https://***.google.cn/" title="谷歌">谷歌a>li> ul> li> ul> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
原始代码运行效果：
如果希望在页面中选择设置了title属性的标记，并给这些超链接添加myClass样式，则可以使用如下代码：
<script> $(function(){ $('a[title]').addClass('myClass'); }); script>- 1
- 2
- 3
- 4
- 5
运行效果：
如果希望根据属性值进行判断，例如href属性值为https://***.baidu.com/的超链接添加myClass样式，则可以用如下代码：
<script> $(function() { $("a[href='https://***.baidu.com/']").addClass("myClass"); }); script>- 1
- 2
- 3
- 4
- 5
运行效果：
以上两种比较简单的属性选择器，jQuery还可以根据属性值的某一部分进行匹配，例如下面代码选中的href属性值以http://开头的所有超链接。<script> $(function() { $("a[href^='http://']").addClass("myClass"); }); script>- 1
- 2
- 3
- 4
- 5
运行效果：
既然可以根据属性值的开头来匹配选择，自然也可以根据属性值的结尾$=来匹配选择，如下代码可以选中href属性值以cn/结尾的超链接集合，这种方法通常用于选取网站中的某些资源，例如所有的.jpg图片、所有的.pdf文件等。<script> $(function() { $("a[href$='cn/']").addClass("myClass"); }); script>- 1
- 2
- 3
- 4
- 5
运行结果：
另外，还可以利用*=进行任意匹配，例如下面的代码选中href属性值中包含字符串com的所有超链接，并添加样式：<script> $(function() { $("a[href*='com']").addClass("myClass"); }); script>- 1
- 2
- 3
- 4
- 5
运行效果：
✨ 包含选择器
jQuery中还提供了包含选择器，用于选择包含某种特殊标记的元素。
包含选择器 说明 E：has(F) 选中所有名称为E的标记，并且该标记包含F标记 同样采用上述例子中的HTML框架，下面的代码表示选中包含超链接的所有li标记：
<script> $(function() { $("ul li ul li:has(a)").addClass("myClass"); }); script>- 1
- 2
- 3
- 4
- 5
运行效果：
✨ 位置选择器
CSS3中还允许用过标记所处的位置来对其进行选择，这里的位置是指元素在DOM中所处的位置。页面中几乎所有的标记都可以运用位置选择器，下面的例子展示了jQuery中位置选择器的使用。
位置选择器 说明 :first 获取第一个元素 :last 获取最后一个元素 :odd 匹配所有索引值为奇数的元素，从0 开始计数 :even 匹配所有索引值为偶数的元素，从0 开始计数 :eq(n) 匹配一个给定索引值的元素 :gt(n) 匹配所有大于给定索引值的元素 :lt(n) 匹配所有小于给定索引值的元素 :first-child 匹配第一个子元素 :last-child 匹配最后一个子元素 :only-child 如果某个元素是父元素中唯一的子元素，将会被匹配 :nth-child(n) 第n个元素 :nth-child(odd/even) 所有奇数号或者偶数号的子元素 :nth-child(xn+y) 利用公式计算子元素的位置 注意：nth-child()选择器编号是从1开始，而其他选择器从0开始。
原始案例代码：
DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>title> <script src="js/jQuery-3.6.1.js">script> <style> div{ font-size: 12px; border:1px solid #003a75; margin: 5px; } p{ margin: 0; padding: 4px 10px; } .myClass{ /* 设定某个CSS类别 */ color: beige; background-color: #003a75; text-decoration: underline; } style> head> <body> <div> <p>1.大礼堂p> <p>2.清华学堂p> div> <div> <p>3.图书馆p> div> <div> <p>4.紫荆公寓p> <p>5.C楼p> <p>6.清清地下p> div> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
原始代码运行效果：
如果希望在页面中选择每个div块的第一个p标记，则可以通过：first-child来选择，代码如下：<script> $(function(){ $('p:first-child').addClass('myClass'); }); script>- 1
- 2
- 3
- 4
- 5
运行效果：
如果希望在页面中选择第n个p标记，则可以通过：:eq(n-1)来选择，代码如下：<script> $(function(){ $('p:eq(3)').addClass('myClass'); }); script>- 1
- 2
- 3
- 4
- 5
运行效果：
✨ 过滤选择器
除了CSS3中的一些选择器，jQuery也提供了很多自定义的过滤选择器，用来处理更复杂的选择问题。例如很多时候希望知道用户所勾选的多选项，如果通过属性的值来判断，那么只能获得初始状态下的勾选情况。
过滤选择器 说明 :animated 选择所有处于动画中的元素 :button 选择所有按钮 :checkbox 选择所有多选项 :contains(foo) 选择所有包含文本foo的元素 :disabled 选择页面中被禁用的元素 :enabled 选择页面中没有被禁用的元素 :file 选择上传文件的元素 :header 选择所有标题元素 :hidden 选择页面中被隐藏的元素 :image 选择图片提交按钮 :input 选择表单元素 :not(filter) 反向选择 :parent 选择所有拥有子元素（包括文本）的元素，空元素被排除 :password 选择密码框 :radio 选择单选框 :reset 选择重置按钮 :selected 选择下拉菜单中被选中的项 :submit 选择提交按钮 :text 选择文本输入框 :visible 选择页面中所有可见元素 案例代码：
DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>title> <script src="js/jQuery-3.6.1.js">script> <style type="text/css"> form{ font-size:12px; margin:0; padding:0; } input .btn{ border:1px solid #005079; color: #005079; font-family: Arial, Helvetica, sans-serif; font-size: 12px; } .myClass+label{ background-color: #F00; text-decoration: underline; color: #fff; } style> head> <body> <form name="myForm"> <input type="checkbox" name="sports" id="football"><label for="football">足球label><br> <input type="checkbox" name="sports" id="basketball"><label for="basketball">篮球label><br> <input type="checkbox" name="sports" id="volleyball"><label for="volleyball">排球label><br> <br><input type="button" value="Show Checked" onclick="ShowChecked('sports')" class="btn"> form> body> <script> function ShowChecked(oCheckBox){ //使用：checked过滤出被用户选中的复选框 $('input[name='+oCheckBox+']:checked').addClass('myClass'); } script> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
运行效果：
以上代码中有3个复选框，通过jQuery的过滤器:checked便可以很容易地筛选出用户选中的复选项，并赋予其特殊的CSS样式。✨ 反向选择器
上述过滤选择器中的:not(filter)选择器可以尽享反向选择，其中filter参数可以是任意的其它过滤选择器，例如下面的代码表示input标记中所有非radio元素：
input:not(:radio)反向选择器也可以使用链式编写方式，例如：
$(‘:input:not:(:checkbox):not(:radio)’).addClass(‘myClass’);
表示所有表单元素中（input、select、textarea或button）非checkbox和非radio的元素，这里需要注意input与:input的区别。此外，在:not(filter)中，filter参数必须是过滤选择器，而不能是其它选择器。下面的代码表示的是典型的错误写法：
$(‘div:not(p:hidden)’);正确写法为：
$(‘div p:not(:hidden)’);⛳️ 快速投票
-
相关阅读:
Machine learning week 10(Andrew Ng)
ESP32网络开发实例-TCP服务器数据传输
2022-30周 项目问题整理
发布订阅者设计与观察者模式
AI智能语音机器人的优势
3、AWS SDK for Go使用
CSP 2021 入门级第一轮
计算机保研er历程分享（浙软、厦大、华师、东南网安、东北、西电、中南......）
基于Hadoop协同过滤的电子商务商品推荐（购买组合）系统
Minio + Nginx 实现静态资源对外访问
- 原文地址：https://blog.csdn.net/hh867308122/article/details/127877455