JQuery选择器用法详解

2024-04-02 19:04:59 663人浏览独家记忆

摘要

目录一、基本选择器二、层次选择器三、表单选择器四、属性选择器一、基本选择器 id选择器元素名称选择器类选择器选择所有元素组合选择器 <html> <head>

一、基本选择器

id选择器
元素名称选择器
类选择器
选择所有元素
组合选择器

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/CSS">
			.blue{
				background: blue;
			}
		</style>
		<script src="js/Jquery-3.5.1.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="mydiv1">id选择器1<span>span中的内容</span></div>
		<div id="mydiv2" class="blue">元素选择器</div>
		<span class="blue">样式选择器</span>
		
		<script type="text/javascript">
			//1.id选择器
			var mydiv1 = $("#mydiv1");
			console.log(mydiv1);
			
			//2.元素名称选择器
			var divs = $("div");
			console.log(divs);
			
			//3.类选择器
			var clsz = $(".blue");
			console.log(clsz);
			
			//4.选择所有元素
			var all = $("*");
			console.log(all);
			
			//5.组合选择器,是或的关系，同时选中元素
			var fz = $("div,.blue,#mydiv1");
			console.log(fz);
			
			
		</script>
	</body>
</html>

二、层次选择器

后代选择器
子代选择器
相邻选择器:

选择css类为blue的下一个img元素,因为JS代码从上向下执行
同辈选择器

选择css类为blue的之后的img元素,因为JS代码从上向下执行

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.5.1.min.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			.testColor{
				background: green;
			}
			.gray{
				background: gray;
			}
		</style>
	</head>
	<body>
		<div id="parent">层次择器
		<div id="child" class="testColor">父选择器
			<div class="gray">子选择器
				<img src="/file/imgs/upload/202211/13/tdvebdzqkno.jpg" 
					   width="270" height="129" />
				<img src="/file/imgs/upload/202211/13/tdvebdzqkno.jpg" 
					   width="270" height="129" />
			</div>	
			<div>
				选择器2<div>选择器2中的div</div>
			</div>
			<div>新div1</div>
			<div>新div2</div>
		</div>
		 
		 <script type="text/javascript">
		 	//后代选择器
			var hd = $("#child div");
			console.log(hd);
			
			//子代选择器
			var zd = $("#child > div");
			console.log(zd);
			
			//相邻选择器
			var xl = $(".gray + div");
			console.log(xl);
			
			//同辈选择器，同一个层级
			var tb = $(".gray ~ div");
			console.log(tb);
		 </script>
	</body>
</html>

三、表单选择器

属性选择器
表单选择器
文本框选择器
密码框选择器
单/复选框选择器
提交按钮选择器
图像域选择器
按钮选择器
文件域选择器

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.5.1.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<!-- 
			属性选择器
				$("[属性]")					获取到当前页面有这个属性的元素
				$("[属性='属性值']")		 获取到当前页面有这个属性并且值等于属性值的元素
		
		
			表单选择器			 :input查找所有的表单元素：$(":input"); <br />注意：会匹配所有的input、textarea、select和button元素。
			文本框选择器			:text查找所有文本框：$(":text")
			密码框选择器			:passWord查找所有密码框：$(":password")
			单选按钮选择器			:radio查找所有单选按钮：$(":radio")
			复选框选择器			:checkbox查找所有复选框：$(":checkbox")
			提交按钮选择器			:submit查找所有提交按钮：$(":submit")
			图像域选择器			:image查找所有图像域：$(":image")
			重置按钮选择器		    :reset查找所有重置按钮：$(":reset")
			按钮选择器			 :button查找所有按钮：$(":button")
			文件域选择器			:file查找所有文件域：$(":file")
		 -->
		<fORM id='myform' name="myform"  method="post">		
			<input type="hidden" name="uno" value="9999" disabled="disabled"/>
			姓名:<input type="text" id="uname" name="uname" /><br />
			密码:<input type="password" id="upwd" name="upwd" value="123456" /><br />
			年龄:<input type="radio" name="uage" value="0" checked="checked"/>小屁孩
				 <input type="radio" name="uage" value="1" abc="123"/>你懂得  <br /> 
			爱好:<input type="checkbox" name="ufav" checked="checked" abc="456" value="篮球"/>篮球
				 <input type="checkbox" name="ufav" value="爬床"/>爬床
				 <input type="checkbox" name="ufav" value="代码"/>代码<br />
			来自:<select id="ufrom" name="ufrom">
					<option value="-1" selected="selected">请选择</option>
					<option value="0">北京</option>
					<option value="1">上海</option>
				</select><br />
			简介:<textarea rows="10" cols="30" name="uintro"></textarea><br />
			头像:<input type="file"  /><br />
			<input type="image" src="/file/imgs/upload/202211/13/tdvebdzqkno.jpg" 
				   width="20" height="20"/>
			<button type="submit" onclick="return checkForm();">提交</button>
			<button type="reset" >重置</button>		
			
		</form>
		
		<script type="text/javascript">
			//表单选择器  获取所有表单元素,会匹配所有的input、textarea、select和button元素。
			var inputs = $(':input');
			console.log(inputs);
			
			//获取单选
			var radiOS = $(":radio");
			console.log(radios);
			
			//属性选择器
			var favs = $("[selected='selected']");
			console.log(favs);
			
			var favs = $("[checked='checked']");
			console.log(favs);
			console.log("=============");
			var favs = $("[checked]");
			console.log(favs);
			
			var favs = $("[abc='123']");
			console.log(favs);
			
		</script>
	</body>
