web_day10_jQuery选择器

其他 2018-10-20 22:11:18 阅读次数: 0
版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_35537301/article/details/83047053

1、基本选择器

选择器 说明
id选择器 $("#id")
class选择器 $(".class")
标签选择器 $("标签名")
* $("*")
a,b,c $("span,#two") 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>基本选择器</title>
		<!--   引入jQuery -->
		<script src="../js/jquery-1.11.0.min.js"></script>
		<script src="../js/assist.js"></script>
		<link rel="stylesheet" type="text/css" href="../css/style.css" />
		<script type="text/javascript">
			$(function() {
				$("#btn1").click(function() {
					$("#one").css("background-color", "antiquewhite");
				});

				$("#btn2").click(function() {
					$(".mini").css("background-color", "red");
				});

				$("#btn3").click(function() {
					$("div").css("background-color", "aquamarine");
				});

				$("#btn4").click(function() {
					$("*").css("background-color", "aqua");
				});
				$("#btn5").click(function() {
					$("span,#two").css("background-color", "blueviolet");
				})
			});
		</script>
	</head>

	<body>
		<button id="reset">手动重置页面元素</button>
		<input type="checkbox" id="isreset" checked="checked" /><label for="isreset">点击下列按钮时先自动重置页面</label><br /><br />
		<h3>基本选择器.</h3>

		<!-- 控制按钮 -->
		<input type="button" value="选择 id为 one 的元素." id="btn1" />
		<input type="button" value="选择 class 为 mini 的所有元素." id="btn2" />
		<input type="button" value="选择 元素名是 div 的所有元素." id="btn3" />
		<input type="button" value="选择 所有的元素." id="btn4" />
		<input type="button" value="选择 所有的span元素和id为two的元素." id="btn5" />

		<br /><br />

		<!-- 测试的元素 -->
		<div class="one" id="one">
			id为one,class为one的div
			<div class="mini">class为mini</div>
		</div>

		<div class="one" id="two" title="test">
			id为two,class为one,title为test的div.
			<div class="mini" title="other">class为mini,title为other</div>
			<div class="mini" title="test">class为mini,title为test</div>
		</div>

		<div class="one">
			<div class="mini">class为mini</div>
			<div class="mini">class为mini</div>
			<div class="mini">class为mini</div>
			<div class="mini"></div>
		</div>

		<div class="one">
			<div class="mini">class为mini</div>
			<div class="mini">class为mini</div>
			<div class="mini">class为mini</div>
			<div class="mini" title="tesst">class为mini,title为tesst</div>
		</div>

		<div style="display:none;" class="none">style的display为"none"的div</div>

		<div class="hide">class为"hide"的div</div>

		<div>
			包含input的type为"hidden"的div<input type="hidden" size="8" />
		</div>

		<span id="mover">正在执行动画的span元素.</span>

	</body>

</html>

2、层次选择器

选择器 说明
$("a b") a的所有b后代
$("a>b") a的所有b孩子
$("a+b") a的下一个弟弟(大弟弟)
$("a~b") a的所有弟弟 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>02-层次选择器.html</title>
		<!--   引入jQuery -->
		<script src="../js/jquery-1.11.0.min.js"></script>
		<script src="../js/assist.js"></script>
		<link rel="stylesheet" type="text/css" href="../css/style.css" />
		<script type="text/javascript">
			$(function(){
				$("#btn1").click(function(){
					//选择 body内的所有div元素
					$("body div").css("background-color","#FFFFCC");
				});
				
				$("#btn2").click(function(){
					//选择 body内子元素是div的
					$("body>div").css("background-color","aqua");
				});
				
				$("#btn3").click(function(){
					//选择 id为one 的下一个div元素
					$("#one+div").css("background-color","aquamarine");
				});
				
				$("#btn4").click(function(){
					//选择 id为two的元素后面的所有div兄弟元素
					$("#two~div").css("background-color","blueviolet");
				})
			});
		</script>
	</head>

	<body>
		<h3>层次选择器.</h3>
		<button id="reset">手动重置页面元素</button>
		<input type="checkbox" id="isreset" checked="checked" /><label for="isreset">点击下列按钮时先自动重置页面</label><br /><br />

		<input type="button" value="选择 body内的所有div元素" id="btn1" />
		<input type="button" value="选择 body内子元素是div的" id="btn2" />
		<input type="button" value="选择 id为one 的下一个div元素" id="btn3" />
		<input type="button" value="选择 id为two的元素后面的所有div兄弟元素" id="btn4" />

		<br />
		<br />

		<!-- 测试的元素 -->
		<div class="one" id="one">
			id为one,class为one的div
			<div class="mini">class为mini</div>
		</div>

		<div class="one" id="two" title="test">
			id为two,class为one,title为test的div.
			<div class="mini" title="other">class为mini,title为other</div>
			<div class="mini" title="test">class为mini,title为test</div>
		</div>

		<div class="one">
			<div class="mini">class为mini</div>
			<div class="mini">class为mini</div>
			<div class="mini">class为mini</div>
			<div class="mini"></div>
		</div>

		<div class="one">
			<div class="mini">class为mini</div>
			<div class="mini">class为mini</div>
			<div class="mini">class为mini</div>
			<div class="mini" title="tesst">class为mini,title为tesst</div>
		</div>

		<div style="display:none;" class="none">style的display为"none"的div</div>

		<div class="hide">class为"hide"的div</div>

		<div>
			包含input的type为"hidden"的div<input type="hidden" size="8" />
		</div>

		<span id="mover">正在执行动画的span元素.</span>

	</body>

