jQuery ノードのトラバーサル方法の概要-jsチュートリアル-php.cn

jQuery ノードのトラバーサル方法の概要

小云云

リリース： 2018-01-12 09:42:42

オリジナル

1866 人が閲覧しました

この記事は、誰もが jQuery ノードをより明確に理解できるように、主に jQuery ノードを横断する方法を収集して整理しています。これは非常に優れており、必要な友人が参考になれば幸いです。みんな。

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

<p>Hello</p>
<p>
  <span>Hello Again</span>
  <p class="box">您好!</p>
</p>
<p>And Again</p>
<script type="text/javascript">
  $('p').children();   //<span>Hello Again</span><p class="box">您好!</p>
  $('p').children('.box')  //<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>
<p>
  <span>And Again</span>
</p>
<script type="text/javascript">
  $('p').next();   //<p>Hello Again</p><p><span>And Again</span></p>
  $('p').next('.box');  //<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>
<p>
  <span>Hello Again</span>
</p>
<p>And Again</p>
<script type="text/javascript">
  $('p').prev();  //<p><span>Hello Again</span></p>
</script>

ログイン後にコピー

4 のすべての要素。 Brothers() メソッド: $('p').siblings()---- p

5.find() メソッドの前後のすべての兄弟要素を検索します: $('p') .find('span') - --- p 要素内のサブ要素を見つけます。それは span 要素です

6.eq() メソッド: $('p').eq(1) --- 2 番目の p 要素を見つけます (インデックスの添え字が始まります) from 0)

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

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

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

10 の p 要素を取得します。 : $('.box').is('p') ---- .box が p 要素であるか判定

11.map() メソッド: $('p').map(callback) --- 実行各 p のコールバック関数

例: input 要素を走査してその値を取得し、それを「,」で区切られた 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.hasClass() メソッド: $('p')。 hasClass ('box') ---- クラス名を持つ p

13.has() メソッドを検索 box: $('p').has('span') ---- spap 要素 p 要素を持つ p を検索

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

15.slice() メソッド: $('p ')。 slide(0,2) ---- 1 番目の p 要素から 3 番目の p 要素を検索します

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

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

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

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

20.contents() メソッド: $('p').contents() --- p 要素内のすべての子ノード (Text ノードを含む) を返します

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

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

ログイン後にコピー