jQuery セレクターの使用 (7 つのサブ要素)_jquery-jsチュートリアル-php.cn

この一連の記事は、基本記事、階層記事、単純記事、コンテンツ記事、可視性記事、属性記事、サブ要素記事、フォーム記事、フォームオブジェクトプロパティ記事の 9 つの記事に分かれています。
この記事では、:nth-child(index/even/odd/equation)、:first-child、:last-child、:only-child の使用法について説明します。
この一連の記事に関してご提案やコメントがある場合は、sjzlgt@qq.com まで電子メールを送信してください。
技術的な一連の記事を書くのはこれが初めてであるため、多少の間違いは避けられません。エラーやコードのバグがある場合は、ご指摘ください。ありがとうございます。
jQuery の詳細については、jQuery 公式 Web サイトにアクセスしてください。
実行後、更新してください。jquery をロードする必要があり、デフォルトは出力され、リモート js ファイルはロードされません。

<title>jQuery-Selectors-6</title>

<div style="width:100%; text-align:center; font-size:16px; font-weight:bold;">
</div>jQuery セレクターの使用 (7 つのサブ要素)<a href="http://jquery.com/" target="_blank">
このシリーズの記事では、主に jQuery フレームワークのセレクターの使用方法について説明します。簡単さと包括性に基づいて説明します。私の学習方法は、まず始めてから進めてください。
 
この一連の記事は、基本記事、階層記事、単純記事、コンテンツ記事、可視性記事、属性記事、サブ要素記事、フォーム記事、フォーム オブジェクト プロパティ記事の 9 つの記事に分かれています。
 
この記事では、[属性]、[属性=値]、[属性!=値]、[属性^=値]、[属性$=値]、[属性*=値]、[セレクター1][セレクター2][セレクターN]について説明します。 ] 使用法。
 
この一連の記事に関してご提案やコメントがある場合は、sjzlgt@qq.com まで電子メールを送信してください。
 
一連の技術的な記事を書くのは初めてなので、間違いやコードのバグがあることは避けられません。ご指摘いただけると幸いです。
 
jQuery の詳細については、</a>jQuery 公式 Web サイト<span style="color:Red;"> にアクセスしてください。
 
<strong><a href="http://www.cnblogs.com/bynet/" target="_blank">著作権: code-cat ブログ:</a>http://www.cnblogs.com/bynet</strong> 転載する場合は、出典と著作権情報を保持してください。 </span>
</div>
<div class="div">

</div>
IE6、IE7、Firefox でテストされており、その効果は明らかです。 
<div class="div">

<span class="xiaobiao">
</span>1. :nth-child(インデックス/偶数/奇数/方程式) の使用法<span class="green">
 
定義: 親要素の下にある N 番目の子要素または奇数偶数要素と一致します ':eq(index)' は 1 つの要素のみと一致し、これは各親要素の子要素と一致します。 :nth-child は 1 から始まり、:eq() は 0 から始まります。 
 
次の構文を使用できます。
 
:nth-child(2) </span>//インデックス 2 の要素<span class="green">
 
:nth-child(even) </span>//インデックスは偶数要素です<span class="green">
 
:nth-child(odd) </span>//インデックスは奇数要素です<span class="green">
 
:nth-child(3n) </span>//インデックス 3 * n の要素、n=0,1,2,3,4..., えー...3 は死んでいません。1 に置き換えることができます。 2、4、5、6...以下同様<span class="green">
 
:nth-child(3n 1) </span>//インデックス 3 * n 1 を持つ要素、n=0,1,2,3,4...<span class="green">
 
:nth-child(3n 2) </span>//インデックス 3 * n 2 を持つ要素、n=0,1,2,3,4...<span style="border:blue 1px solid;">
 
戻り値: 配列
 
パラメータ:index (数値): 照合する要素の 1 から始まるシーケンス番号
 
例: ID「div_a1」のDIV内の各ul要素の2番目のLi要素の背景色を赤に変更します。
 
<span style="color:green;">コード: $("#div_a1 ul li:nth-child(2)").css("background-color","red");</span> //ボタン 1 をクリックしてこのコードを実行します</span> <div id="div_a1" style="border:red 1px solid; padding-bottom:5px; padding-left:5px; width:98%;">
<ul id="ul_a1" style="width:100px; border:#000 1px solid;">
DIV ID="div_a1"
 
<li>
ul id="ul_a1"
</li>リ:C<li>
</li>LI:C <li>
</li>LI:C#<li>
</li>LI:Java<li>
</li>LI:JavaScript</ul>
<ul id="ul_a2" style="width:100px; border:#000 1px solid;">
<li>
ul id="ul_a2"
</li>リ:グーグル<li>
</li>LI:マイクロソフト<li>
</li>リ:アップル<li>
</li>リ:サン<li>
</li>LI:インテル</ul>
<ul id="ul_a3" style="width:100px; border:#000 1px solid;">

<li>
ul id="ul_a3"
</li>リ:オンリーワン</ul>
<div id="div_a5" style="width:625px; border:#333 1px solid; background-color:#999; margin-top:5px; padding-left:5px;">
<input type="button" id="btn_1" value="按钮一" class="button">
DIV ID = "div_a5"
</div>
</div>
<script src="http://img.jb51.net/jslib/jquery/jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript"> 
$("#btn_1").click(function(){ 
$("#div_a1 ul li:nth-child(2)").css("background-color","red"); 
}); 
</script> 
<span style="color:Red;"><strong>注意：其它语法用法简单，我不在此一一列出，读者可下载源文件后，自行修改看效果，在此注意索引从1开始即可。</strong></span> 
</div>

<div class="div"> 
<span class="xiaobiao">2. :first-child用法</span>
 