</html>

3、基本过滤选择器

选择器 说明
$("选择器:first") 第一个
$("选择器:last") 最后一个
$("选择器:even") 偶数
$("选择器:odd") 奇数
$("选择器:eq(index)") =index
$("选择器:gt(index)") >index
$("选择器:lt(index)") <index

4、内容过滤选择器

$("选择器a:has('选择器b')")

选择含有b的a元素

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>内容过滤选择器</title>
		<!--   引入jQuery -->
		<script src="../js/jquery-1.11.0.min.js"></script>
		<script src="../js/assist.js"></script>
		<link rel="stylesheet" type="text/css" href="../css/style.css" />
		<script type="text/javascript">
			$(function() {
				$("#btn1").click(function(){
					$("div:has('.mini')").css("background-color","#FFFF00");
				})
			});
		</script>
	</head>

	<body>
		<h3>内容过滤选择器.</h3>
		<button id="reset">手动重置页面元素</button>
		<input type="checkbox" id="isreset" checked="checked" /><label for="isreset">点击下列按钮时先自动重置页面</label><br /><br />

		<input type="button" value="选取含有class为mini元素 的div元素." id="btn1" />

		<br /><br />

		<!-- 测试的元素 -->
		<div class="one" id="one">
			id为one,class为one的div
			<div class="mini">class为mini</div>
		</div>

		<div class="one" id="two" title="test">
			id为two,class为one,title为test的div.
			<div class="mini" title="other">class为mini,title为other</div>
			<div class="mini" title="test">class为mini,title为test</div>
		</div>

		<div class="one">
			<div class="mini">class为mini</div>
			<div class="mini">class为mini</div>
			<div class="mini">class为mini</div>
			<div class="mini"></div>
		</div>

		<div class="one">
			<div class="mini">class为mini</div>
			<div class="mini">class为mini</div>
			<div class="mini">class为mini</div>
			<div class="mini" title="tesst">class为mini,title为tesst</div>
		</div>

		<div style="display:none;" class="none">style的display为"none"的div</div>

		<div class="hide">class为"hide"的div</div>

		<div>
			包含input的type为"hidden"的div<input type="hidden" size="8" />
		</div>

		<span id="mover">正在执行动画的span元素.</span>

	</body>

</html>

5、可见性选择器

