Heim >Web-Frontend >Front-End-Fragen und Antworten >Welche Methoden verfügt JQuery für den Zugriff auf Knoten?

Welche Methoden verfügt JQuery für den Zugriff auf Knoten?

青灯夜游
青灯夜游Original
2022-04-28 14:29:581684Durchsuche

Knotenzugriffsmethoden: 1.children(), das auf alle direkten untergeordneten Elemente des ausgewählten Elements zugreifen kann; 2.most(), das auf das erste Vorfahrenelement des ausgewählten Elements zugreifen kann; greifen Sie auf die abgeleiteten Elemente des ausgewählten Elements zu; 4. first(), greifen Sie auf das erste Element des ausgewählten Elements zu, 5. last() usw.

Welche Methoden verfügt JQuery für den Zugriff auf Knoten?

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

JQuery-Methoden, die auf Knoten zugreifen können

Gibt alle direkten untergeordneten Elemente des ausgewählten Elements zurück (einschließlich Text- und Kommentarknoten)each()Führen Sie die Funktion für jedes übereinstimmende Element ausend()Beenden Sie die aktuelle Kette. Die neueste Filterung Operation und bringen Sie den Satz übereinstimmender Elemente in den vorherigen Zustand zurück. eq()Gibt das Element mit der angegebenen Indexnummer des ausgewählten Elements zurück auf neue Elemente reduziert, die dem Rückgabewert des Selektors oder der Matching-Funktion entsprechen
Methode Beschreibung
add() Elemente zum Satz übereinstimmender Elemente hinzufügen
addBack() Fügen Sie das Vorherige hinzu Satz von Elementen zum aktuellen Satz
has() Gibt alle Elemente zurück, die ein oder mehrere Elemente enthalten.
is() Überprüft den Satz übereinstimmender Elemente basierend auf dem Selektor-/Element-/jQuery-Objekt, wenn mindestens eines vorhanden ist passendes Element, Gibt true zurück
last() Gibt das letzte Element des ausgewählten Elements zurück
map() Übergeben Sie jedes Element im aktuellen Matching-Set an die Funktion und generieren Sie ein neues jQuery-Objekt, das das enthält Rückgabewert
next() Gibt das nächste Geschwisterelement des ausgewählten Elements zurück
nextAll() Gibt alle Geschwisterelemente nach dem ausgewählten Element zurück
nextUntil() Gibt zwischen Alle zurück. si Bling Elemente nach jedem Element zwischen den beiden angegebenen Parametern
not() Entfernt das Element aus der Menge der übereinstimmenden Elemente
offsetParent() Gibt das erste positionierte übergeordnete Element zurück
parent() Gibt das direkte übergeordnete Element des ausgewählten Elements zurück
parents() Gibt alle Vorfahrenelemente des ausgewählten Elements zurück
parentsUntil() Gibt zwischen zwei gegebenen Alle Vorfahrenelemente zwischen den angegebenen Parametern zurück
prev() Gibt das vorherige Geschwisterelement des ausgewählten Elements zurück
prevAll() Gibt alle Geschwisterelemente vor dem ausgewählten Element zurück
prevUntil() Gibt alle Geschwisterelemente vor jedem Element dazwischen zurück zwei gegebene Parameter
siblings() Gibt alle Geschwisterelemente des ausgewählten Elements zurück
slice() Reduziert den Satz übereinstimmender Elemente auf eine Teilmenge des angegebenen Bereichs

Unter diesen gibt es im Allgemeinen sieben Methoden für den Zugriff auf und die Abfrage von Geschwisterelementen: siblings(), next(), nextAll(), nextUntil(), prev(), prevAll(), prevUntil()

  • siblings() Methode, die hauptsächlich zum Abrufen aller Elemente derselben Ebene des angegebenen Elements verwendet wird.

  • next()-Methode, die hauptsächlich zum Abrufen des nächsten Geschwisterelements des angegebenen Elements verwendet wird.

  • nextAll()-Methode, die hauptsächlich zum Abrufen verwendet wird das nächste Element des angegebenen Elements Alle Elemente derselben Ebene

  • nextUntil()-Methode wird hauptsächlich verwendet, um das nächste Geschwisterelement des angegebenen Elements zu erhalten. Dieses Geschwisterelement muss das Element zwischen dem angegebenen Element und dem Elementsatz sein durch die nextUntil()-Methode

  • prev()-Methode, die hauptsächlich zum Abrufen aller Geschwisterelemente der oberen Ebene des angegebenen Elements verwendet wird

  • prevAll()-Methode, die hauptsächlich zum Erhalten aller Geschwisterelemente der oberen Ebene verwendet wird das angegebene Element

  • prevUntil() Methode, die hauptsächlich zum Abrufen des vorherigen Geschwisterelements des angegebenen Elements verwendet wird. Dieses Geschwisterelement muss das Element zwischen dem angegebenen Element und dem durch die prevUntil()-Methode festgelegten Element sein Beispiel:

