Heim > Artikel > Web-Frontend > Was sind die JQuery-Suchmethoden?

Was sind die JQuery-Suchmethoden?

青灯夜游Original: 2023-01-28 13:56:252182Durchsuche

Die Suchmethoden sind: 1. parent(), das das übergeordnete Element des aktuellen Elements finden kann; 2. parent(), das die Vorgängerelemente des aktuellen Elements finden kann; die untergeordneten Elemente des aktuellen Elements; 5. siblings(); 9. nextAll(); (); 10. prev(); 11. prevUntil() und so weiter.

Die Betriebsumgebung dieses Tutorials: Windows7-System, JQuery3.6-Version, Dell G3-Computer.

Um Elemente flexibler zu bedienen, stellt uns jQuery neben Selektoren auch zwei Möglichkeiten in Form von „Methoden“ zur Verfügung: eine ist die „Filtermethode“ und die andere ist die „Suchmethode“. Die Filtermethode und die Suchmethode sind eigentlich eine Ergänzung zum jQuery-Selektor.

Filtermethode bezieht sich auf die weitere Filterung der ausgewählten Elemente. Die Suchmethode verwendet hauptsächlich das aktuell ausgewählte Element als Basispunkt, um das übergeordnete Element, untergeordnete Element oder Geschwisterelement dieses Elements zu finden.

In jQuery können wir die Suchmethode in die folgenden drei Situationen unterteilen.

Vorfahrenelemente finden
Nachkommenelemente finden
Geschwisterelemente finden

jQuery Vorfahrenelemente finden

In jQuery, wenn Ich möchte die Vorfahrenelemente (Eltern) der finden aktuelle Elementelemente, Ye-Elemente usw.) haben wir die folgenden 3 Methoden.

(1) parent () ()-Methode, um das „übergeordnete Element“ des aktuellen Elements zu finden. Beachten Sie, dass Elemente nur ein übergeordnetes Element haben.
```
$.parent(selector)
```
Beschreibung:

Beispiel: parent() ohne Parameter

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        table, tr, td{border:1px solid silver;}
        td
        {
            width:40px;
            height:40px;
            line-height:40px;
            text-align:center;
        }
    </style>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        $(function(){
            $("td").hover(function () {
                $(this).parent().css("background-color", "silver");
            }, function () {
                $(this).parent().css("background-color", "white");
            })
        })
    </script>
</head>
<body>
    <table>
        <tr>
            <td>2</td>
            <td>4</td>
            <td>8</td>
        </tr>
        <tr>
            <td>16</td>
            <td>32</td>
            <td>64</td>
        </tr>
        <tr>
            <td>128</td>
            <td>256</td>
            <td>512</td>
        </tr>
    </table>
</body>
</html>

Wenn die Maus über eine bestimmte Zelle bewegt wird, sieht der Vorschaueffekt wie unten gezeigt aus.

Analyse:

$(this).parent() bedeutet, dass das übergeordnete Element (tr) des aktuellen td-Elements ausgewählt wird, das übergeordnete Element (table) jedoch nicht ausgewählt wird.

Beispiel: parent() mit Parametern

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        table, tr, td{border:1px solid silver;}
        td
        {
            width:40px;
            height:40px;
            line-height:40px;
            text-align:center;
        }
    </style>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        $(function(){
            $("td").hover(function () {
                $(this).parent(".select").css("background-color", "silver")
            }, function () {
                $(this).parent(".select").css("background-color", "white")
            })
        })
    </script>
</head>
<body>
    <table>
        <tr>
            <td>2</td>
            <td>4</td>
            <td>8</td>
        </tr>
        <tr class="select">
            <td>16</td>
            <td>32</td>
            <td>64</td>
        </tr>
        <tr>
            <td>128</td>
            <td>256</td>
            <td>512</td>
        </tr>
    </table>
</body>
</html>

Standardmäßig ist der Vorschaueffekt wie unten dargestellt.

Was sind die JQuery-Suchmethoden?

Wenn sich die Maus über das td-Element von class="select" bewegt, sieht der Vorschaueffekt wie in der folgenden Abbildung dargestellt aus.

Was sind die JQuery-Suchmethoden?

Analyse :

