These two methods are more easily confused.
The filter method represents the filtering of the current internal elements, which accept two parameters, a function that returns bool, or a choice expression for jquery, and the element within the wrapper set is less than the element equal to the current wrapper set. and contains elements that belong to a subset of elements in the original wrapper set:
Copy Code code 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 (: a): Not (: Last)". html ()); Out Put<p>the two</p>
Alert ($ ("div"). Filter (function () {return this.id = = "Two";}). HTML ());//output <p>the two</p> as OK
</script>
The Find method finds the part of the current element (child element) and returns a new wrapper set, which means that the wrapper set may increase:
Copy Code code as follows:
<div id= "one" >the one</div>
<div id= "two" ><p>the two</p><p></p><p></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>
You can see from above that the elements in the new wrapper set are increased
Parents () method VS closest () method
Both methods are matched by the current element looking up, and the difference is as follows:
Copy Code code 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 the current element
Alert ($ ("#p1"). Closest ("P"). length); Alert 1 because it contain itself <p id= "P1" >
</script>
For the parents method, all matching elements that are up to the current element are added to the new wrapper set and returned, whereas the closest method only contains elements closest to the current element, so the elements in the current wrapper set can only be 1 or 0 after the closest method is used
The parents method does not include elements in the current wrapper set, and the closest method contains the elements in the current wrapper set
Direct child element VS all child elements
Using children, you can return a direct child element, and a Find plus wildcard method can return all child elements except text nodes:
Copy Code code 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 included
Alert ($ ("#wrapper"). Find ("*"). length); Alert 2 because all desendants included
Alert ($ ("#wrapper"). Find (">*"). length);//alert 1 because-only direct children included
</script>
You can see that the children method only contains the immediate child elements of the current element, and using Find (">* also produces the same effect"). If you want to adopt all the direct elements directly in Find incoming "*" wildcard characters
Back to the past end () method and the Andself () method
All of the above methods, as well as add (), Next (), Nextall (), Prev (), and so on to change the elements in the wrapper set can be returned using the end () method:
Copy Code code 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 the end () method has been US Ed
</script>
The end () method is always offset from the most recent method of changing the wrapper set, while offsetting other methods:
Copy Code code 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
Alert ($ ("#p1"). Text ())//alert new value bacause The HTML method of previous has not been cancelled
</script>
If you need to change the elements in the wrapper set, you also need to include the original wrapper set elements, using the Andself method:
Copy Code code 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
Alert ($a [1].id);//alert Wrapper after that
</script>
We will find first alert two, because two is chosen first
Ps:liver Writer Code Highlighting plugin I add Chinese is garbled, very depressed said-.-!! So the notes are all in the birds.
