ホームページ > 記事 > ウェブフロントエンド > jqueryの検索方法とは何ですか?

jqueryの検索方法とは何ですか?

青灯夜游オリジナル: 2023-01-28 13:56:252154ブラウズ

検索メソッドは次のとおりです: 1. 現在の要素の親要素を検索できるparent()、2. 現在の要素の祖先要素を検索できるparents()、3. Children() 、現在の要素の子を検索できます。 element; 4. find()、現在の要素の子孫要素を検索できます。 5. content(); 6. sinners(); 7. next(); 8. nextAll (); 9. nextUntil(); 10. prev( ); 11. prevUntil() など。

jqueryの検索方法とは何ですか?

このチュートリアルの動作環境: Windows7 システム、jquery3.6 バージョン、Dell G3 コンピューター。

jQuery では要素をより柔軟に操作するために、セレクター以外にも「フィルターメソッド」と「ファインドメソッド」の 2 つのメソッドを「メソッド」として提供しています。フィルタリングメソッドと検索メソッドは、実際には jQuery セレクターを補足するものです。

フィルタリング方法は、選択した要素をさらにフィルタリングすることを指します。検索方法は主に、現在選択されている要素を基点として、この要素の親要素、子要素、または兄弟要素を検索します。

jQueryでは、検索方法として以下の3つの場合に分けられます。

#祖先要素の検索
子孫要素の検索
兄弟要素の検索

jQuery の先祖要素の検索

jQuery で、現在の要素の先祖要素 (親要素、親要素) を見つけたい場合, など）、以下の3つの方法があります。

(1)親()
(2)親()
(3) )parentsUntil()

1.parent()

jQuery では、parent() メソッドを使用して「親要素」を見つけることができます。」。要素には親要素が 1 つだけあることに注意してください。

構文:

$.parent(selector)

説明:

selector はオプションのパラメーターで、条件を満たす親要素を検索するために使用されるセレクターです。パラメータを省略した場合は親要素が条件を満たさなくてもよいことを意味し、パラメータを省略しなかった場合は親要素が条件を満たさなくてもよいことを意味する。

例: パラメータなしのparent()

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

デフォルトでは、プレビュー効果は次のようになります。

jqueryの検索方法とは何ですか? #マウスを特定のセル上に移動すると、プレビュー効果は次のようになります。

jqueryの検索方法とは何ですか? 分析:

$(this).parent() は、現在の td 要素の親要素 (tr) を選択することを意味しますが、親要素 (表）は選択されません。

例:parent() パラメータ付き

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

デフォルトでは、プレビュー効果は次のようになります。

jqueryの検索方法とは何ですか?

class="select"

の td 要素上にマウスを移動すると、プレビュー効果は次の図のようになります。

jqueryの検索方法とは何ですか? 分析:

$(this).parent(".select")

は、現在の td の親要素を選択することを意味します要素 (tr) であり、親要素にはクラス名「select」が含まれている必要があります。

2.parents()

jQuery では、parents() メソッドを使用して、現在の要素の「先祖要素」を見つけることができます。要素には複数の祖先要素を含めることができることに注意してください。

2 つのメソッドparent() とparents() は簡単に区別できます。このうち、parent() は単数なので、検索対象となる要素は親要素の 1 つだけです。 parents() は複数であるため、検索対象となる要素は複数あり、すべての祖先要素 (親要素、祖父要素などを含む) が含まれます。

構文:

$().parents(selector)

説明:

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").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>

コンソールの出力は次のとおりです。

jqueryの検索方法とは何ですか? 分析:

("span").parents()

は jQuery オブジェクトのコレクションを返します。この例では、 .each() を使用して、span 要素のすべての祖先要素を走査します。 .each() メソッドについては、後続の章で詳しく紹介します。「要素のタグ名を取得するには、(this).tagName を使用すべきではありませんか? なぜここで this.tagName が使用されるのですか?」 $(this) は jQuery オブジェクトです。 click()、keyup() などの jQuery メソッドまたはプロパティを呼び出します。これは DOM オブジェクトであり、this.id、this.value などの DOM オブジェクトのメソッドまたはプロパティを呼び出します。 tagName 属性は DOM オブジェクトに属しているため、ここでは 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>

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

jqueryの検索方法とは何ですか?

分析：

在实际开发中，我们一般只会用到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>

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

jqueryの検索方法とは何ですか?

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

jqueryの検索方法とは何ですか?

分析：

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

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

jqueryの検索方法とは何ですか?

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

jqueryの検索方法とは何ですか?

分析：

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

jqueryの検索方法とは何ですか?

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>

jqueryの検索方法とは何ですか?

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>

jqueryの検索方法とは何ですか?

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>

jqueryの検索方法とは何ですか?

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>

jqueryの検索方法とは何ですか?

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>

jqueryの検索方法とは何ですか?

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>

jqueryの検索方法とは何ですか?

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

以上がjqueryの検索方法とは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：CSSブラウザが文字化けした場合の対処法次の記事：CSSブラウザが文字化けした場合の対処法

続きを見る