选择器 说明
$("选择器:visible") 选择能够看见的元素
$("选择器:hidden") 选择异常的元素 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>可见性过滤选择器</title>
		<!--   引入jQuery -->
		<script src="../js/jquery-1.11.0.min.js"></script>
		<script src="../js/assist.js"></script>
		<link rel="stylesheet" type="text/css" href="../css/style.css" />
		<script type="text/javascript">
			$(function() {
				$("#b1").click(function(){
					$("div:visible").css("background-color","#FFFFCC");
				});
				
				$("#b2").click(function(){
					$("div:hidden").show(1000);
				});
			});
		</script>
	</head>

	<body>
		<h3>可见性过滤选择器.</h3>
		<button id="reset">手动重置页面元素</button>
		<input type="checkbox" id="isreset" checked="checked" /><label for="isreset">点击下列按钮时先自动重置页面</label>
		<br/><br/>
		<input type="button" value=" 选取所有可见的div元素" id="b1" />
		<input type="button" value=" 选取所有不可见的div元素, 利用 jQuery 中的 show() 方法将它们显示出来" id="b2" />

		<br /><br />

		<div class="one" id="one">
			id为one,class为one的div
			<div class="mini">class为mini</div>
		</div>

		<div class="one" id="two" title="test">
			id为two,class为one,title为test的div.
			<div class="mini" title="other">class为mini,title为other</div>
			<div class="mini" title="test">class为mini,title为test</div>
		</div>

		<div class="one">
			<div class="mini">class为mini</div>
			<div class="mini">class为mini</div>
			<div class="mini">class为mini</div>
			<div class="mini" title="tesst">class为mini,title为tesst</div>
		</div>

		<div style="display:none;" class="none">style的display为"none"的div</div>

		<div class="hide">class为"hide"的div</div>

	</body>

</html>

6、属性选择器

选择器 说明
$("选择器[属性]") 所有带有属性的元素
$("选择器[属性=属性值]") 匹配某一个属性的元素 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>属性选择器</title>
		<!--   引入jQuery -->
		<script src="../js/jquery-1.11.0.min.js"></script>
		<script src="../js/assist.js"></script>
		<link rel="stylesheet" type="text/css" href="../css/style.css" />
		<script type="text/javascript">
			$(function() {
				$("#btn1").click(function(){
					//选取含有 属性title 的div元素
					$("div[title]").css("background-color","#FFFFCC");
				});
				
				$("#btn2").click(function(){
					//选取 属性title值等于“test”的div元素
					$("div[title='test']").css("background-color","#FFFFCC");
				});
			});
		</script>

		<body>
			<button id="reset">手动重置页面元素</button>
			<input type="checkbox" id="isreset" checked="checked" /><label for="isreset">点击下列按钮时先自动重置页面</label>
			<h3> 属性选择器.</h3>

			<input type="button" value="选取含有 属性title 的div元素." id="btn1" />
			<input type="button" value="选取 属性title值等于“test”的div元素." id="btn2" />

			<br /><br />
			<div class="one" id="one">
				id为one,class为one的div
				<div class="mini">class为mini</div>
			</div>

			<div class="one" id="two" title="test">
				id为two,class为one,title为test的div.
				<div class="mini" title="other">class为mini,title为other</div>
				<div class="mini" title="test">class为mini,title为test</div>
			</div>

			<div class="one">
				<div class="mini">class为mini</div>
				<div class="mini">class为mini</div>
				<div class="mini">class为mini</div>
				<div class="mini"></div>
			</div>

			<div class="one">
				<div class="mini">class为mini</div>
				<div class="mini">class为mini</div>
				<div class="mini">class为mini</div>
				<div class="mini" title="tesst">class为mini,title为tesst</div>
			</div>

			<div style="display:none;" class="none">style的display为"none"的div</div>

			<div class="hide">class为"hide"的div</div>

			<div>
				包含input的type为"hidden"的div<input type="hidden" size="8" />
			</div>

		</body>

</html>

7、表单选择器(不常用)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>表单选择器</title>
		<!--   引入jQuery -->
		<script src="../js/jquery-1.11.0.min.js"></script>
		<script src="../js/assist.js"></script>
		<link rel="stylesheet" type="text/css" href="../css/style.css" />
		<script type="text/javascript">
			$(function() {
				$("#btn1").click(function(){
		 			//alert($("input").length);/14
		 			alert($(":input").length);//17
		 		})
			});
		</script>
	</head>

	<body>
		<input type="button" value="选取所有的表单子元素" id="btn1" /><br />

		<form id="form1" action="#">
			<input type="button" value="Button" /><br/>
			<input type="checkbox" name="c" />1<input type="checkbox" name="c" />2<input type="checkbox" name="c" />3<br/>
			<input type="file" /><br/>
			<input type="hidden" /><br/>
			<input type="image" src="1.jpg" /><br/>
			<input type="password" /><br/>
			<input type="radio" name="a" />1<input type="radio" name="a" />2<br/>
			<input type="reset" /><br/>
			<input type="submit" value="提交" /><br/>
			<input type="text" /><br/>
			<select>
				<option>Option</option>
			</select><br/>
			<textarea rows="5" cols="20"></textarea><br/>
			<button>Button</button><br/>
		</form>

		<div></div>
	</body>

