Methodeninstanzen zur Verwendung von JQuery-Selektoren zum Abrufen von übergeordneten Elementen, untergeordneten Elementen und Geschwisterelementen-js-Tutorial-php.cn

Methodeninstanzen zur Verwendung von JQuery-Selektoren zum Abrufen von übergeordneten Elementen, untergeordneten Elementen und Geschwisterelementen

伊谢尔伦

Freigeben： 2018-05-15 11:11:56

Original

2914 Leute haben es durchsucht

1. Elternelemente abrufen

1. parent([expr]): Alle übergeordneten Elemente des angegebenen Elements abrufen

<p id="par_p"><a id="href_fir" href="#">href_fir</a> 
<a id="href_sec" href="#">href_sec</a> 
<a id="href_thr" href="#">href_thr</a></p> 
<span id="par_span"> 
<a id="href_fiv" href="#">href_fiv</a> 
</span> 
$(
document
).ready(function(){ 
$("a").parent().addClass(&#39;a_par&#39;); 
});

Nach dem Login kopieren

Firebug Jquery-Elterneffekt anzeigen

2. Geschwisterelemente abrufen:
1. next([expr]):
Das nächste Geschwisterelement des angegebenen Elements abrufen (beachten Sie, dass es das nächste ist Elemente derselben Ebene)

<!DOCTYPE html> 
<html> 
<head> 
<script type="text/
javascript
" src="/jquery/jquery.js"></script> 
</head> 
<body> 
<ul> 
<li>list item 1</li> 
<li>list item 2</li> 
<li class="third-item">list item 3</li> 
<li>list item 4</li> 
<li>list item 5</li> 
</ul> 
<script> 
$(&#39;li.third-item&#39;).next().css(&#39;
background-color
&#39;, &#39;red&#39;); 
</script> 
</body> 
</html>

Nach dem Login kopieren

Das Ergebnis dieses Beispiels ist, dass sich nur die Hintergrundfarbe von Listenelement 4 in Rot ändert
2. nextAll([expr]):
Get all Elemente nach dem angegebenen Element Geschwisterelemente

<p><span>And Again</span></p> 
var p_nex = $("p").nextAll(); 
p_nex.addClass(&#39;p_next_all&#39;);

Nach dem Login kopieren

Achten Sie auf das letzte "

"-Tag, das auch mit dem Klassennamen 'p_next_all'~~ hinzugefügt wird
3. ):
Alle Geschwisterelemente hinter dem angegebenen Element abrufen und dann das angegebene Element hinzufügen

<p>Hello</p><p>Hello Again</p><p><span>And Again</span></p> 
var p_nex = $("p").nextAll().andSelf(); 
p_nex.addClass(&#39;p_next_all&#39;);

Nach dem Login kopieren

Achten Sie auf das erste „

“-Tag, dieser Satz bedeutet Auswahl „Alle“. Geschwister-Tags, die dem p-Tag folgen, sowie sich selbst. . .
Die folgenden beiden geben keine konkreten Beispiele an. Sie sind eigentlich das Gegenteil von next() und nextAll()
4: Holen Sie sich das vorherige Geschwisterelement des angegebenen Elements (das vorherige).
5. prevAll(): Alle Geschwisterelemente vor dem angegebenen Element abrufen.
3. Unterelemente abrufen
Suche nach Unterelementen Methode 1:> Zum Beispiel: var aNods = $("ul > a"); >2, Methode 2, um untergeordnete Elemente zu finden: children()
3. Methode 3, um untergeordnete Elemente zu finden: find()
Hier stellen wir kurz die Ähnlichkeiten und Unterschiede zwischen children() und find() vor:
1>-Kinder und find-Methode
wird beide verwendet, um die Unterelemente des Elements abzurufen. Keines von ihnen gibt einen Textknoten zurück, genau wie die meisten jQuery-Methoden.
2> Die Kindermethode ruft nur die untergeordneten Elemente unterhalb des Elements ab, nämlich: unmittelbare Kinder. 3> Die Suchmethode ruft alle untergeordneten Elemente ab, das heißt: Nachkommen dieser Elemente im DOM-Baum 4> Der Parameterselektor der Kindermethode ist optional (optional) und wird zum Filtern untergeordneter Elemente verwendet >Aber die Parameterauswahlmethode der Suchmethode ist erforderlich.
5> Die Suchmethode kann tatsächlich mithilfe von jQuery (Selektor, Kontext) implementiert werden. Das heißt, $('li.item-ii').find('li') entspricht $('li', 'li.item-ii'). 🎜>Verwenden Sie :$('ul.level-2').children().css('border', '1px solid green');
Verwenden Sie $('ul.level-2').find(' li') .css('border', '1px solid green').

Das obige ist der detaillierte Inhalt vonMethodeninstanzen zur Verwendung von JQuery-Selektoren zum Abrufen von übergeordneten Elementen, untergeordneten Elementen und Geschwisterelementen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!