04- jQuery 选择器大全教程收藏备用_jquery mobile 曾庆林

于 2024-04-26 16:01:30 发布
阅读量826 收藏 13
点赞数 26
分类专栏： 2024年程序员学习 文章标签： python
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2401_84572577/article/details/138221773
版权
本文详细介绍了jQuery的选择器优势，包括基本选择器（如#id,.class,div等）、层次选择器（如>E1,E1+E2,E1~E2）以及各种过滤选择器（如内容过滤、可见性过滤和属性过滤），并通过实例展示了如何在实际项目中应用这些选择器进行元素操作。
摘要由CSDN通过智能技术生成

jQuery 基本选择器&层次选择器

作者：曾庆林

jQuery选择器的优势
  • 写法简单
  • 支持CSS1至CSS3选择器
  • 完善的处理机制
CSS选择器回顾
选择器语法
ID选择器#ID{CSS规则}
类选择器.className{CSS规则}
分组选择器E1,E2,E3{CSS规则}
包含选择器E F{CSS规则}
通配符选择器*{CSS规则}
jQuery选择器的分类
  1. 基本选择器
  2. 层次选择器
  3. 过滤选择器
    • 基本过滤选择器
    • 内容过滤选择器
    • 可见性过滤选择器
    • 属性过滤选择器
    • 子元素过滤选择器
    • 表单对象属性过滤选择器
  4. 表单选择器
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中的伪类选择器语法相同，即过滤选择器都是以冒号:开头。

过滤选择器分类：
  • 基本过滤选择器
  • 内容过滤选择器
  • 可见性过滤选择器
  • 属性过滤选择器
  • 子元素过滤选择器
  • 表单对象属性过滤选择器
基本过滤选择器
选择器描述返回示例
:first选择第1个元素单个元素$(“div:first”)选择第1个div元素
:last选择最后1个元素单个元素$(“div:last”)选择最后1个div元素
:not(E1)去除所有E1选择器匹配的元素集合元素$(“input:not(.my)”)选择class不是.my的所有input元素
:even选择索引是偶数的所有元素，索引从0开始集合元素$(“tr:even”)选择表格中所有偶数的行
:odd选择索引是奇数的所有元素，索引从0开始集合元素$(“tr:odd”)选择表格中所有奇数的行
:eq(index)选择索引值是index的元素，index从0开始单个元素$(“tr:eq(1)”)选择表格行索引等于1的行
:gt(index)选择索引值大于index的元素,index从0开始集合元素$(“tr:gt(1) ”)选择表格行索引大于1的行
:lt(index)选择索引值小于index的元素,index从0开始集合元素$(“tr:lt(1)”)选择表格行索引小于1的行
:header所取所有的标题元素,h1~h6集合元素$(“:header”)选择网页中所有的,…
:animated选择当前正在执行动画的所有元素集合元素$(“div:animated”)选择正在执行动画的div元素
内容过滤选择器
选择器描述返回值示例
: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切换 可见过滤

思路

单击第几个，显示第几个，以前显示的隐藏

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>

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;}

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");
	
	})
})

完整的示例


<!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>

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>

js

$(function(){
	$("a[href$=html]").addClass("html");
	$("a[href$=txt]").addClass("txt");
	$("a[href^=./]").addClass("fl");
	
})

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;}

过滤选择器-子元素过滤

作者：曾庆林

选择器描述返回示例
: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开始
表单对象属性过滤选择器
选择器描述返回示例
: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”)
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入门 感谢关注

IT入门 感谢关注

练习地址： www.520mg.com/it

一、Python所有方向的学习路线

Python所有方向的技术点做的整理，形成各个领域的知识点汇总，它的用处就在于，你可以按照下面的知识点去找对应的学习资源，保证自己学得较为全面。

img
img

二、Python必备开发工具

工具都帮大家整理好了，安装就可直接上手！img

三、最新Python学习笔记

当我学到一定基础，有自己的理解能力的时候，会去阅读一些前辈整理的书籍或者手写的笔记资料，这些笔记详细记载了他们对一些技术点的理解，这些理解是比较独到，可以学到不一样的思路。

img

四、Python视频合集

观看全面零基础学习视频，看视频学习是最快捷也是最有效果的方式，跟着视频中老师的思路，从基础到深入，还是很容易入门的。

img

五、实战案例

纸上得来终觉浅，要学会跟着视频一起敲，要动手实操，才能将自己的所学运用到实际当中去，这时候可以搞点实战案例来学习。img

六、面试宝典

在这里插入图片描述

在这里插入图片描述

简历模板在这里插入图片描述

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化学习资料的朋友，可以戳这里无偿获取

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

2401_84572577
关注
  • 26
    点赞
  • 踩
  • 13
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值