</html>

四、属性选择器

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.5.1.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<!-- 
			属性选择器
				$("[属性名]")			获取所有设置过指定属性名的元素
				$("[属性名='属性值']")	 获取所有设置过指定属性名等于指定属性值的元素
			过滤选择器
				$(":eq(index)") 	匹配元素的指定下标的元素 （下标从0开始）  .eq(index)
				$(":gt(index)")		匹配元素下标大于指定值元素 （下标从0开始）.gt(index)
				$(":odd")			匹配奇数下标
				$(":even")			匹配偶数下标
				$(":checked")		匹配元素被选中
		 -->
		
		<form id='myform' name="myform"  method="post">
			<input type="hidden" name="uno" value="9999" disabled="disabled"/>
			姓名:<input type="text" id="uname" name="uname" /><br />
			密码:<input type="password" id="upwd" name="upwd" value="123456" /><br />
			年龄:<input type="radio" name="uage" value="0" checked="checked"/>小屁孩
				 <input type="radio" name="uage" value="1"/>你懂得  <br /> 
			爱好:<input type="checkbox" name="ufav" value="篮球"/>篮球
				 <input type="checkbox" name="ufav" value="爬床"/>爬床
				 <input type="checkbox" name="ufav" value="代码"/>代码<br />
			来自:<select id="ufrom" name="ufrom">
					<option value="-1" selected="selected">请选择</option>
					<option value="0">北京</option>
					<option value="1">上海</option>
				</select><br />
			简介:<textarea rows="10" cols="30" name="uintro"></textarea><br />
			头像:<input type="file"  /><br />
			<input type="image" src="/file/imgs/upload/202211/13/tdvebdzqkno.jpg"  width="20" height="20"/>
			<button type="submit" onclick="return checkForm();">提交</button>
			<button type="reset" >重置</button>		
		</form>

		<script type="text/javascript">
			// $(":eq(index)") 	匹配元素的指定下标的元素 （下标从0开始）  .eq(index)
			console.log($(":eq(0)"));
			console.log($(":eq(1)"));
			console.log($(":eq(2)"));
			console.log($(":eq(3)"));
			console.log($(":eq(4)"));
			console.log($(":eq(5)"));	
			console.log($(":eq(6)"));
			console.log($(":eq(7)"));
			console.log($(":eq(8)"));
			console.log("============");

			//$(":gt(index)")	匹配元素下标大于指定值元素 （下标从0开始）.gt(index)
			console.log("==大于5===");
			console.log($(":gt(5)"));
			
			//$(":g=lt(index)")	匹配元素下标小于指定值元素 （下标从0开始）.lt(index)
			console.log("==小于5===");
			console.log($(":lt(5)"));
			
			//$(":odd")			匹配奇数下标
			console.log($(":odd"));
			
			// $(":even")		匹配偶数下标
			console.log($(":even"));

			//$(":checked")		匹配元素被选中，包含的有option和input标签
			console.log($(":checked"));

		</script>
	</body>
</html>

到此这篇关于JQuery选择器的文章就介绍到这了。希望对大家的学习有所帮助，也希望大家多多支持编程网。

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: JQuery选择器用法详解

本文链接: https://www.lsjlt.com/news/147486.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341