欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JQuery選擇器用法詳解

 更新時(shí)間：2022年05月04日 11:36:50   作者：農(nóng)碼一生  
本文詳細(xì)講解了JQuery選擇器的用法，文中通過(guò)示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

一、基本選擇器

  • 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中的內(nèi)容</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.組合選擇器,是或的關(guān)系，同時(shí)選中元素
			var fz = $("div,.blue,#mydiv1");
			console.log(fz);
			
			
		</script>
	</body>
</html>

二、層次選擇器

  • 后代選擇器

  • 子代選擇器

  • 相鄰選擇器:

    選擇css類為blue的下一個(gè)img元素,因?yàn)镴S代碼從上向下執(zhí)行

  • 同輩選擇器

選擇css類為blue的之后的img元素,因?yàn)镴S代碼從上向下執(zhí)行

<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="http://www.baidu.com/img/bd_logo1.png" 
					   width="270" height="129" />
				<img src="http://www.baidu.com/img/bd_logo1.png" 
					   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);
			
			//同輩選擇器，同一個(gè)層級(jí)
			var tb = $(".gray ~ div");
			console.log(tb);
		 </script>
	</body>
</html>

三、表單選擇器

  • 屬性選擇器
  • 表單選擇器
  • 文本框選擇器
  • 密碼框選擇器
  • 單/復(fù)選框選擇器
  • 提交按鈕選擇器
  • 圖像域選擇器
  • 按鈕選擇器
  • 文件域選擇器
<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>
		<!-- 
			屬性選擇器
				$("[屬性]")					獲取到當(dāng)前頁(yè)面有這個(gè)屬性的元素
				$("[屬性='屬性值']")		 獲取到當(dāng)前頁(yè)面有這個(gè)屬性并且值等于屬性值的元素
		
		
			表單選擇器			 :input查找所有的表單元素：$(":input"); <br />注意：會(huì)匹配所有的input、textarea、select和button元素。
			文本框選擇器			:text查找所有文本框：$(":text")
			密碼框選擇器			:password查找所有密碼框：$(":password")
			單選按鈕選擇器			:radio查找所有單選按鈕：$(":radio")
			復(fù)選框選擇器			:checkbox查找所有復(fù)選框：$(":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 /> 
			愛(ài)好:<input type="checkbox" name="ufav" checked="checked" abc="456" value="籃球"/>籃球
				 <input type="checkbox" name="ufav" value="爬床"/>爬床
				 <input type="checkbox" name="ufav" value="代碼"/>代碼<br />
			來(lái)自:<select id="ufrom" name="ufrom">
					<option value="-1" selected="selected">請(qǐng)選擇</option>
					<option value="0">北京</option>
					<option value="1">上海</option>
				</select><br />
			簡(jiǎn)介:<textarea rows="10" cols="30" name="uintro"></textarea><br />
			頭像:<input type="file"  /><br />
			<input type="image" src="http://www.baidu.com/img/bd_logo1.png" 
				   width="20" height="20"/>
			<button type="submit" onclick="return checkForm();">提交</button>
			<button type="reset" >重置</button>		
			
		</form>
		
		<script type="text/javascript">
			//表單選擇器  獲取所有表單元素,會(huì)匹配所有的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>
		<!-- 
			屬性選擇器
				$("[屬性名]")			獲取所有設(shè)置過(guò)指定屬性名的元素
				$("[屬性名='屬性值']")	 獲取所有設(shè)置過(guò)指定屬性名等于指定屬性值的元素
			過(guò)濾選擇器
				$(":eq(index)") 	匹配元素的指定下標(biāo)的元素 （下標(biāo)從0開(kāi)始）  .eq(index)
				$(":gt(index)")		匹配元素下標(biāo)大于指定值元素 （下標(biāo)從0開(kāi)始）.gt(index)
				$(":odd")			匹配奇數(shù)下標(biāo)
				$(":even")			匹配偶數(shù)下標(biāo)
				$(":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 /> 
			愛(ài)好:<input type="checkbox" name="ufav" value="籃球"/>籃球
				 <input type="checkbox" name="ufav" value="爬床"/>爬床
				 <input type="checkbox" name="ufav" value="代碼"/>代碼<br />
			來(lái)自:<select id="ufrom" name="ufrom">
					<option value="-1" selected="selected">請(qǐng)選擇</option>
					<option value="0">北京</option>
					<option value="1">上海</option>
				</select><br />
			簡(jiǎn)介:<textarea rows="10" cols="30" name="uintro"></textarea><br />
			頭像:<input type="file"  /><br />
			<input type="image" src="http://www.baidu.com/img/bd_logo1.png"  width="20" height="20"/>
			<button type="submit" onclick="return checkForm();">提交</button>
			<button type="reset" >重置</button>		
		</form>

		<script type="text/javascript">
			// $(":eq(index)") 	匹配元素的指定下標(biāo)的元素 （下標(biāo)從0開(kāi)始）  .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)")	匹配元素下標(biāo)大于指定值元素 （下標(biāo)從0開(kāi)始）.gt(index)
			console.log("==大于5===");
			console.log($(":gt(5)"));
			
			//$(":g=lt(index)")	匹配元素下標(biāo)小于指定值元素 （下標(biāo)從0開(kāi)始）.lt(index)
			console.log("==小于5===");
			console.log($(":lt(5)"));
			
			//$(":odd")			匹配奇數(shù)下標(biāo)
			console.log($(":odd"));
			
			// $(":even")		匹配偶數(shù)下標(biāo)
			console.log($(":even"));

			//$(":checked")		匹配元素被選中，包含的有option和input標(biāo)簽
			console.log($(":checked"));

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

到此這篇關(guān)于JQuery選擇器的文章就介紹到這了。希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論