JQuery Tips (3) Changes to elements in the $ () package set

These two methods are relatively easy to confuse.
The filter method filters the current internal elements. This method accepts two parameters: a function that returns bool, or a JQuery selection expression, the elements in the package set are smaller than or equal to the elements in the current package set, and the elements contained are a subset of the elements in the original package set:
Copy codeThe Code is as follows:
<Div id = "one"> the one </div>
<Div id = "two"> <p> the two </p> </div>
<Div id = "three"> <p> the three </p> </div>
<Script type = "text/javascript">
Alert ($ ("div "). filter (": not (: first): not (: last)" ).html (); // out put <p> the two </p>
Alert ($ ("div "). filter (function () {return this. id = "two"; }).html (); // output <p> the two </p> as well
</Script>

The find method searches in the current element (child element) and returns a new package set, which means the package set may increase:
Copy codeThe Code is as follows:
<Div id = "one"> the one </div>
<Div id = "two"> <p> the two </p> </div>
<Div id = "three"> <p> the three </p> </div>
<Script type = "text/javascript">
Alert ($ ("div"). find ("p"). text (); // alert "the twothe three"
Alert ($ ("div"). find ("p"). length); // alert 4 instead of original 3
</Script>

From the above, we can see that the elements in the new package set have been added.

Parents () method VS closest () method
Both of these methods are matched by the current element lookup. The differences are as follows:
Copy codeThe Code is as follows:
<Div id = "wrapper">
<Div id = "two">
<P id = "p1">
The two </p>
</Div>
</Div>
<Script type = "text/javascript">
Alert ($ ("# p1 "). parents ("div "). length); // alert 2 include <div id = "two"> and <div id = "wrapper">
Alert ($ ("# p1"). closest ("div"). length); // alert 1 and only include <div id = "two">
Alert ($ ("# p1"). parents ("p"). length); // alert 0 because it does not include current element
Alert ($ ("# p1"). closest ("p"). length); // alert 1 because it contain itself <p id = "p1">
</Script>

For the parents method, all matching elements of the current element are added to the new packaging set and returned. The closest method only contains the elements closest to the current element, therefore, after the closest method is used, the number of elements in the current package set can only be 1 or 0.
The parents method does not include the elements in the current package set, and the closest method contains the elements in the current package set.
Immediate Child element VS all child elements
Using children, you can return immediate child elements. Using the find and wildcard method, you can return all child elements except text nodes:
Copy codeThe Code is as follows:
<Div id = "wrapper">
Text node here
<Div id = "two">
<P id = "p1">
The two </p>
</Div>
</Div>
<Script type = "text/javascript">
Alert ($ ("# wrapper"). children (). length); // alert 1 because only direct children defined DED
Alert ($ ("# wrapper"). find ("*"). length); // alert 2 because all desendants encoded DED
Alert ($ ("# wrapper"). find ("> *"). length); // alert 1 because only direct children defined DED
</Script>

We can see that the children method only contains the immediate sub-elements of the current element, and the use of find ("> * will produce the same effect "). if you want to use all the immediate child elements, directly upload the "*" wildcard in "find ".
Return to the end () method and the andself () method.
All of the above methods, as well as add (), next (), nextAll (), prev (), and other methods for changing elements in the package set, can use end () method To return:
Copy codeThe Code is as follows:
<Div id = "wrapper">
Text node here
<Div id = "two">
<P id = "p1">
The two </p>
</Div>
</Div>
<Script type = "text/javascript">
Alert ($ ("# wrapper "). find ("> *"). end (). get (0 ). id); // alert "wrapper" instead of "two" because of end () method has been used
</Script>

The end () method is always offset by the latest one and the method changed in the package set, and offset by other methods:
Copy codeThe Code is as follows:
<Div id = "wrapper">
Text node here
<Div id = "two">
<P id = "p1">
The two </p>
</Div>
</Div>
<Script type = "text/javascript">
Alert ($ ("# wrapper "). find ("# p1" ).html ("new value "). end (). get (0 ). id); // alert wrapper because end method
Alert ($ ("# p1"). text () // alert new value bacause the html method in previous has not been canceled
</Script>

If you need to include elements in the original package set when changing the elements in the package set, use the andself method:
Copy codeThe Code is as follows:
<Div id = "wrapper">
Text node here
<Div id = "two">
<P id = "p1">
The two </p>
</Div>
</Div>
<Script type = "text/javascript">
Var $ a = $ ("# wrapper"). find ("# two"). andSelf ();
Alert ($ a [0]. id); // alert two first
Alert ($ a [1]. id); // alert wrapper after that
</Script>

We will find that alert two is selected first, because two is selected first.

PS: the liver writer code highlighting plug-in is garbled when I add Chinese characters. It's depressing to say -.-!! So the comments are all birds.