Shulou(Shulou.com)05/31 Report--

This article introduces the knowledge of "how to access nodes by jquery". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Node access method: 1, children (), can access all the direct child elements of the selected element; 2, closest (), can access the first ancestor element of the selected element; 3, find (), can access the descendant elements of the selected element; 4, first (), visit the first element of the selected element; 5, last (), etc.

The operating environment of this tutorial: windows7 system, jquery1.10.2 version, Dell G3 computer.

The method that jquery can access the node

Method description add () adds elements to the collection of matching elements addBack () adds previous sets of elements to the current collection children () returns all direct child elements of the selected element closest () returns the first ancestor element of the selected element contents () returns all direct child elements of the selected element (including text and comment nodes) each () executes the function end () end for each matching element The most recent filter operation in the current chain And returns the set of matching elements to the previous state eq () returns the element filter () with the specified index number of the selected element, reduces the set of matching elements to a new element find () that matches the selector or the return value of the matching function, returns the descendant element of the selected element, first (), returns the first element of the selected element, has (), returns all elements that have one or more elements in it, is ( ) check the set of matching elements according to the selector / element / jQuery object If there is at least one matching element, return truelast () returns the last element of the selected element map () passes each element in the current matching set to the function The new jQuery object next () that produces the return value returns the next sibling element of the selected element nextAll () returns all sibling elements after the selected element nextUntil () returns all sibling elements after each element between two given parameters not () removes the element offsetParent () from the matching element set returns the first positioned parent element parent () returns the direct parent element of the selected element Parents () returns all ancestor elements of the selected element parentsUntil () returns all ancestor elements between two given parameters prev () returns the previous sibling element of the selected element prevAll () returns all sibling elements before the selected element prevUntil () returns all sibling elements before each element between two given parameters siblings () returns all sibling elements of the selected element slice () Reduce the set of matching elements to a subset of the specified range

There are generally seven methods to access and query sibling elements: siblings (), next (), nextAll (), nextUntil (), prev (), prevAll (), prevUntil ()

The siblings () method, which is mainly used to get all the elements at the same level of the specified element

The next () method, which is mainly used to get the next sibling element of the specified element

The nextAll () method, which is mainly used to get all elements of the next sibling of the specified element

The nextUntil () method is mainly used to get the next sibling element of the specified element, which must be the element between the specified element and the element set by the nextUntil () method

The prev () method, which is mainly used to get the sibling element at the next level of the specified element

The prevAll () method, which is mainly used to get all the sibling elements one level above the specified element

The prevUntil () method, which is mainly used to get the previous sibling of the specified element, which must be the element between the specified element and the element set by the prevUntil () method

Example:

Siblings () method

Hello Hello Again

And Again

$("p") .siblings (".selected") .css ("background", "yellow")

Next () method

List item 1 list item 2 list item 3 list item 4 list item 5 $('li.third-item'). Next (). Css (' background-color', 'red')

Prev () method

.siblings * {display: block; border: 2px solid lightgrey; color: lightgrey; padding: 5px; margin: 15px } $(document) .ready (function () {$("li.start"). Prev (). Css ({"color": "red") "border": "2px solid red"}) }) Ul (parent) li (sibling) li (last sibling of the li node with the class name "start") li ( Li node named "start") li (sibling node) li (sibling node)

There are two ways to access and query child elements: find () and children ()

The children () method: gets the direct subset element under this element

Find () method: gets all the subset elements under this element (including a subset of the subset)

Document div {/ * background-color: pink * /} 11 aaa bbb ccc 222ddd Eee fff $("div") .children (".no1") .css ({color:'#a61c00' BackgroundColor: "# 0000ff"}) Console.log ($("div"). Children (".no1") [0]); / / print the acquired dom element and you will find that the result is undefined / / $("div"). Find (".no1"). Css ({color:'#a61c00',backgroundColor: "# 0000ff"})

At this point, let's open the comment on the find item.

Document div {/ * background-color: pink * /} 11 aaa bbb ccc 222ddd Eee fff / / $("div") .children (".no1") .css ({color:'#a61c00' BackgroundColor: "# 0000ff"}) / console.log ($("div") .children (".no1") [0]); $("div") .find (".no1") .css ({color:'#a61c00',backgroundColor: "# 0000ff"}); console.log ($("div") .find (".no1") [0])

Corresponding screenshot:

This is the end of the content of "how jquery accesses nodes". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.