jquery Traversal DOM node operation of the filter () method detailed _jquery

This paper analyzes the filter () method of jquery traversal DOM node operation. Share to everyone for your reference, specific as follows:

. Filter (selector)

This method is used to filter in matching elements according to selector expressions.
Remember: You must pass in the selector expression parameter by using this method, or you will get an error "' NodeType ' is empty or not an object"

Also notice the difference between this filter method and the Find method in jquery:
The filter method filters the matching elements, and the Find method filters the descendant elements of the matching element.

Starting with the jquery1.4 version, the filter method adds two new usages, and now there are four usages.

Here's a concrete look at these four uses:

I.. filter (selector)

This usage is filtered by the given selector parameter (jquery selector expression) in the matched element, and then wraps the matched element back into the collection of jquery elements. This method is used to narrow the matching range, and the selector argument can be multiple expressions connected by commas.

See examples:

HTML code:

<ul>
  <li>11111</li>
  <li class= "item" >22222</li>
  <li>33333</ li>
  <li>44444</li>
  <li>55555</li>
  <li>66666</li>
  <li >77777</li>
</ul>

jquery Code:

$ ("Ul>li"). Filter (": even"). CSS ("Color", "red");
The Li background with an even number of indexes is changed to red

The jquery code above has the same effect as the following jquery code

$ ("Ul>li:even"). CSS ("Color", "red");
The Li background with an even number of indexes is changed to red

Let's take a look at the usage of selector expressions connected by commas:

$ ("Ul>li"). Filter (": Even,.item"). CSS ("Color", "blue");
The Li background with an even and CALSS index to the item becomes blue

The demo example is as follows:

<ul>
  <li>11111</li>
  <li class= "item" >22222</li>
  <li>33333</ li>
  <li>44444</li>
  <li>55555</li>
  <li>66666</li>
  <li >77777</li>
</ul>
<input type= "button" id= "Test1" value= "get index to even Li" >
<input Type= "button" id= "Test2" value= get an index of even and CALSS for item Li ">
<script>
$ (function () {
  $ (" #test1 "). Click (function () {
    $ (" Ul>li "). Filter (": even "). CSS (" Color "," red ");//To convert an even-numbered Li background to red
    //This formula and $ (" ul >li:even "). CSS (" Color "," red "); Equivalent
  });
  $ ("#test2"). Click (function () {
    $ ("Ul>li"). Filter (": Even,.item"). CSS ("Color", "blue"); Change the index of an even and calss to the Li background of item to blue
  }
); </script>

Ii.. Filter (function (index))

This is done by traversing the matched element, and if function (index) returns True, then the element is selected, and if the return value is false, then the element is not selected

The index parameter is the indexes of the current matching element in the original collection of elements.

If you are not clear on the above explanation (I am a little lack of expression skills ~ ^_^), you can take a good look at the following example:

HTML code:

<div id= "A" ></div>
<div id= "Second" ></div>
<div id= "Third" ></div>
<div id= "Fourth" ></div>
<div id= "fifth" ></div>
<div id= "sixth" ></ Div>

jquery Code:

$ ("div"). Filter (function (index) {return
  index = = 1 | | $ (this). attr ("id") = = "Fourth";
}). CSS ("Border", "5px double Blue");

The result of the above code is the second DIV element and the border of the DIV element with id "Fourth" becomes a two-line color blue

The demo example is as follows:

<style>
 div{width:60px height:60px margin:5px float:left;border:3px white solid;background: #ff0000}
</style>
<div id= "a" ></div>
<div id= "Second" ></div>
<div ID = "Third" ></div>
<div id= "Fourth" ></div>
<div id= "fifth" ></div>
< Div id= "Sixth" ></div>
<br><br><br><br><br><br>
<input Type= "button" id= "Test" value= "click me to see the div changes above" >
<script>
$ ("#test"). Click (function () {
  $ ( "Div"). Filter (function (index) {return
    index = 1 | | $ (this). attr ("id") = = "Fourth";
  }). CSS ("Border", "5px double Blue");
</script>

Iii.. Filter (Element)

The element parameter is a DOM object that is matched if element DOM objects and matching elements are the same element. This usage is a 1.4 version of the new addition, I have not figured out what the use of

Let's see the example:

or the above HTML code, look at the jquery code:

Copy Code code as follows:

$ ("div"). Filter (document.getElementById ("third")). CSS ("Border", "5px double Blue");

The result is that the DIV element border with ID third changes.

This example is very chicken, people would say why so troublesome? It might as well be direct:

$ ("#third"). CSS ("Border", "5px double Blue");

Indeed, I also think so, but since it is the 1.4 version of the new addition, it will certainly be useful to the place, will not be chicken, but my jquery level is still too low, have not found it, if any reader have thought of the use of words, also hope enlighten!

The demo example is as follows:

<style>
 div{width:60px height:60px margin:5px float:left;border:3px white solid;background: #ff0000}
</style>
<div id= "a" ></div>
<div id= "Second" ></div>
<div ID = "Third" ></div>
<div id= "Fourth" ></div>
<div id= "fifth" ></div>
< Div id= "Sixth" ></div>
<br><br><br><br><br><br>
<input Type= "button" id= "Test" value= "click me to see the div changes above" >
<script>
$ ("#test"). Click (function () {
  $ ( "Div"). Filter (document.getElementById ("third")). CSS ("Border", "5px double Blue");
</script>

Iv.. Filter (JQuery object)

This usage is similar to the use of the. Filter (element) above, just one parameter is a DOM object, one parameter is a jquery object, I still feel more chicken.

See Example:

The same is true for the above HTML code, see jquery code:

$ ("div"). Filter ($ ("#third"). CSS ("Border", "5px double Blue");

The result is that the DIV element border with ID third changes.
It would also be better to use the following jquery code directly:

$ ("#third"). CSS ("Border", "5px double Blue");

The demo example is as follows:

<style>
 div{width:60px height:60px margin:5px float:left;border:3px white solid;background: #ff0000}
</style>
<div id= "a" ></div>
<div id= "Second" ></div>
<div ID = "Third" ></div>
<div id= "Fourth" ></div>
<div id= "fifth" ></div>
<div id= "Sixth" ></div>
<br><br><br><br><br><br>
< Input type= "button" id= "Test" value= "Click I look at the above div changes" >
<script>
$ ("#test"). Click (function () {
  $ ("div"). Filter ($ ("#third"). CSS ("Border", "5px double Blue");
</script>

More interested readers of jquery-related content can view this site: "jquery traversal algorithm and tips summary", "jquery table (table) Operation Tips Summary", "jquery drag-and-drop effects and tips summary", "JQuery Extended Skills Summary", " jquery Common Classic Effects Summary "jquery animation and special effects usage Summary", "jquery selector usage Summary" and "jquery common Plug-ins and Usage summary"

I hope this article will help you with the jquery program design.