jQuery 遍历

在jQuery中，遍历是指在HTML元素上移动，以寻找、过滤或选择一个特定的或整个元素。
根据穿越的目的，以下方法被分类为：

树遍历:

祖先:

parent()
它给出了指定选择器的父元素
语法:

$(selector).parent();

parents()
它给出指定选择器的所有祖先元素。
语法:

$(selector).parents();

parentsUntil()
它给出指定的选择器和参数之间的所有祖先元素。
语法:

$(selector).parentsUntil(selector, filter element)

$(selector).parentsUntil(element, filter element)

offsetParent()
它给出了指定选择器的第一个定位的父元素。
语法:

$(selector).offsetParent();

closest()
它给出指定选择器的第一个祖先。
语法:

$(selector).closest(selector);

$(selector).closest(selector, context);

$(selector).closest(selection);

$(selector).closest(element);

后代:

children()
它给出了每个被选中的元素的子代，可以选择通过一个选择器来过滤。
语法:

$(selector).children();

find()
它给出了指定元素的后代元素，通过选择器、jQuery对象或元素进行过滤。
语法:

$(selector).find('selector to find');

兄弟姐妹:

siblings()
它给出了指定选择器的所有同辈。
语法:

$(selector).siblings();

next()
它给出指定选择器的下一个同级元素。
语法:

$(selector).next();

nextAll()
它给出指定选择器的所有下一个同级元素。
语法:

$(selector).nextAll();

nextUntil()
它给出指定的选择器和参数之间的所有下一个同级元素。
语法:

$(selector).nextUntil();

prev()
它给出了指定选择器的前一个同级元素。
语法:

$(selector).prev(selector);

$(selector).prev()

prevAll()
它给出指定选择器的所有先前的同级元素。
语法:

$(selector).prevAll(selector, filter element)

$(selector).prevAll(element, filter element)

prevUntil()
它给出指定的选择器和参数之间的所有先前的同级元素。
语法:

$(selector).prevUntil(selector, filter element)

$(selector).prevUntil(element, filter element)

过滤

first()
它给出指定选择器的第一个元素。
语法:

$(selector).first();

last()
它给出指定选择器的最后一个元素。
语法:

$(selector).last();

eq()
它给出一个具有指定选择器的特定索引号的元素。
语法:

$(selector).eq(index);

$(selector).eq( indexFromEnd );

filter()
它删除/检测与指定选择器匹配的元素。
语法:

$(selector).filter(selector)

$(selector).filter(function)

$(selector).filter(selection)

$(selector).filter(elements)

has()
它给出了有一个或多个元素的所有元素，这些元素与指定的选择器匹配。
语法:

$(selector).has(selector);

is()
它检查指定的选择器之一是否与参数相匹配。
语法:

.is( selector )

.is( function )

.is( selection )

.is( elements )

map()
通过一个函数传递当前匹配集的每个元素，产生一个新的jQuery对象，包含返回值
语法:

.map( callback )

slice()
它根据参数索引或通过开始和停止值选择指定选择器的一个子集。
语法:

$(selector).slice(start, end );

$(selector).slice(start);

Miscellaneous Traversing

add()
它将所有的元素加入到匹配元素的集合中，以便同时操作它们。
语法:

$(selector).add(selector to add);

addBack()
它将堆栈中的前一组元素添加到当前的集合中，可以选择通过选择器进行过滤。
语法:

$(selector).addBack();

andSelf()
废弃的1.8，是addBack()的别名。
语法:

$(selector).addSelf();

contents()
它给出指定选择器的所有直接子节点，包括文本和注释节点。
语法:

$(selector).contents();

not()
它给出所有与指定选择器不匹配的元素。
语法:

$(selector).not(selector);

end()
它是当前链中最近的过滤操作，并将匹配的元素集返回到它之前的状态，它不接受任何参数。
语法:

$(selector).each(callback function);

集合操作

each()
它遍历DOM元素并执行回调函数

示例 1:

<!DOCTYPE html>
<html>
  
<head>
    <style>
        .siblings * {
            display: block;
            border: 2px solid lightgrey;
            color: lightgrey;
            padding: 5px;
            margin: 15px;
        }
    </style>
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
  </script>
    <script>
        (document).ready(function() {
            ("h2").siblings().css({
                "color": "red",
                "border": "2px solid red"
            });
            ("h2").parent().css({
                "color": "green",
                "border": "2px solid blue"
            });
            ("p").first().css(
              "background-color", "yellow");
            $("p").has("span").css(
              "background-color", "indigo");
  
        });
    </script>
</head>
  
<body class="siblings">
  
    <div>GeeksforGeeks (parent)
        <p>GeeksforGeeks</p>
        <p><span>GeeksforGeeks</span></p>
        <h2>GeeksforGeeks</h2>
        <h3>GeeksforGeeks</h3>
        <p>GeeksforGeeks</p>
    </div>
  
</body>
  
</html>

输出:
jQuery 遍历

示例 2:

<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="utf-8">
    <style>
        p {
            color: grey;
            margin: 10px;
            padding: 10px;
        }
          
        form {
            margin: 10px;
            padding: 10px;
        }
          
        #article b {
            color: blue;
            font-weight: bold;
        }
          
        label {
            color: green;
            font-weight: bold;
        }
    </style>
    <script src=
"https://code.jquery.com/jquery-1.10.2.js">
    </script>
</head>
  
<body>
  
    <p><em>Hello</em>GeeksforGeeks</p>
    <p id="article"><b>Article Info: </b></p>
    <form>
        <label>Article Title:</label>
        <input type="text"
               name="article" 
               value="jQuery | 
                     Traversing Example 2" />
        <br>
        <br>
        <label>Author:</label>
        <input type="text"
               name="author"
               value="Vignesh" />
        <br>
        <br>
        <label>Author's Email id:</label>
        <input type="text"
               name="author" 
               value="vignesh@gmail.com" />
        <br>
        <br>
        <label>Website:</label>
        <input type="text" 
               name="url"
               value="https://www.geeksforgeeks.org/" />
        <br>
        <br>
    </form>
  
    <script>
        ("#article")
            .append(("input").map(function() {
                    return (this).val();
                })
                .get()
                .join(", "));
    </script>
    <script>
        ("p")
            .find("em")
            .end()
            .css("border", "2px red solid");
    </script>
  
</body>
  
</html>