Heim >Web-Frontend >Front-End-Fragen und Antworten >Welche Methoden gibt es zum Durchlaufen von Knoten in jquery?

Welche Methoden gibt es zum Durchlaufen von Knoten in jquery?

青灯夜游
青灯夜游Original
2021-11-15 11:58:153206Durchsuche

JQ-Methoden zum Durchqueren von Knoten: 1. children(); 3. prev(); 6. eq(); 8. last(); 9. filter(); 11. map() und so weiter.

Welche Methoden gibt es zum Durchlaufen von Knoten in jquery?

Die Betriebsumgebung dieses Tutorials: Windows7-System, jquery1.10.2-Version, Dell G3-Computer.

jquery-Methode zum Durchlaufen von Knoten

1. Children()-Methode: $('p').children()---Traverse, um alle untergeordneten Elementknoten des p zu finden element$('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>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>

2, next() Methode: $('p').next() --- Finde benachbarte Geschwisterelemente nach dem p-Element, aber nicht alle Geschwisterelemente

  [Verwandte Methoden]

  (1)nextAll()-Methode: $('p').nextAll() ---- Alle Geschwisterelemente nach p finden

  (2)nextUntil()-Methode: $('p'). p')----Suchen Sie alle Geschwisterelemente nach p bis zum p-Element

<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>

3. prev()-Methode: $('p').prev() -- -- Suchen die benachbarten Geschwisterelemente vor p

  [Verwandte Methoden umfassen]

  (1) prevAll()-Methode: $('p').prevAll() ---- Finden Sie alle Geschwisterelemente vor p

  (2)prevUntil ()-Methode: $('p').prevUntil('p') --- Alle Elemente vor p bis zum p-Element finden

<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>

4. --- Finden Sie alle Geschwisterelemente vor und nach p

5. find()-Methode: $('p').find('span') ---- Finden Sie die Unterelemente innerhalb des p-Elements und sie sind span element

6. eq()-Methode: $('p').eq(1) --- Finden Sie das zweite p-Element (Indexindex beginnt bei 0)

7 erste()-Methode: $( 'li') ).first() --- Holen Sie sich das erste li-Element

8, last()-Methode: $('li').last() --- Holen Sie sich das letzte li-Element

9, filter( )-Methode: $ ('p').filter('.box') --- Holen Sie sich das p-Element mit der Klassennamenbox

10. Methode: $('.box').is('p') -- -- Bestimmen Sie, ob .box ein p-Element ist

11. Map()-Methode: $('p').map(callback) --- Führen Sie die Callback-Funktion für jedes p aus

Beispiel: Durchlaufen Sie Eingabeelemente, um den Wert zu erhalten wird an der Rückseite des p-Elements hinzugefügt, getrennt durch ","

rrreee

12. hasClass()-Methode: $('p').hasClass('box') ---- Suchen Sie p

, das das Klassennamensfeld

enthält 13. has()-Methode: $('p').has('span') ---- Finden Sie p Elemente, die span-Elemente enthalten

14 ') ---- Finden Sie p-Elemente, die keine span-Elemente enthalten

15. Slice()-Methode: $('p').slice(0,2) ---- Finden Sie das erste p-Element bis zum dritten p element

16. offsetParent()-Methode: $('p').offsetParent() --- Finden Sie das erste positionierte Vorfahrenelement des p-Elements

17 () ---- Gibt den Elementsatz zurück, der den eindeutigen übergeordneten Knoten des p-Elements enthält

18 parent()-Methode: $('p').parent() ---- Gibt den Elementsatz zurück, der alle Vorfahrenknoten enthält des p-Elements (mit Ausnahme des Wurzelknotens)

19. parentUntil()-Methode: $('p').parentUntil('#box') ---- Finden Sie die Vorgängerelemente des p-Elements bis #box 🎜🎜 20. content()-Methode: $('p').contents() --- Gibt alle untergeordneten Knoten (einschließlich Textknoten) innerhalb des p-Elements zurück 🎜🎜21 end()-Methode: $('p') .find ('span').end() ---- Ändern Sie den Hauptteil der Anweisung zurück in den vorherigen Zustand, das heißt: Nachdem das span-Element gefunden wurde, kehrt der Fokus zum p-Element zurück 🎜rrreee🎜 Empfohlene verwandte Video-Tutorials: 🎜 jQuery-Tutorial🎜 (Video)🎜

Das obige ist der detaillierte Inhalt vonWelche Methoden gibt es zum Durchlaufen von Knoten in jquery?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn