Learning jquery preliminary study notes (five)

jquery study notes five

jquery traversal

What is traversing?

, According to certain rules to move a label from the beginning, until you find the target label so far

Tag tree

<div>
    <ul>
        <li>
            <span>
            </span>
            <span>
            <span>
        </li>
        <li>
            <b>
            </b>
        </li>
    </ul>
</div>

**讲解**
* <div> 元素是 <ul> 的父元素，同时是其中所有内容的祖先。
* <ul> 元素是 <li> 元素的父元素，同时是 <div> 的子元素
* 左边的 <li> 元素是 <span> 的父元素，<ul> 的子元素，同时是 <div> 的后代。
* <span> 元素是 <li> 的子元素，同时是 <ul> 和 <div> 的后代。
* 两个 <li> 元素是同胞（拥有相同的父元素）。
* 右边的 <li> 元素是 <b> 的父元素，<ul> 的子元素，同时是 <div> 的后代。
* <b> 元素是右边的 <li> 的子元素，同时是 <ul> 和 <div> 的后代。

Up tag tree traversal

parent () method

Returns the direct parent element of the selected element.

$(document).ready(function(){
  $("span").parent().css({"color":"red","border":"2px solid red"});
});

parents () method

Returns selected elements of all ancestor elements , it is all the way up until the root element of the document

 $("span").parents();

Returns ancestor

 $("span").parents("ul");//既是该元素的父元素，又是ul标签

parentsUntil() 方法

Returns all ancestors interposed between two elements of a given element

$(document).ready(function(){
  $("span").parentsUntil("div");
});

Returns the element between a span and div tags

Traversal - offspring

children () method

1. Return all direct child elements selected element

$(document).ready(function(){
  $("span").children();
});

2. Use the optional parameters to filter the search sub-elements

$(document).ready(function(){
  $("span").children("div.test");//筛选class为test的div标签
});

find () method

Back to the selected element descendant elements, all the way down until the last descendant

1. Return the specified label subelements

$(document).ready(function(){
  $("span").find("div");
});

2. Return all descendants

$(document).ready(function(){
  $("span").find("*");
});

Traversal - Compatriots (siblings)

siblings () method

Back to all compatriots elements of the selected element.

$(document).ready(function(){
  $("h2").siblings();
});

Returns the specified tag compatriots

$(document).ready(function(){
  $("h2").siblings("p");
});

next () method

Returns the next element of the selected element compatriots, returns only one element

$(document).ready(function(){
  $("h2").next();
});

nextAll () method

Return all to follow compatriot elements of the selected element

$(document).ready(function(){
  $("h2").nextAll();
});

nextUntil () method

Returns an all compatriots to follow elements between two given parameters.

$(document).ready(function(){
  $("h2").nextUntil("h6");
});

jQuery prev(), prevAll() & prevUntil() 方法

Works prev (), prevAll () and prevUntil () method with the above method is similar, but in the opposite direction only: they return in front of compatriot elements

Traversal - Filter

first () method

Returns selected elements of the first element.
Select the first div element inside the first p element

$(document).ready(function(){
  $("div p").first();
});

last () method

The last element of the selected element.

$(document).ready(function(){
  $("div p").last();
});

eq () method

Returns elements are designated with the index number of the selected elements

$(document).ready(function(){
  $("p").eq(1);
});

filter () method

It allows you to specify a standard. This standard does not match the element will be removed from the collection, matching elements are returned
return all p elements with class name "url" of:

$(document).ready(function(){
  $("p").filter(".url");
});

not () method

Returns all elements that do not match the criteria.

$(document).ready(function(){
  $("p").not(".url");
});