The difference between the children () and the Find () of jquery traversal

The Hildren (selector) method is to return all child elements of each element in the matching element collection ( only the son generation ). Parameters are optional, and adding parameters means filtering through selectors and filtering the elements.

The. Find (selector) method returns the descendants of each element in the matching element collection. Parameters are required and can be filtered for selectors, jquery object elements, and elements.

The. Find () is similar to the. Children () method, unlike the latter traversing a single level down the DOM tree only. Here children, I understand as son, only at the son this level traverse. Take a look at the following example:

[HTML]View Plaincopy

2. <ul class="Level-1">
4. <li class="item-i">i</li>
6. <li class="item-ii">ii
8. <ul class="Level-2"> not including yourself
10. <li class="item-a">a</li>
12. <li class="Item-b">b
14. <ul class="level-3">
16. <li class="item-1">1</li>
18. <li class="item-2">2</li>
20. <li class="item-3">3</li>
22. </ul>
24. </li>
26. <li class="item-c">c</li>
28. </ul>
30. </li>
32. <li class="ITEM-III">iii</li>
34. </ul>

[JavaScript]View Plaincopy

1. $ (' Ul.level-2 '). Children (). CSS (' background-color ', ' red ');

The result of this line of code is that items A, B, C get a red background. Since we did not apply a selector expression, the returned JQuery object contains all the child elements. If a selector is applied, only matching items are included.

Look at an example:

[HTML]View Plaincopy

2. <script>
4. $ (document). Ready (function () {
6. $ ("#abc"). Children (". Selected"). CSS ("Color", "blue");
8. });
10. </Script>
12. <div id="abc">
14. <span>hello</span>
16. <p class="selected">hello Again</P>
18. <div><--Change to <P>
20. <div class="selected">and Again</div>
22. <span class="selected">aaand Again</span>
24. </div><--switch to </P>
26. <p >and One last time</P>
28. </div>

The results are as follows:

This is the expected result, but if you change the above <div> to <p>, and see the code comment above, the result is:

The. Find () method should be aware of the points of knowledge:

1. Find is the descendant of each element in the current element collection. As long as they meet, whether they are sons, grandchildren can.

2. Unlike other tree traversal methods, the selector expression is a required parameter for. Find (). If we need to implement a retrieval of all descendant elements, we can pass the wildcard selector ' * '.

3, find only in the descendants of the traversal, not including themselves.

4. The selector context is implemented by the. Find () method, and therefore, $ (' li.item-ii '). Find (' Li ') is equivalent to $ (' Li ', ' Li.item-ii ').

The syntax for selectors is: jQuery (selector, [context])

In general, the use of the jquery selector is used as the first parameter. In fact, this use of the jquery () function can also pass a second argument. The purpose of passing this parameter is to limit the preceding selector to the context. By default, the second argument is not passed, and the selector searches the DOM from the root of the document ($ () looks for DOM elements in the current HTML document), and if you specify a second parameter, such as a DOM element set or a jquery object, it is found in this context.

Let's look at an example

[JavaScript]View Plaincopy

1. $ ("Div.foo"). Click (function () {
2. $ ("span", this ). addclass ("bar");
3. });

Since we have limited the span selector to this environment, only the span of the clicked element will get the additional class.

the difference between the children () and the Find () of jquery traversal

The difference between the children () and the Find () of jquery traversal