jQuery セレクターの使用 (7 つのサブ要素)_jquery

この一連の記事は、基本記事、階層記事、単純記事、コンテンツ記事、可視性記事、属性記事、サブ要素記事、フォーム記事、フォーム オブジェクト プロパティ記事の 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> <style type="text/css"> .div { width:95%; margin-left:15px; margin-top:15px; margin-right:15px; padding-left:5px; padding-top:5px; padding-bottom:5px; background-color:#ccc; border:#999 1px solid; line-height:30px; font-size:13px; font-family:微软雅黑; } .blue{color:Blue;} .green{color:Green;} .button{border:green 1px solid;width:100px;} .xiaobiao{ font-weight:bold;} .red_test{background-color:red; color:White; width:300px; height:30px;} .li_test{border:#000 1px solid;} </style> <div class="div"> <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","re​​d");</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需刷新才能执行]