$(this).parent(".select") bedeutet die Auswahl des übergeordneten Elements (tr) des aktuellen td-Elements, und das übergeordnete Element muss den Klassennamen „select“ enthalten.

2. Parents()

In jQuery können wir die Parents()-Methode verwenden, um die „Vorfahrenelemente“ des aktuellen Elements zu finden. Beachten Sie, dass Elemente mehrere Vorfahrenelemente haben können. Die beiden Methoden parent() und parent() sind leicht zu unterscheiden. Unter diesen ist parent() eine singuläre Zahl, sodass nur ein Element gesucht werden muss, nämlich das übergeordnete Element. parent() ist eine Pluralzahl, daher müssen mehrere Elemente durchsucht werden, d. h. alle Vorgängerelemente (einschließlich übergeordneter Elemente, Großvaterelemente usw.).

Was sind die JQuery-Suchmethoden? Syntax:

$().parents(selector)

Beschreibung: class="select"的td元素上时，此时预览效果如下图所示。

Was sind die JQuery-Suchmethoden?

分析：

$(this).parent(".select")表示选取当前td元素的父元素（tr），并且父元素必须含有类名“select”。

2、parents()

在jQuery中，我们可以使用parents()方法来查找当前元素的“祖先元素”。注意，元素可以有多个祖先元素

parent()和parents()这两个方法很好区分。其中，parent()是单数，因此查找的元素只有一个，那就是父元素。parents()是复数，因此查找的元素有多个，那就是所有的祖先元素（包括父元素、爷元素等）。

语法：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        $(function(){
            var parents = $("span").parents();
            var result = [];
            $.each(parents, function(){
                var item = this.tagName.toLowerCase();
                result.push(item);
            });
            console.log(result.join(","));
        })
    </script>
</head>
<body>
    <div>
        <p>
            <strong>
                <span>绿叶学习网</span>
            </strong>
        </p>
    </div>
</body>
</html>

说明：

selector是一个可选参数，它是一个选择器，用来查找符合条件的祖先元素。当参数省略，表示祖先元素不需要满足任何条件；当参数不省略时，表示祖先元素需要满足条件。

举例：查找所有祖先元素

$().parentsUntil(selecotr)

控制台输出结果如下图所示。

Was sind die JQuery-Suchmethoden?

分析：

("span").parents()

selector ist ein optionaler Parameter, bei dem es sich um einen Selektor handelt, der verwendet wird, um Vorfahrenelemente zu finden, die die Bedingungen erfüllen. Wenn der Parameter weggelassen wird, bedeutet dies, dass das Vorgängerelement keine Bedingungen erfüllen muss. Wenn der Parameter nicht weggelassen wird, bedeutet dies, dass das Vorgängerelement die Bedingung erfüllen muss.

Beispiel: Alle Vorgängerelemente finden🎜

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        $(function(){
            var parents = $("span").parentsUntil("div");
            var result = [];
            $.each(parents, function(){
                var item = this.tagName.toLowerCase();
                result.push(item);
            });
            console.log(result.join(","));
        })
    </script>
</head>
<body>
    <div>
        <p>
            <strong>
                <span>绿叶学习网</span>
            </strong>
        </p>
    </div>
</body>
</html>

🎜Die Konsolenausgabe ist wie unten dargestellt. 🎜🎜 Was sind die JQuery-Suchmethoden?

🎜🎜Analyse :🎜🎜("span").parents() gibt eine Sammlung von jQuery-Objekten zurück. In diesem Beispiel verwenden wir .each(), um alle Vorgängerelemente des span-Elements zu durchlaufen. Die Methode .each() werden wir in den folgenden Kapiteln ausführlich vorstellen. Einige Freunde fragen sich vielleicht: „Um den Tag-Namen eines Elements zu erhalten, sollten Sie nicht (this).tagName verwenden? Warum wird this.tagName hier verwendet?“ 🎜🎜$(this) ist ein jQuery-Objekt, das es nennt ist eine Methode oder ein Attribut von jQuery, wie z. B. click(), keyup() usw. Dies ist ein DOM-Objekt, das Methoden oder Eigenschaften des DOM-Objekts aufruft, z. B. this.id, this.value usw. Da das tagName-Attribut zum DOM-Objekt gehört, verwenden wir hier this.tagName. 🎜

3、parentsUntil()

