久久久久久久视色,久久电影免费精品,中文亚洲欧美乱码在线观看,在线免费播放AV片

<center id="vfaef"><input id="vfaef"><table id="vfaef"></table></input></center>

    <p id="vfaef"><kbd id="vfaef"></kbd></p>

    
    
    <pre id="vfaef"><u id="vfaef"></u></pre>

      <thead id="vfaef"><input id="vfaef"></input></thead>

    1. 站長資訊網(wǎng)
      最全最豐富的資訊網(wǎng)站

      在jquery中有哪些層次選擇器

      jquery中的層次選擇器有:1、后代選擇器,語法“$("M N")”;2、子代選擇器,語法“$("M>N")”;3、兄弟選擇器,語法“$("M~N")”;4、相鄰選擇器,語法“$("M+N")”。

      在jquery中有哪些層次選擇器

      本教程操作環(huán)境:windows7系統(tǒng)、jquery1.10.2版本、Dell G3電腦。

      層次選擇器,就是通過元素之間的層次關(guān)系來選擇元素的一種基礎(chǔ)選擇器。層次選擇器在實(shí)際開發(fā)中也是相當(dāng)重要的。常見的層次關(guān)系包括:父子、后代、兄弟、相鄰。

      在 jQuery 中,層次選擇器共有 4 種,如下表 所示。

      jQuery 層次選擇器
      選擇器 說明
      M N 后代選擇器,選擇 M 元素內(nèi)部的后代N元素(所有 N 元素)
      M>N 子代選擇器,選擇 M 元素內(nèi)部的子代N元素(所有第 1 級(jí) N 元素)
      M~N 兄弟選擇器,選擇 M 元素后面所有的同級(jí) N 元素
      M + N 相鄰選擇器,選擇 M 元素相鄰的(下一個(gè))元素(M、N 是同級(jí)元素)

      此外,我們還需要注意以下 4 點(diǎn):

      • $("M N") 可以使用 $(M).find(N) 代替;

      • $("M>N") 可以使用 $(M).children(N) 代替;

      • $("M~N") 可以使用 $(M).nextAll(N) 代替;

      • $("M+N") 可以使用 $(M).next(N) 代替。

      對(duì)于 find( )、children( )、nextAll( )、next( ) 這 4 種方法,我們之后會(huì)詳細(xì)介紹,這里簡(jiǎn)單了解一下即可。

      后代選擇器

      后代選擇器,用于選擇元素內(nèi)部的所有某一種元素,包括子元素和其他后代元素。

      語法:

      $("M N")

      “M元素”和“N元素”之間用空格隔開,表示選中 M 元素內(nèi)部的后代 N 元素(即所有 N 元素)。

      舉例:

      <!DOCTYPE html> <html> <head>     <meta charset="utf-8" />     <script src="js/jquery-1.10.2.min.js"></script>     <script>         $(function () {             $("#first p").css("color","red");         })     </script> </head> <body>     <div id="first">         <p>子元素</p>         <p>子元素</p>         <div id="second">             <p>子元素的子元素</p>             <p>子元素的子元素</p>         </div>         <p>子元素</p>         <p>子元素</p>     </div> </body> </html>

      程序運(yùn)行效果如圖 1 所示:

      在jquery中有哪些層次選擇器

      $("#first p") 表示選取 id="first" 的元素內(nèi)部的所有 p 元素。因此,不管是子元素,還是其他后代元素,全部都會(huì)被選中。

      子代選擇器

      子代選擇器,用于選中元素內(nèi)部的某一種子元素。子代選擇器與后代選擇器雖然很相似,但是也有著明顯的區(qū)別。

      • 后代選擇器,選取的是元素內(nèi)部所有的元素(包括子元素、孫元素等);

      • 子代選擇器,選取的是元素內(nèi)部的某一種子元素(只限子元素)。

      語法:

      $("M>N")

      “M 元素”和“N 元素”之間使用>選擇符,表示選中 M 元素內(nèi)部的子元素 N。

      舉例:

      <!DOCTYPE html> <html> <head>     <meta charset="utf-8" />     <script src="js/jquery-1.10.2.min.js"></script>     <script>         $(function () {             $("#first>p").css("color","red");         })     </script> </head> <body>     <div id="first">         <p>子元素</p>         <p>子元素</p>         <div id="second">             <p>子元素的子元素</p>             <p>子元素的子元素</p>         </div>         <p>子元素</p>         <p>子元素</p>     </div> </body> </html>

      預(yù)覽效果如圖 2 所示:

      在jquery中有哪些層次選擇器

      $("#first>p") 表示選中 id="first" 的元素下的子元素 p。我們將這個(gè)例子與后代選擇器的例子對(duì)比一下,就可以很清楚地知道:子代選擇器只選取子元素,不包括其他后代元素。

      兄弟選擇器

      兄弟選擇器,用于選中元素后面(不包括前面)的某一類兄弟元素。

      語法:

      $("M~N")

      “M 元素”和“N 元素”之間使用~選擇符,表示選中 M 元素后面所有的兄弟元素 N。

      舉例:

      <!DOCTYPE html> <html> 	<head> 		<meta charset="utf-8" /> 		<script src="js/jquery-1.10.2.min.js"></script> 		<script> 			$(function() { 				$("#second~p").css("color", "red"); 			}) 		</script> 	</head> 	<body> 		<div id="first"> 			<p>子元素</p> 			<p>子元素</p> 			<div id="second"> 				<p>子元素的子元素</p> 				<p>子元素的子元素</p> 			</div> 			<p>子元素</p> 			<p>子元素</p> 		</div> 	</body> </html>

      程序執(zhí)行結(jié)果如圖 3 所示:

      在jquery中有哪些層次選擇器

      $("#second~p") 表示選取 id="second" 的元素后面所有的兄弟元素 p。記住,兄弟選擇器只選取后面所有的兄弟元素,不包括前面的所有兄弟元素。

      相鄰選擇器

      相鄰選擇器,用于選中元素后面(不包括前面)的某一個(gè)“相鄰”的兄弟元素。相鄰選擇器與兄弟選擇器也非常相似,不過也有明顯的區(qū)別。

      • 兄弟選擇器選取元素后面“所有”的某一類元素;

      • 相鄰選擇器選取元素后面“相鄰”的某一個(gè)元素。

      語法:

      $("M+N")

      “M 元素”和“N 元素”之間使用+選擇符,表示選中 M 元素后面的相鄰的兄弟元素 N。

      舉例:

      <!DOCTYPE html> <html> 	<head> 		<meta charset="utf-8" /> 		<script src="js/jquery-1.10.2.min.js"></script> 		<script> 			$(function() { 				$("#second+p").css("color", "red"); 			}) 		</script> 	</head> 	<body> 		<div id="first"> 			<p>子元素</p> 			<p>子元素</p> 			<div id="second"> 				<p>子元素的子元素</p> 				<p>子元素的子元素</p> 			</div> 			<p>子元素</p> 			<p>子元素</p> 		</div> 	</body> </html>

      程序運(yùn)行效果如圖 4 所示:

      在jquery中有哪些層次選擇器

      $("#second+p") 表示選取 id="second" 的元素后面的“相鄰”的兄弟元素 p。

      舉例:

      <!DOCTYPE html> <html> 	<head> 		<meta charset="utf-8" /> 		<script src="js/jquery-1.10.2.min.js"></script> 		<script> 			$(function() { 				$("li+li").css("border-top", "2px solid red"); 			}) 		</script> 	</head> 	<body> 		<ul> 			<li>第1個(gè)元素</li> 			<li>第2個(gè)元素</li> 			<li>第3個(gè)元素</li> 			<li>第4個(gè)元素</li> 			<li>第5個(gè)元素</li> 		</ul> 	</body> </html>

      程序執(zhí)行效果如圖 5 所示。

      在jquery中有哪些層次選擇器

      $("li+li") 使用的是相鄰選擇器,表示“選擇 li 元素后面相鄰的(下一個(gè))li 元素”。由于最后一個(gè) li 元素沒有下一個(gè) li 元素,所以對(duì)于最后一個(gè) li 元素,它是沒有下一個(gè) li 元素可以選取的。$("li+li").css("border-top","2px solid red") 可以實(shí)現(xiàn)在兩兩li元素之間添加一個(gè)邊框的效果。

      【推薦學(xué)習(xí):jQuery視頻教程、web前端開發(fā)視頻】

      贊(0)
      分享到: 更多 (0)
      網(wǎng)站地圖   滬ICP備18035694號(hào)-2    滬公網(wǎng)安備31011702889846號(hào)