<div class="codetitle"> <span><a style="CURSOR: pointer" data="98112" class="copybut" id="copybut98112" onclick="doCopy('code98112')"><u>コードをコピー</u></a></span> コードは次のとおりです:</div> <div class="codebody" id="code98112"> <br><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > <BR><html xmlns="http://www.w3.org/1999/xhtml"> <br> <br><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <br><script src="js/jquery-1.3.2.js"></script> <br><script type="text/javascript"><!-- <BR> $(function(){ <BR> $("#aNth1").click(function(){ <BR> $ ("#ul1 li:nth-child(even)").each(function(){ <BR> $(this).css("background","#773300"); <BR> }) } )<BR>$( "#anth2")。click(function(){<BR> $( "#ul1 li:nth-child(2n 1)") ).css("background","#ff3434"); <BR> }) <BR> }) <BR> $("#aFirst").click(function(){ <BR> $("#ul1 li :first-child").each(function(){ <BR> $(this).css("background","#223344"); <BR> }) <BR> }) $("# aLast").click(function(){ <BR> $("#ul1 li:last-child").each(function(){ <BR> $(this).css("background","#99ff88" ); <BR> <BR> <BR> $("#aOnly").click(function(){ <BR> $("ul li:only-child")各(関数(){ <BR> $(this).css("background","#99ff88"); <BR> }) <BR> }) <BR> }) <BR>// --></script> <br><title>無題ドキュメント</head> <br><br><body> 🎜><a href="#" onclick="javascript:location.reload();">リセット</a> <br><ul id="ul1"> <br><li>li1< ;/li><br><li>li2</li><BR><li>li4</li><BR><li>li5</ li><BR><li></li><BR><ul><BR></ul> 🎜><a href="#" id="aNth1">ul1 の偶数インデックスの子要素の背景色を設定</a>| <br><a href="#" id= "aNth2 ">ul1 の奇数インデックスの子要素の背景色を設定</a>| <br><a href="#" id="aFirst">ul1 の先頭の子要素の背景色を設定< ;/ a>| <br><a href="#" id="aLast">ul1の末尾要素の背景色を設定</a>| <br><a href="#" id =" aOnly">すべての <br></body><br><br><br>1.$ 内の唯一の子要素の背景色を設定します。 ("ParentSelector ChildTagName:nth-child(...)") 注 - 次の略語は次のとおりです: nth-child <br> 説明: たとえば、インデックス フィルタリングのために ParentSelector によって選択された要素セットの子要素セットを取得します。この例で aNth1 をクリックすると、ID は次のようになります。 ul1 要素の li サブ要素は偶数インデックス (偶数) 選択を実行します ($("#ul1 li:nth-child(even)")) というキーワードはよく知られているはずです。これは第 3 章で説明しました。まだよくわからない場合は、続行する前に第 3 章にアクセスして確認してください。もちろん、ここで od を使用することもできますが、第 3 章とは少し異なります。 3章ではインデックスが0から始まりますが、ここではインデックスが1から始まるはずです。設計上の見落としなのかわかりませんが、設計があまり良くない気がします。このメソッドも非常に柔軟な使用法があり、例の aNth2 クリック イベントと同様に、$("#ul1 li:nth-child(2n 1)") メソッドを使用して同様の $("#ul1 li) を実行します。 :nth-child(odd)") 関数、2n 1 については説明の必要はありません。中学校の数学でよく使われます。本当にわからない場合はコメントを残してください--!このメソッドは「2」などの特定のインデックスを続けることもできますが、ここでのインデックスは 1 から始まることに注意してください。 ! <br>戻り値: Array(Element); <br>2.:first-child <br>説明: 選択した要素コレクションの先頭要素を取得します。ここに書いていることは簡単なので、例を見て本当に理解できない場合は投稿してください - -! <br>戻り値: Array(Element); <br>3.:last-child </div>説明: 選択した要素コレクションの最後の要素を取得します。 <br>戻り値: Array(Element); <br>4.:only-child <br>説明: 兄弟ノードを持たない要素を取得します。たとえば、この例では、2 番目の ul 要素には li 子要素が 1 つだけあります。 $( "ul li:only-child") メソッドは li7 のみを取得します。 <br>戻り値: 配列(要素);