在jQuery中，parentsUntil()方法是parents()方法的一个补充，它可以查找“指定范围”的所有祖先元素，相当于在parents()方法返回的集合中截取一部分。

语法：

$().parentsUntil(selecotr)

说明：

selector是一个可选参数，它是一个选择器，用来选择符合条件的祖先元素。

举例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        $(function(){
            var parents = $("span").parentsUntil("div");
            var result = [];
            $.each(parents, function(){
                var item = this.tagName.toLowerCase();
                result.push(item);
            });
            console.log(result.join(","));
        })
    </script>
</head>
<body>
    <div>
        <p>
            <strong>
                <span>绿叶学习网</span>
            </strong>
        </p>
    </div>
</body>
</html>

控制台输出结果如下图所示。

Was sind die JQuery-Suchmethoden?

分析：

在实际开发中，我们一般只会用到parent()方法和parents()这两个，极少用到parentsUntil()。因此对于parentsUntil()方法，我们了解一下就行。

jQuery查找后代元素

在jQuery中，如果想要查找当前元素的后代元素（子元素、孙元素等），我们有以下3种方法：

（1）children()
（2）find()
（3）contents()

1、children()

在jQuery中，我们可以使用children()方法来查找当前元素的“子元素”。注意，children()方法只能查找子元素，不能查找其他后代元素。

语法：

$().children(selector)

说明：

selector是一个可选参数，它是一个选择器，用来查找符合条件的子元素。当参数省略，表示选择所有子元素；当参数不省略时，表示选择符合条件的子元素。

举例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style lang="">
        p{margin:6px 0;}
    </style>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        $(function(){
            $("#wrapper").hover(function(){
                $(this).children(".select").css("color", "red");
            },function(){
                $(this).children(".select").css("color", "black");
            })
        })
    </script>
</head>
<body>
    <div id="wrapper">
        <p>子元素</p>
        <p>子元素</p>
        <div>
            <p>孙元素</p>
            <p>孙元素</p>
        </div>
        <p>子元素</p>
        <p>子元素</p>
    </div>
</body>
</html>

默认情况下，预览效果如下图所示。

Was sind die JQuery-Suchmethoden?

当鼠标移到id="wrapper"的div元素上面，此时预览效果如下图所示。

Was sind die JQuery-Suchmethoden?

分析：

$(this).children(".select")表示获取当前元素下的class="select"的子元素。我们可以发现，class="select"的孙元素却不会被选中。

2、find()

在jQuery中，我们可以使用find()方法来查找当前元素的“后代元素”。注意，find()方法不仅能查找子元素，还能查找其他后代元素。

语法：

$().find(selector)

说明：

selector是一个可选参数，它是一个选择器，用来查找符合条件的后代元素。当参数省略，表示选择所有后代元素；当参数不省略时，表示选择符合条件的后代元素。

举例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style lang="">
        p{margin:6px 0;}
    </style>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        $(function(){
            $("#wrapper").hover(function(){
                $(this).find(".select").css("color", "red");
            },function(){
                $(this).find(".select").css("color", "black");
            })
        })
    </script>
</head>
<body>
    <div id="wrapper">
        <p>子元素</p>
        <p>子元素</p>
        <div>
            <p>孙元素</p>
            <p>孙元素</p>
        </div>
        <p>子元素</p>
        <p>子元素</p>
    </div>
</body>
</html>

默认情况下，预览效果如下图所示。

Was sind die JQuery-Suchmethoden?

当鼠标移到id="wrapper"的div元素上面，此时预览效果如下图所示。

Was sind die JQuery-Suchmethoden?

分析：

$(this).find(".select")表示不仅会选取当前元素下的class="select"的子元素，还会选取class="select"的孙元素。

3、contents()

在jQuery中，我们可以使用contents()方法来获取子元素及其内部文本。contents()方法和children()方法相似，不同的是，contents()返回的jQuery对象中不仅包含子元素，还包含文本内容。而children()方法返回的jQuery对象中只会包含子元素，不包含文本内容。

在实际开发中，我们极少会用到contents()方法，因此小伙伴们不需要深入了解，这里简单认识一下即可。

jQuery查找兄弟元素

兄弟元素，指的是该元素在同一个父元素下的同级元素。

