jQuery_jquery を始めるための階層セレクターの例の簡単な分析

この記事では、jQuery を始める際の階層セレクターの使用方法を分析します。参考のために皆さんと共有してください。詳細は次のとおりです:

ここでは、jQuery 階層セレクターにおける祖先子孫と親>子の違いについて簡単に紹介します。

parent>child: 親要素に基づいてすべての子要素と一致します。階層関係は親子関係です。

ancestor子孫: 先祖要素に基づいてすべての子孫要素と一致します。階層関係は祖先と子孫です。

コードを作成してテストし、2 つの違いをより明確に区別します。

<div id="first">1
  <span>1.1 </span>
  <span>1.2 </span>
  <div>1.3
    <span>1.3.1 </span>
  </div>
 </div>
<script type="text/javascript" src="jquery-1.4.1.min.js">
</script>
<script type="text/javascript">
  $(function () {
    $("#first>span").css("color", "red");
  });
</script>

実行後に見つかりました:

1.3.1 の文字色は親子関係なので赤ではありません。

セレクターを次のように変更すると、

コードをコピー コードは次のとおりです:

$("#first span").css("color", "赤" );

実行すると、次のものが見つかります:

1.3.1の文字色も赤色になっていますが、これは祖先子孫の階層関係が祖先と子孫になっているためです。つまり、子か孫かに関係なく、ID「first」を持つ要素の下にあるすべてのspanタグが赤になります。

この記事が jQuery プログラミングのすべての人に役立つことを願っています。