집 > 기사 > 웹 프론트엔드 > jquery 검색 방법이란 무엇입니까?

jquery 검색 방법이란 무엇입니까?

青灯夜游원래의: 2023-01-28 13:56:252038검색

검색 방법은 다음과 같습니다. 1. 현재 요소의 상위 요소를 찾을 수 있는 parent() 3. 현재 요소의 상위 요소를 찾을 수 있는 children(); 현재 요소의 하위 요소 4. find(), 현재 요소의 하위 요소를 찾을 수 있습니다. 6. siblings() 8. nextAll(); (); 10. prev(); 11. prevUntil() 등등.

이 튜토리얼의 운영 환경: windows7 시스템, jquery3.6 버전, Dell G3 컴퓨터.

요소를 보다 유연하게 조작하기 위해 jQuery는 선택기 외에도 "메서드" 형식의 두 가지 방법을 제공합니다. 하나는 "필터 메서드"이고 다른 하나는 "찾기 메서드"입니다. 필터링 방법과 검색 방법은 실제로 jQuery 선택기에 대한 보완입니다.

필터링 방법은 선택한 요소를 추가로 필터링하는 것을 의미합니다. 검색 방법은 주로 현재 선택된 요소를 기준점으로 사용하여 이 요소의 부모 요소, 자식 요소 또는 형제 요소를 찾습니다.

jQuery에서는 검색 방법을 아래와 같이 3가지 상황으로 나눌 수 있습니다.

조상 요소 찾기
후손 요소 찾기
형제 요소 찾기

jQuery 조상 요소 찾기

jQuery에서 조상 요소(부모)를 찾으려면 )의 현재 요소 요소, Ye 요소 등)에는 다음과 같은 3가지 방법이 있습니다.

(1) parent()
(2) parent()
(3) parentUntil()

1 jQuery에서는 parent를 사용할 수 있습니다. () 현재 요소의 "상위 요소"를 찾는 메서드입니다. 요소에는 상위 요소가 하나만 있습니다.

구문:

$.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)를 선택한다는 의미이지만 상위 요소(table)는 선택되지 않습니다.

예: 매개변수가 있는 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>

기본적으로 미리보기 효과는 아래와 같습니다.

class="select"의 td 요소 위로 마우스를 이동하면 아래 그림과 같은 미리보기 효과가 나타납니다. jquery 검색 방법이란 무엇입니까?

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

jquery 검색 방법이란 무엇입니까?

分析：

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

2、parents()

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

parent()和parents()这两个方法很好区分。其中，parent()是单数，因此查找的元素只有一个，那就是父元素。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()분석 :

$(this).parent(".select")는 현재 td 요소의 상위 요소(tr)를 선택한다는 의미이며, 상위 요소에는 클래스 이름 "select"가 포함되어야 합니다.

🎜🎜2.parents()🎜🎜🎜jQuery에서는 parent() 메소드를 사용하여 현재 요소의 "조상 요소"를 찾을 수 있습니다. 요소에는 여러 개의 상위 요소가 있을 수 있습니다. parent() 및 parent() 두 메서드는 쉽게 구별할 수 있습니다. 그 중 parent()는 단수이므로 검색할 요소는 단 하나, 즉 부모 요소뿐입니다. parent()는 복수이므로 검색할 요소가 여러 개 있습니다. 즉 모든 조상 요소(부모 요소, 할아버지 요소 등 포함)입니다. 🎜🎜구문: 🎜

$().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 검색 방법이란 무엇입니까?

🎜🎜분석 :🎜🎜("span").parents()는 jQuery 개체 컬렉션을 반환합니다. 이 예에서는 .each()를 사용하여 범위 요소의 모든 상위 요소를 순회합니다. .each() 메소드에 대해서는 다음 장에서 자세히 소개하겠습니다. 어떤 친구들은 "요소의 태그 이름을 얻으려면 (this).tagName을 사용하면 안 되나요? 여기서 this.tagName이 사용되는 이유는 무엇입니까?" 🎜🎜$(this)는 It을 호출하는 jQuery 개체입니다. click(), keyup() 등과 같은 jQuery의 메서드 또는 속성입니다. this.id, this.value 등과 같은 DOM 개체의 메서드나 속성을 호출하는 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

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

성명：

이전 기사：CSS 브라우저가 깨졌을 때 대처 방법다음 기사：CSS 브라우저가 깨졌을 때 대처 방법