ホームページ >ウェブフロントエンド >フロントエンドQ&A >jqueryでノードを走査するにはどのような方法がありますか?

jqueryでノードを走査するにはどのような方法がありますか?

青灯夜游
青灯夜游オリジナル
2022-03-22 19:31:263859ブラウズ

ノードをトラバースできる jquery メソッドは次のとおりです: 1. Children() (すべての直接の子要素を返すことができます); 2. next() (選択した要素の次の兄弟要素を返すことができます); 3. nextAll () は、選択した要素の後のすべての兄弟要素を返すことができます (4. prev(); 5. sinners() など)。

jqueryでノードを走査するにはどのような方法がありますか?

このチュートリアルの動作環境: 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 要素の後の隣接する兄弟要素を検索しますが、すべての兄弟要素は検索しません要素

# [関連メソッド]

(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

5 の後。ind() メソッド: $('p').find('span') ---- p 要素内の、span 要素であるサブ要素を検索します

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

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

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

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

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

11.map() メソッド: $('p').map (コールバック) ---各 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>

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

13 を検索、has() メソッド: $('p').has( 'span ') ----span 要素を含む要素を p 個検索

14.not() メソッド: $('p').not('span') ---- p を含まない要素を検索スパン要素を持つ要素

#15.slice() メソッド: $('p').slice(0,2) ---- 最初の 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 要素内のすべての子ノード (テキスト ノードを含む) を返します

21. end( ) メソッド: $('p').find('span').end() ---- ステートメントの本体を前の状態に戻します。span 要素を見つけた後、フォーカスは 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>

[推奨学習:

jQuery ビデオ チュートリアル

Web フロントエンド

]

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

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。