热门标签
热门文章
- 1程序人生，由“小作文”事件想到的_计心是小作文事件
- 2微信小程序中如何调用本地的接口_微信小程序如何调用本地接口
- 3工具篇·PIP和GIT_pip git
- 4单机模拟分布式MINIO（阿里云）_minio 2024-03-15t01-07-19z版本端口配置_minio 2024 使用教程
- 5springboot3使用自定义注解+AOP+redis优雅实现防重复提交_@before("@annotation(com.tongchuang.human.api.avoi
- 6五. Apache Griffin UI界面化操作_apache griffin操作手册
- 7微信小程序童装服饰在线商城购买平台+后台管理系统SSM-JAVA【数据库设计、论文、源码、开题报告】_微信小程序购物系统小程序+后台管理系统
- 8SpringBoot学习之路---使用RabbitTemplate操作RabbitMq_rabbittemplate用法
- 9git 命令之添加app-debug.apk文件到github仓库_github 上传 apk
- 10微信小程序的校园服务系统+后端用Spring Boot+MyBatis +MYSQL_学生宿舍管理小程序源码
当前位置: article > 正文
04- jQuery 选择器大全教程收藏备用_jquery mobile 曾庆林
作者：小丑西瓜9 | 2024-05-15 17:53:28
赞
踩
jquery mobile 曾庆林
jQuery 基本选择器&层次选择器
作者：曾庆林
jQuery选择器的优势
- 写法简单
- 支持CSS1至CSS3选择器
- 完善的处理机制
CSS选择器回顾
| 选择器 | 语法 |
|---|---|
| ID选择器 | #ID{CSS规则} |
| 类选择器 | .className{CSS规则} |
| 分组选择器 | E1,E2,E3{CSS规则} |
| 包含选择器 | E F{CSS规则} |
| 通配符选择器 | *{CSS规则} |
jQuery选择器的分类
- 基本选择器
- 层次选择器
- 过滤选择器
- 基本过滤选择器
- 内容过滤选择器
- 可见性过滤选择器
- 属性过滤选择器
- 子元素过滤选择器
- 表单对象属性过滤选择器
- 表单选择器
jQuery基本选择器
| 选择器 1 | 描述 | 返回 | 示例 |
|---|---|---|---|
| #id | 根据指定的id匹配元素 | 单个元素 | $(“#hel”)选择id=hel的元素 |
| .class | 根据类匹配元素 | 集合元素 | $(“.hel”)选择class=hel的元素 |
| Element | 根据元素名匹配元素 | 集合元素 | $(“div”)选择所有的div元素 |
| * | 匹配所有元素 | 集合元素 | $(“*”)选择所有元素 |
| E1,E2,E3 | 分组匹配元素 | 集合元素 | $(“div,span,.hotclass”)选择所有div，span,和class为hotcalss的元素 |
层次选中器
| 选择器 | 描述 | 返回值 | 示例 |
|---|---|---|---|
| $(“E1 E2”) | 选择E1下所有E2 | 集合元素 | $“div span”)选择div下所有span |
| $(“E1> E2”) | 选择E1下的子E2,不包含E2下满足的元素 | 集合元素 | $("div > span”)选择div下的span元素，不包含span下的span元素 |
| $(“E1+ E2”) | 选择E1后紧相邻的E2 | 集合元素 | $(".one + div")选择class=one的下一个div元素 |
| $(“E1~ E2”) | 选择E1之后的所有E2 | 集合元素 | $("#one ~ div")选择id为one后的所有div元素 |
补充说明：
(
"
E
1
+
E
2
"
)
可
以
用
("E1 + E2")可以用
("E1+E2")可以用(E1).next(E2)代替
(
"
E
1
E
2
"
)
可
以
用
("E1 ~ E2")可以用
("E1 E2")可以用(E1).nextAll(E2)代替
jQuery 过滤选择器
过滤选择器主要是通过特定的过滤规则来筛选出需要的DOM元素，过滤规则与CSS中的伪类选择器语法相同，即过滤选择器都是以冒号:开头。
过滤选择器分类：
- 基本过滤选择器
- 内容过滤选择器
- 可见性过滤选择器
- 属性过滤选择器
- 子元素过滤选择器
- 表单对象属性过滤选择器
基本过滤选择器
内容过滤选择器
| 选择器 | 描述 | 返回值 | 示例 |
|---|---|---|---|
| :contains(text) | 选择含有text文本内容的元素 | 集合元素 | $(“div:contains(‘我’)”)选择内容里包含我的所有div |
| :empty | 选择不包含子元素或文本的空元素 | 集合元素 | $(“div:empty”)选择不包含子元素（含文本）的所有div元素 |
| :has(E1) | 选择包含有(E1选择器匹配的元素)的所有元素 | 集合元素 | $(“div:has§”)选择含有p元素的所有div元素 |
| :parent | 选择含有子元素或文本的元素 | 集合元素 | $(“div:parent”)选择拥有子元素（包含文本）的所有div元素 |
可见性过滤选择器
| 选择器 | 描述 | 返回值 | 示例 |
|---|---|---|---|
| :hidden | 选择所有不可见元素 | 集合元素 | $(“:hidden”)选择所有不可见元素，包括：,
和
等，如果只选择元素，则可以使用 $(“input:hidden”)
|
| :visible | 选择所有可见元素 | 集合元素 | $(“div:visible”)选取所有可见的div元素 |
案例-tab切换 可见过滤
思路
单击第几个，显示第几个，以前显示的隐藏
- 1
html结构
<div id="tab1" class="tabs">
<ul>
<li class="tab-title active">li1</li>
<li class="tab-title">li2</li>
<li class="tab-title">li3</li>
</ul>
<div class="tab-content" style="display: block;">内容1</div>
<div class="tab-content" >内容2</div>
<div class="tab-content">内容3</div>
</div>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
css 部分
* { margin: 0; padding: 0; } body { padding: 50px; } ul { list-style: none; } .tabs .tab-title { height: 35px; line-height: 35px; border: 1px solid #aaa; padding-left: 15px; padding-right: 15px; float: left; margin-right: 15px; position: relative; z-index: 10; } .tabs .active{border-bottom-color:#fff; color: #F80;} .tabs .tab-content { clear: both; border: 1px solid #aaa; padding: 25px; width: 450px; height: 300px; display: none; position: relative; top: -1px; z-index: 0; } #tab2 .tab-content{width: 800px;}
- 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
js写法
//[1] 单击第几个，显示第几个，以前显示的隐藏
$(function(){
$(".tab-title").click(function(){
//以前显示的现在隐藏
$(".tab-content:visible").hide();
// 求出是第几个
var num=$(".tab-title").index($(this));
$(".tab-content:eq("+num+")").show();
//之前有.active li 去掉active
//当前li 添加actvie
$(".active").removeClass("active");
$(this).addClass("active");
})
})
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
完整的示例
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>jquery选择器</title> <style> * { margin: 0; padding: 0; } body { padding: 50px; } ul { list-style: none; } .tabs .tab-title { height: 35px; line-height: 35px; border: 1px solid #aaa; padding-left: 15px; padding-right: 15px; float: left; margin-right: 15px; position: relative; z-index: 10; } .tabs .active{border-bottom-color:#fff; color: #F80;} .tabs .tab-content { clear: both; border: 1px solid #aaa; padding: 25px; width: 450px; height: 300px; display: none; position: relative; top: -1px; z-index: 0; } #tab2 .tab-content{width: 800px;} </style> </head> <body> <div id="tab1" class="tabs"> <ul> <li class="tab-title active">li1</li> <li class="tab-title">li2</li> <li class="tab-title">li3</li> </ul> <div class="tab-content" style="display: block;">内容1</div> <div class="tab-content" >内容2</div> <div class="tab-content">内容3</div> </div> <script src="js/jquery-1.4.2.min.js"></script> <script> //[1] 单击第几个，显示第几个，以前显示的隐藏 $(function(){ $(".tab-title").click(function(){ //以前显示的现在隐藏 $(".tab-content:visible").hide(); // 求出是第几个 var num=$(".tab-title").index($(this)); $(".tab-content:eq("+num+")").show(); //之前有.active li 去掉active //当前li 添加actvie $(".active").removeClass("active"); $(this).addClass("active"); }) }) </script> </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
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
jquery过滤选择器-属性
属性过滤选择器
| 选择器 | 描述 | 返回 | 示例 |
|---|---|---|---|
| [attribute] | 选择拥有此属性的元素 | 集合元素 | $(“div[id]”)选择拥有id属性的div元素 |
| [attribute=value] | 选择属性值为value的元素 | 集合元素 | $(“div[id=test]”)选择id属性值为test的div元素 |
| [attribute!=value] | 选择属性值不为value的元素 | 集合元素 | $(“div[id!=test]”)选择id属性值不为test的div元素,没有id属性的div也会被选择 |
| [attribute^=value] | 选择属性值以value开始的元素 | 集合元素 | $(“div[id^=test]”)选择id属性值以test开始的所有div元素 |
| [attribute$=value] | 选择属性以value值结束的元素 | 集合元素 | ( “ d i v [ i d (“div[id (“div[id=test]”)选择id属性值以test结束的所有div元素 |
| [attribute*=value] | 选择属性中含有value的元素 | 集合元素 | $(“div[id*=test]”)选择id属性值中含有test的所有div元素 |
| [A1][A2]…A[N] | 用属性选 | 择器合并成一个复合属性选择器。满足多个条件。 | 集合元素 |
案例根据不同的 a链接添加不同的图标背景
html
<h3>jquery 属性过虑资料下载</h3>
<ul>
<li><a href="./课件" target="_blank" > 课件</a></li>
<li><a href="精通JavaScript.pdf" target="_blank"> 参考书</a></li>
<li><a href="课件/第二章jQuery选择器.pptx" target="_blank">第二章jQuery选择器</a></li>
<li><a href="filter.txt" target="_blank" >选择器总结</a></li>
<li><a href="filter.html" target="_blank" >案例1</a></li>
<li><a href="taotest2.html" target="_blank">案例2</a></li>
</ul>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
js
$(function(){
$("a[href$=html]").addClass("html");
$("a[href$=txt]").addClass("txt");
$("a[href^=./]").addClass("fl");
})
- 1
- 2
- 3
- 4
- 5
- 6
- 7
css
ul,li,a{ margin:0; padding:0; list-style:none; text-decoration:none; color:#444;} a:visited{color:#444; } a:hover{ color:#000;} li{ height:30px; line-height:30px; border-bottom:1px dashed #444; width:200px; } li a{ display:block; height:30px; line-height:30px; padding-left:25px; background-image:url(pkg_comm_z527307bd.png); background-repeat:no-repeat; } .pdf{ background-position:0 -2px;} .fl{ background-position:0 -255px;} .pptx{ background-position:0 -440px;} .txt{ background-position:0 -160px;} .html{background-position:0 -347px;}
- 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
过滤选择器-子元素过滤
作者：曾庆林
| 选择器 | 描述 | 返回 | 示例 |
|---|---|---|---|
| :nth-child(index/even/odd/equation) | 选取每个父元素下的第index个子元素或奇偶元素.(index从1开始） | 集合元素 | :eq(index)只匹配一个元素,而:nth-child(index)将为每一个父元素匹配子元素,并且:nth-child(index)的index从1开始,而:eq(index)的index从0开始. |
| :first-child | 选择每个父元素的第1个子元素 | 集合元 | :first只选择单个元素,而:first-child将为每个父元素匹配第1个子元素如:$(“ul li:first-child”)选择每个ul下的第一个 |
| :last-child | 选取每个父元素的最后1个子元素 | 集合元素 | $(“ul li:last-child”)选择每个ul下的最后一个 |
:only-child | 如果某个元素是它父元素中惟一的子元素,那么将会被匹配.如果父元素中含有其他元素,则不会被匹配 | 集合元素 | $(“ul li:only-child”)在
|
:nth-child()选择器详细功能描述:
:nth-child(even) 能选择每个父元素下的索引值是偶数的元素
:nth-child(odd) 选择出每个父元素下的索引值是奇数的元素
:nth-child(2) 选取每个父元素下的索引值等于2的元素
:nth-child(3n) 能选出每个父元素下的索引值是3的倍数的元素,n从0开始
:nth-child(3n+1) 能选取每个父元素下的索引值是3n+1的元素.n从0开始
- 1
- 2
- 3
- 4
- 5
表单对象属性过滤选择器
| 选择器 | 描述 | 返回 | 示例 |
|---|---|---|---|
| :enabled | 选择所有可用元素 | 集合元素 | $(“#form1 :enabled”)选取id为form1的表单内的所有可用元素 |
| :disabled | 选择所有不可用元素 | 集合元素 | $(“#form1 :disabled”)选取id为form1的表单内所有不可用元素 |
| :checked | 选择忾有被选中的元素(单选框,复选框) | 集合元素 | $("input:checked")选择所有被选中的<input元素> |
:selected | 选择所有被选中的选项元素(下拉列表) | 集合元素 | $("select :selected")选取所有被选中的选项元素 |
jquery 表单选择器
表单选择器
| 选择器 | 描述 | 返回 | 示例 |
|---|---|---|---|
| :input | 匹配所有 元素 集合元素 | $(“:input”) 同描述 | |
| :text | 选择所有单行文本框 | 集合元素 | $(“:text”)匹配所有单行文本框 |
| :password | 选择所有密码框 | 集合元素 | $(“:password”) |
| :radio | 选择所有单选框 | 集合元素 | $(“:radio”) |
| :checkbox | 选择所有复选框 | 集合元素 | $(“:checkbox”) |
:submit | 匹配所有提交按钮 | 集合元素 | $(“:submit”) |
| :image | 匹配所有图像按钮 | 集合元素 | $(“:image”) |
| :reset | 匹配所有重置按钮 | 集合元素 | $(“:reset”) |
| :button | 匹配所有按钮 | 集合元素 | $(“:button”) |
| :file | 匹配所有文件域 | 集合元素 | $(“:file”) |
| :hidden | 匹配所有不可见元素 | 集合元素 | $(“:hidden”) |
选择器中的一些注意事项
选择器中包含空格
选择器中的空格是不容忽视的，多一个空格或少一个空格会得到截然不同的结果.
如:
$(“div:input”)
和
$(“div :input”)
- 1
- 2
- 3
- 4
jQuery中的方法初探
| 方法 | 功能描述 |
|---|---|
| show() | 显示隐藏的匹配元素，可带整数参数表示时间，单位是毫秒 |
| hide() | 隐藏显示的匹配元素，可带整数参数表示时间，单位是毫秒 |
| css(name,value) | 给匹配的元素设置css样式 |
| text(string) | 获取或设置匹配元素的文本内容,不包含html标签 |
| filter(expr) | 筛选出与指定表达式匹配的元素集合，其中expr可以是多个选择器的组合。 |
| addClass(class) | 为匹配的元素增加一个 类样式 |
| removeClass(class) | 为匹配的元素移除一个类样式 |
| html() | 获取或设置匹配元素的内容，包含html标签 |
| siblings() | $(“.abc”).siblings()匹配得到class=abc的其它兄弟元素 |
IT入门 感谢关注
练习地址： www.520mg.com/it
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小丑西瓜9/article/detail/574255
推荐阅读
相关标签