siblings()-Methode

<!DOCTYPE html>
<html>
	<head>
		<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
	</head>

	<body>
		<div><span>Hello</span></div>
		<p class="selected">Hello Again</p>
		<p>And Again</p>

		<script>
			$("p").siblings(".selected").css("background", "yellow");
		</script>

	</body>
</html>

next()-MethodeWelche Methoden verfügt JQuery für den Zugriff auf Knoten?

<!DOCTYPE html>
<html>
	<head>
		<script type="text/javascript" src="js/jquery-1.10.2.min.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>

prev()-MethodeWelche Methoden verfügt JQuery für den Zugriff auf Knoten?

<!DOCTYPE html>
<html>
	<head>
		<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
		<style>
			.siblings * {
				display: block;
				border: 2px solid lightgrey;
				color: lightgrey;
				padding: 5px;
				margin: 15px;
			}
		</style>
		<script>
			$(document).ready(function() {
				$("li.start").prev().css({
					"color": "red",
					"border": "2px solid red"
				});
			});
		</script>
	</head>
	<body>

		<div style="width:500px;" class="siblings">
			<ul>ul (父节点)
				<li>li (兄弟节点)</li>
				<li>li (类名为"start"的li节点的上一个兄弟节点)</li>
				<li class="start">li (类名为"start"的li节点)</li>
				<li>li (兄弟节点)</li>
				<li>li (兄弟节点)</li>
			</ul>
		</div>

	</body>
</html>

Es gibt zwei Methoden, um auf untergeordnete Elemente zuzugreifen und diese abzufragen : find() und children()

Welche Methoden verfügt JQuery für den Zugriff auf Knoten?

Methode children(): Ruft die direkten Teilmengenelemente unter diesem Element ab

  • find()-Methode: Ruft alle Teilmengenelemente (einschließlich Teilmengen von Teilmengen) unter diesem Element ab

  • <html>
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<style>
    		div{
    			/*background-color: pink;*/
    		}
    	</style>
    </head>
    <body>
        <div>
        	<span>11</span>
        	<span>
        		<ul>
        			<li class="no1">aaa</li>
        			<li>bbb</li>
        			<li>ccc</li>
        		</ul>
        	</span>
        	<span>222</span>
        	<ul>
        		<li>ddd</li>
        		<li>eee</li>
        		<li>fff</li>
        	</ul>
        </div>
     
     
    </body>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script>
    	$("div").children(".no1").css({color:&#39;#a61c00&#39;,backgroundColor:"#0000ff"});
    	console.log($("div").children(".no1")[0]); // 打印获取到的dom元素 这时你会发现结果为 undefined 
     
    	// $("div").find(".no1").css({color:&#39;#a61c00&#39;,backgroundColor:"#0000ff"});
    </script>
    </html>

Zu diesem Zeitpunkt öffnen wir den Kommentar

<html>
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		div{
			/*background-color: pink;*/
		}
	</style>
</head>
<body>
    <div>
    	<span>11</span>
    	<span>
    		<ul>
    			<li class="no1">aaa</li>
    			<li>bbb</li>
    			<li>ccc</li>
    		</ul>
    	</span>
    	<span>222</span>
    	<ul>
    		<li>ddd</li>
    		<li>eee</li>
    		<li>fff</li>
    	</ul>
    </div>
 
</body>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
	// $("div").children(".no1").css({color:&#39;#a61c00&#39;,backgroundColor:"#0000ff"});
	// console.log($("div").children(".no1")[0]);
 
 
	$("div").find(".no1").css({color:&#39;#a61c00&#39;,backgroundColor:"#0000ff"});
	console.log($("div").find(".no1")[0]);
</script>
</html>
Welche Methoden verfügt JQuery für den Zugriff auf Knoten?, der dem gefundenen Element entspricht:

[Empfohlenes Lernen:

jQuery-Video-TutorialWelche Methoden verfügt JQuery für den Zugriff auf Knoten?,

Web-Frontend

]

Das obige ist der detaillierte Inhalt vonWelche Methoden verfügt JQuery für den Zugriff auf Knoten?. 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