</html>

8、表单属性选择器

选择器 说明
$(选择器:enabled) 可用
$(选择器:disabled) 不可用
$(选择器:checked) 选中   单选或者复选
$(选择器:selected) 选中   下拉选 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>表单对象属性过滤选择器</title>
		<!--   引入jQuery -->
		<script src="../js/jquery-1.11.0.min.js"></script>
		<script src="../js/assist.js"></script>
		<link rel="stylesheet" type="text/css" href="../css/style.css" />
		<script type="text/javascript">
			$(function() {
				//对表单内 可用input 赋值操作
				$("#btn1").click(function(){
					$("input:enabled").val("我是可用的");
				});
				
				//对表单内 不可用input赋值操作
				$("#btn2").click(function(){
					$("input:disabled").val("我是不可用的");
				});
				
				//获取多选框选中的个数
				$("#btn3").click(function(){
					alert($("input:checked").length);
				})
				
				//获取下拉框选中的个数
				$("#btn4").click(function(){
					alert($("option:selected").length);
				})
			});
		</script>
	</head>

	<body>
		<h3> 表单对象属性过滤选择器.</h3>
		<button type="reset">重置所有表单元素</button>
		<input type="checkbox" id="isreset" checked="checked" /><label for="isreset">点击下列按钮时先自动重置页面</label>
		<br /><br />
		<button id="btn1">对表单内 可用input赋值操作</button>
		<button id="btn2">对表单内 不可用input赋值操作</button>
		<button id="btn3">获取多选框选中的个数</button>
		<button id="btn4">获取下拉框选中的个数</button>

		<br /><br /> 可用元素：

		<input name="add" value="可用文本框" /> <br/> 不可用元素：
		<input name="email" disabled="disabled" value="不可用文本框" /><br/> 可用元素： <input name="che" value="可用文本框" /><br/> 不可用元素：
		<input name="name" disabled="disabled" value="不可用文本框" /><br/>
		<br/> 多选框：
		<br/>
		<input type="checkbox" name="newsletter" checked="checked" value="test1" />test1
		<input type="checkbox" name="newsletter" value="test2" />test2
		<input type="checkbox" name="newsletter" value="test3" />test3
		<input type="checkbox" name="newsletter" checked="checked" value="test4" />test4
		<input type="checkbox" name="newsletter" value="test5" />test5
		<div id="checkboxDivId"></div>

		<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> 下拉列表1：
		<br/>
		<select name="test" multiple="multiple" style="height:100px">
			<option>浙江</option>
			<option selected="selected">湖南</option>
			<option>北京</option>
			<option selected="selected">天津</option>
			<option>广州</option>
			<option>湖北</option>
		</select>

		<br/><br/> 下拉列表2：
		<br/>
		<select name="test2">
			<option>浙江</option>
			<option>湖南</option>
			<option selected="selected">北京</option>
			<option>天津</option>
			<option>广州</option>
			<option>湖北</option>
		</select>
		<br/><br/>
	</body>

</html>

猜你喜欢

转载自blog.csdn.net/qq_35537301/article/details/83047053
今日推荐
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
报告：Django 仍然是 74% 开发者的首选
《2024 年一季度互联网投融资运行情况》研究报告
15 年前上了“FFmpeg 耻辱柱”，今天他还得谢谢咱——腾讯QQPlayer一雪前耻？
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
周排行
计算机组成与设计（七）—— 除法器
Integer Approximation(分治+枚举)
大话数据库索引
windows10系统JDK的配置及下载地址
mysql实现秒值转换中原六仔平台搭建
Codeforces Round #556 (Div. 1)
百练1064 网线主管
Codeforces 995F Cowmpany Cowmpensation
子集生成之增量构造法，位向量法，二进制法
ERROR: cmd.exe failed with args /c "/APK\gradle\rungradle.bat...
每日归档
更多
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022