jqueryでノードを走査する方法は何ですか?

ノードをトラバースするための JQ メソッド: 1.children(); 2.next(); 3.prev(); 4.sisters(); 5.find(); 6.eq(); 7. first(); 8. last(); 9. filter(); 10. is(); 11. map() など。

このチュートリアルの動作環境: Windows7 システム、jquery1.10.2 バージョン、Dell G3 コンピューター。

jquery ノードをトラバースするメソッド

1.children() メソッド: $('p').children()---トラバースして p 要素のすべての子要素ノードを検索します

<p>Hello</p>
<div>
    <span>Hello Again</span>
    <p class="box">您好!</p>
</div>
<p>And Again</p>

<script type="text/javascript">
    $(&#39;div&#39;).children();      //<span>Hello Again</span><p class="box">您好!</p>
    $(&#39;div&#39;).children(&#39;.box&#39;)    //<p class="box">您好!</p>
</script>

2.next() メソッド: $('p').next() --- p を検索しますelement 次に隣接する兄弟要素（すべての兄弟要素ではない）

# [関連メソッド]

# (1)nextAll() メソッド: $('p').nextAll() --- - すべて検索p

以降の兄弟要素 (2)nextUntil() メソッド: $('p').nextUntil('p')----p 以降の p までのすべての兄弟要素を検索 要素

<p>Hello</p>
<p class="box">Hello Again</p>
<div>
    <span>And Again</span>
</div>

<script type="text/javascript">
    $(&#39;p&#39;).next();      //<p>Hello Again</p><div><span>And Again</span></div>
    $(&#39;p&#39;).next(&#39;.box&#39;);   //<p class="box">Hello Again</p>
</script>

3、prev() メソッド:

$('p').prev()

---- p の前に隣接する兄弟要素を検索します [関連メソッドは]

(1)prevAll()メソッド：$('p').prevAll() ---- p前の兄弟要素をすべて検索

(2)prevUntil()メソッド：$('p' ).prevUntil('p') --- p より前のすべての要素を p 要素まで検索します 要素

<p>Hello</p>
<div>
    <span>Hello Again</span>
</div>
<p>And Again</p>

<script type="text/javascript">
   $(&#39;p&#39;).prev();   //<div><span>Hello Again</span></div>
</script>

4、兄弟() メソッド: $('p') .siblings()---- すべての兄弟を検索しますp

5 の前後の要素。find() メソッド: $('p').find('span') ---- p 要素内の子を検索します。この要素は、span 要素でもあります

6. eq() メソッド: $('p').eq(1) --- 2 番目の p 要素を検索します (インデックス添え字は 0 から始まります)

7. first() メソッド: $('li').first() --- 最初の li 要素を取得します

8. last() メソッド: $('li').last( ) --- 最後の li 要素を取得します

9, filter() メソッド: $('p').filter('.box') --- クラス名 box

10. is() メソッドの p 要素を取得します: $('.box').is('p') ---- .box が p 要素であるかどうかを判断します

11.map() メソッド: $( 'p').map(callback) --- 各 p

に対してコールバック関数を実行します。 例: 入力要素を走査してその値を取得し、その値を ","

<p><b>Values: </b></p>
<form>
  <input type="text" name="name" value="John"/>
  <input type="text" name="password" value="password"/>
  <input type="text" name="url" value="http://ejohn.org/"/>
</form>

<script type="text/javascript">
    $("p").append( $("input").map(function(){
          return $(this).val();
        }).get().join(", ") );   //<p>John, password, http://ejohn.org/</p> 
</script>

12 で区切られた p 要素の後ろに追加します。 hasClass() メソッド: $('p').hasClass('box') ---- p

#13 を検索します。 has() メソッド: $(' p').has('span' ) ----span 要素を含む p 個の要素を検索します

14.not() メソッド: $('p').not('span') - ---span を含まない p 個の要素を検索します要素

15.slice() メソッド: $('p').slice(0,2) ---- 最初の p 要素から最初の p 要素までの 3 p 要素を検索します

16、offsetParent() メソッド: $('p').offsetParent() --- p 要素の最初に位置する祖先要素を検索します

17、parent() メソッド: $('p')。 parent() ---- p 要素の一意の親ノードを含む要素セットを返します

18,parents() メソッド: $('p').parent() ---- すべての祖先を返しますp 要素を含むノード (ルート ノードを除く)

19.parentUntil() メソッド: $('p').parentUntil('#box') -- -- p 要素の祖先要素を検索します。 #box

20 まで.contents() メソッド: $('p').contents() --- p 要素内のすべての子ノード (テキスト Node を含む)

21 を返します。 end() メソッド: $('p').find('span').end() ---- ステートメントの本体を前の状態に戻します。つまり、find span 要素の後にフォーカスが戻ります。 p 要素へ

<div>
    <span>Hello</span>,
    how are you?
</div>
 
<script type="text/javascript">
    $(&#39;div&#39;).find(&#39;span&#39;).addClass(&#39;test&#39;).end().attr(&#39;title&#39;,&#39;title1&#39;);
    //span添加class=test;div添加title=title1
</script>

関連ビデオ チュートリアルの推奨事項:

jQuery チュートリアル

(ビデオ)

以上がjqueryでノードを走査する方法は何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。