定义：匹配第一个子元素 ':first' 只匹配一个元素，而此选择符将为每个父元素匹配一个子元素 
 
返回值：Array<Element>
 
实例：将ID为"div_b1"的DIV中每个ul元素的第1个Li元素的背景色改为红色 
 
<span style="border:blue 1px solid;">代码： $("#div_b1 ul li:first-child") .css("background-color","red");<span style="color:green;"> //点击按钮二将执行这句代码</span></span> 
<div id="div_b1" style="border:red 1px solid; padding-bottom:5px; padding-left:5px; width:98%;"> 
DIV ID="div_b1"
 
<ul id="ul_b1" style="width:100px; border:#000 1px solid;"> 
ul id="ul_b1" 
<li>LI:C</li> 
<li>LI:C++</li> 
<li>LI:C#</li> 
<li>LI:Java</li> 
<li>LI:JavaScript</li> 
</ul> 
<ul id="ul_b2" style="width:100px; border:#000 1px solid;"> 
ul id="ul_b2" 
<li>LI:Google</li> 
<li>LI:Microsoft</li> 
<li>LI:Apple</li> 
<li>LI:Sun</li> 
<li>LI:Intel</li> 
</ul>

<ul id="ul_b3" style="width:100px; border:#000 1px solid;"> 
ul id="ul_b3" 
<li>Li:onle one</li> 
</ul> 
<div id="div_b5" style="width:625px; border:#333 1px solid; background-color:#999; margin-top:5px; padding-left:5px;"> 
DIV ID="div_b5" 
<input type="button" id="btn_2" value="按钮二" class="button"> 
<script type="text/javascript"> 
$("#btn_2").click(function(){ 
$("#div_b1 ul li:first-child") .css("background-color","red"); 
}); 
</script> 
</div> 
</div> 
<span style="color:Red;"><strong>注意：当然，这个效果你也可以用$("#div_b1 ul li:nth-child(1)") .css("background-color","red");来实现。</strong></span> 
</div>

<div class="div"> 
<span class="xiaobiao">3. :last-child用法</span>
 
定义：匹配最后一个子元素 ':last'只匹配一个元素，而此选择符将为每个父元素匹配一个子元素 
 
返回值：Array<Element>
 
实例：将ID为"div_c1"的DIV中每个ul元素的最后1个Li元素的背景色改为红色 
 
<span style="border:blue 1px solid;">代码： $("#div_c1 ul li:last-child") .css("background-color","red");<span style="color:green;"> //点击按钮三"将执行这句代码</span></span> 
<div id="div_c1" style="border:red 1px solid; padding-bottom:5px; padding-left:5px; width:98%;"> 
DIV ID="div_c1"
 
<ul id="ul_c1" style="width:100px; border:#000 1px solid;"> 
ul id="ul_c1" 
<li>LI:C</li> 
<li>LI:C++</li> 
<li>LI:C#</li> 
<li>LI:Java</li> 
<li>LI:JavaScript</li> 
</ul> 
<ul id="ul_c2" style="width:100px; border:#000 1px solid;"> 
ul id="ul_c2" 
<li>LI:Google</li> 
<li>LI:Microsoft</li> 
<li>LI:Apple</li> 
<li>LI:Sun</li> 
<li>LI:Intel</li> 
</ul>

<ul id="ul_c3" style="width:100px; border:#000 1px solid;"> 
ul id="ul_c3" 
<li>Li:onle one</li> 
</ul> 
<div id="div_c5" style="width:625px; border:#333 1px solid; background-color:#999; margin-top:5px; padding-left:5px;"> 
DIV ID="div_c5" 
<input type="button" id="btn_3" value="按钮三" class="button"> 
<script type="text/javascript"> 
$("#btn_3").click(function(){ 
$("#div_c1 ul li:last-child") .css("background-color","red"); 
}); 
</script> 
</div> 
</div> 
</div>

<div class="div"> 
<span class="xiaobiao">4. :only-child用法</span>
 
定义：如果某个元素是父元素中唯一的子元素，那将会被匹配 如果父元素中含有其他元素，那将不会被匹配。 
 
返回值：Array<Element>
 
实例：将ID为"div_c1"的DIV中每个ul元素中唯一1个Li元素的背景色改为红色 
 
<span style="border:blue 1px solid;">代码： $("#div_d1 ul li:only-child") .css("background-color","red");<span style="color:green;"> //点击按钮四"将执行这句代码</span></span> 
<div id="div_d1" style="border:red 1px solid; padding-bottom:5px; padding-left:5px; width:98%;"> 
DIV ID="div_d1"
 
<ul id="ul_d1" style="width:100px; border:#000 1px solid;"> 
ul id="ul_d1" 
<li>LI:C</li> 
<li>LI:C++</li> 
<li>LI:C#</li> 
<li>LI:Java</li> 
<li>LI:JavaScript</li> 
</ul> 
<ul id="ul_d2" style="width:100px; border:#000 1px solid;"> 
ul id="ul_d2" 
<li>LI:Google</li> 
<li>LI:Microsoft</li> 
<li>LI:Apple</li> 
<li>LI:Sun</li> 
<li>LI:Intel</li> 
</ul>

<ul id="ul_d3" style="width:100px; border:#000 1px solid;"> 
ul id="ul_d3" 
<li>Li:onle one</li> 
</ul> 
<div id="div_d5" style="width:625px; border:#333 1px solid; background-color:#999; margin-top:5px; padding-left:5px;"> 
DIV ID="div_d5" 
<input type="button" id="btn_4" value="按钮四" class="button"> 
<script type="text/javascript"> 
$("#btn_4").click(function(){ 
$("#div_d1 ul li:only-child") .css("background-color","red"); 
}); 
</script> 
</div> 
</div> 
</div>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]