Heim  >  Artikel  >  Web-Frontend  >  Zusammenfassung der jQuery-Knotendurchlaufmethoden

Zusammenfassung der jQuery-Knotendurchlaufmethoden

小云云
小云云Original
2018-01-12 09:42:421845Durchsuche

Dieser Artikel sammelt und organisiert hauptsächlich die Methoden zum Durchlaufen von jQuery-Knoten, damit jeder ein klareres Verständnis für das Durchqueren von jQuery-Knoten hat. Freunde, die es benötigen, können darauf verweisen kann jedem helfen.

1.children()-Methode: $('p').children()---Traverse und finde alle untergeordneten Elementknoten des p-Elements

<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( ) Methode :$('p').next() --- Benachbarte Geschwisterelemente nach dem p-Element finden, aber nicht alle Geschwisterelemente

 [Verwandte Methoden]

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

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

<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()-Methode: $('p').prev() ---- Finde p Vorherige benachbarte Geschwisterelemente

[Verwandte Methoden umfassen]

(1) prevAll()-Methode: $('p').prevAll() ---- Suchen Sie die Elemente vor p Alle Geschwisterelemente

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

<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.siblings()-Methode : $('p').siblings()---- Alle Geschwisterelemente vor und nach p finden

5.find()-Methode: $('p') .find('span') - --- Finden Sie das Unterelement innerhalb des p-Elements und es ist ein Span-Element

6.eq()-Methode: $('p').eq(1) --- Finden Sie die zweiten p-Elemente (Indexindex beginnt bei 0)

7.first()-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 dem Klassennamen box

10.is()-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 das Eingabeelement, um seinen Wert "," zu erhalten wird am Ende des p-Elements hinzugefügt

<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() Methode: $('p').hasClass('box') ---- Suchen Sie das Klassennamenfeld p

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

14.not( ) Methode: $( 'p').not('span') ---- Finden Sie p-Elemente, die keine span-Elemente enthalten

15.slice()-Methode: $('p').slice (0,2) ---- Finden Sie das 1. p-Element bis zum 3. p-Element

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

17.parent() Methode: $('p').parent() ---- Gibt den Elementsatz zurück, der den eindeutigen übergeordneten Knoten des p-Elements enthält

18.parents() Methode: $('p').parent() ---- Gibt alle Vorgängerknoten zurück, die das p-Element enthalten (mit Ausnahme des Wurzelknotens)

19.parentUntil() Methode :$('p'). parentUntil('#box') ---- Finden Sie die Vorgängerelemente des p-Elements bis #box

20.contents()-Methode: $('p'contents()) --- Gibt alle zurück Untergeordnete Knoten (einschließlich Textknoten) innerhalb des p-Elements

21.end()-Methode: $('p').find('span').end() - --- Ändern Sie den Hauptteil des Die Aussage kehrt in den vorherigen Zustand zurück, das heißt: Nachdem das Span-Element gefunden wurde, kehrt der Fokus zum P-Element zurück

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

Verwandte Empfehlungen:

Ausführliche Erklärung von jQuery implementiert die Funktionen des dynamischen Hinzufügens von Knoten und des Durchlaufens von Knoten

Ein kleiner Satz von Methoden für Jquery zum Durchlaufen von Knoten_jquery

jQuery-Schleifendurchlauf zum Ändern die href eines Tags Ausführliche Erklärung

Das obige ist der detaillierte Inhalt vonZusammenfassung der jQuery-Knotendurchlaufmethoden. 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