在jquery中，查询同级元素一般有七个方法：siblings()、next()、nextAll()、nextUntil()、prev()、prevAll()、prevUntil()

siblings()方法，主要用于获得指定元素的同级所有元素
next()方法，主要用于获得指定元素的下一个同级元素
nextAll()方法，主要用于获得指定元素的下一个同级的所有元素
nextUntil()方法，主要用于获得指定元素的下一个同级元素，这个同级元素必须为指定元素与nextUntil()方法所设置元素之间的元素
prev()方法，主要用于获得指定元素的上一级同级元素
prevAll()方法，主要用于获得指定元素上一级所有的同级元素
prevUntil()方法，主要用于获得指定元素的上一个同级元素，这个同级元素必须为指定元素与prevUntil()方法所设置元素之间的元素

siblings()方法

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

Was sind die JQuery-Suchmethoden?

next()方法

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

Was sind die JQuery-Suchmethoden?

nextAll()方法

<!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;).nextAll().css(&#39;background-color&#39;, &#39;red&#39;);
		</script>

	</body>
</html>

Was sind die JQuery-Suchmethoden?

nextUntil()方法

<!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").nextUntil("li.stop").css({
					"color": "red",
					"border": "2px solid red"
				});
			});
		</script>
	</head>
	<body>

		<div style="width:500px;" class="siblings">
			<ul>ul (父节点)
				<li>li (兄弟节点)</li>
				<li>li (兄弟节点)</li>
				<li class="start">li (类名为"start"的兄弟节点)</li>
				<li>li (类名为"start"的li节点的下一个兄弟节点)</li>
				<li>li (类名为"start"的li节点的下一个兄弟节点)</li>
				<li>li (类名为"start"的li节点的下一个兄弟节点)</li>
				<li class="stop">li (类名为"stop"的兄弟节点)</li>
			</ul>
		</div>
		<p>在这个例子中,我们返回在类名为“star”和类名为“stop”的 li元素之间的所有下一个兄弟元素。</p>

	</body>
</html>

Was sind die JQuery-Suchmethoden?

prev()方法

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

Was sind die JQuery-Suchmethoden?

prevAll()方法

<!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").prevAll().css({
					"color": "red",
					"border": "2px solid red"
				});
			});
		</script>
	</head>
	<body>

		<div style="width:500px;" class="siblings">
			<ul>ul (parent)
				<li>li (类名为"start"的li的上一个兄弟节点)</li>
				<li>li (类名为"start"的li的上一个兄弟节点)</li>
				<li>li (类名为"start"的li的上一个兄弟节点)</li>
				<li class="start">li (类名为"start"的li节点)</li>
				<li>li (兄弟节点)</li>
				<li>li (兄弟节点)</li>
			</ul>
		</div>
		<p>在这个例子中,我们返回类名称为“star”的li元素之前的所有兄弟元素。</p>

	</body>
</html>

Was sind die JQuery-Suchmethoden?

prevUntil()方法

<!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").prevUntil("li.stop").css({
					"color": "red",
					"border": "2px solid red"
				});
			});
		</script>
	</head>
	<body>

		<div style="width:500px;" class="siblings">
			<ul>ul (父节点)
				<li class="stop">li (类名为"stop"的兄弟节点)</li>
				<li>li (类名为"start"的li节点的上一个兄弟节点)</li>
				<li>li (类名为"start"的li节点的上一个兄弟节点)</li>
				<li>li (类名为"start"的li节点的上一个兄弟节点)</li>
				<li class="start">li (类名为"start"的li节点)</li>
				<li>li (兄弟节点)</li>
				<li>li (兄弟节点)</li>
			</ul>
		</div>
		<p>在这个例子中,我们返回在类名为“star”和“stop”的li元素之间的所有上一个兄弟元素,。</p>

	</body>
</html>

Was sind die JQuery-Suchmethoden?

【推荐学习：jQuery视频教程、web前端视频】

Das obige ist der detaillierte Inhalt vonWas sind die JQuery-Suchmethoden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

jquery select class 对象 dom this 选择器 table td tr

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

Vorheriger Artikel：Was tun, wenn der CSS-Browser verstümmelt ist?Nächster Artikel：Was tun, wenn der CSS-Browser verstümmelt ist?

In Verbindung stehende Artikel

Mehr sehen