jQuery ------ 遍历

jQuery——祖先

parent()：返回被选元素的直接父元素。该方法只会向上一级对 DOM 树进行遍历。

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="jQuery.js"></script>
    <style>
        .ancestors *{
    
     
	        display: block;
	        border: 2px solid lightgrey;
	        color: lightgrey;
	        padding: 5px;
	        margin: 15px;
        }
    </style>
</head>
<body>
    <div class="ancestors">
        <div style="width:500px;">div (祖父元素)   
          <p>p (父元素)
              <span>span</span>
            </p> 
        </div>
    </div>
    <script>
        $(function(){
    
    
                $('span').parent().css({
    
    "color":"red","border":"2px solid red"})
        })
    </script>
</body>
</html>

parents()：返回被选元素的所有祖先元素，一路向上直到文档的根元素。

	$('span').parents().css({
    
    "color":"red","border":"2px solid red"})

parentsUntil()：返回介于两个给定元素之间的所有祖先元素。

	// 返回介于 span 和 div的所有祖先元素
    $("span").parentsUntil("div").css({
    
    "color":"red","border":"2px solid red"})

在这里插入图片描述

jQuery——后代

children()：返回被选元素的所有直接子元素。该方法只会向下一级对DOM树进行遍历。

返回每个 div 元素的所有直接子元素：

	$('p').children().css({
    
    "color":"red","border":"2px solid red"})

在这里插入图片描述
返回类名为 1 的所有 p 元素：

	$("div").children("p.1")

find()：返回被选元素的后代元素，一路向下直到最后一个后代。

返回属于 div 后代的所有 span 元素：

	$('div').find('span').css({
    
    "color":"red","border":"2px solid red"})

在这里插入图片描述

jQuery——同胞（水平遍历）

siblings()：返回被选元素的所有同胞元素。

返回 h2 的同胞元素：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
	.siblings *
	{
    
     
		display: block;
		border: 2px solid lightgrey;
		color: lightgrey;
		padding: 5px;
		margin: 15px;
	}
</style>
    <script src="jQuery.js"></script>
<script>
	$(document).ready(function(){
    
    
		$("h2").siblings().css({
    
    "color":"red","border":"2px solid red"});
	})
</script>
</head>
<body class="siblings">
	<div>div (父元素)
  		<p>p</p>
  		<span>span</span>
  		<h2>h2</h2>
  		<h3>h3</h3>
  		<p>p</p>
	</div>
</body>
</html>

在这里插入图片描述

返回属于 h2 的同胞元素的所有 p 元素：$("h2").siblings("p");

next()：返回被选元素的下一个同胞元素。该方法只返回一个元素。

	$("h2").next()

在这里插入图片描述

nextAll()：返回被选元素的所有跟随的同胞元素。

	$("h2").nextAll()

在这里插入图片描述

nextUntil()：返回介于两个给定参数之间的所有跟随的同胞元素。

	$("p").nextUntil("h3");

在这里插入图片描述

jQuery——过滤

first()：返回被选元素的首个元素。

选取首个 div 元素内部的第一个 p 元素：

	<div>
        <p>这是 div 中的一个段落。</p>
    </div>
    
    <div>
        <p>这是另外一个 div 中的一个段落。</p>
    </div>
    
    <script>
        $(function(){
    
    
            $("div p").first().css('background-color','yellow')
        })
    </script>

在这里插入图片描述

last()：返回被选元素的最后一个元素。

	$('div p').last().css('background-color','yellow')

在这里插入图片描述

eq()：返回被选元素中带有指定索引号的元素。索引号从0开始而不是从1。

	$("p").eq(1).css('background-color','yellow')

在这里插入图片描述

filter()：允许规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回。

	<p class='url'>http://www.baidu.com</p>
    <p>百度baidu</p>
    
	$("p").filter('.url').css('color','red')

在这里插入图片描述

not()：返回不匹配标准的所有元素。

	$("p").not('.url').css('color','red')

在这里插入图片描述
不积跬步无以至千里不积小流无以成江海

jQuery——祖先

jQuery——后代

jQuery——同胞（水平遍历）

jQuery——过滤

猜你喜欢