Example analysis of filter method usage in jquery_jquery

The example in this article describes the usage of filter method in jquery. Share it with everyone for your reference. The specific analysis is as follows:

The

filter() method reduces the set of matching elements to elements matching the specified selector.
The parameters in the filter method can be string values ​​containing selector expressions for matching the current set of elements.

1. The parameter types of filter can be divided into two types

1. Pass selector
$('a').filter('.external')

2. Pass filter function

Copy code The code is as follows:

$('a').filter(function(index) {
          return $(this).hasClass('external');
})

2. The difference between find and filter in Jquery

1. find() will look for elements with class classname within the div element.
2. filter() filters the elements whose class of div is classname.
3. Basically, find sub-elements are found, and filter is level search

4. The find function queries the child elements of the current object collection;
5. The filter function is to filter the current object collection and use filter conditions to narrow the scope;
6. The parameter of the find function is the jQuery selector expression;

7. The parameter of filter is also a selector expression, but it can have multiple conditions, separated by commas (logical OR relationship);
8. The parameter of filter can also be a function. When calling the function, the index parameter will be automatically passed in. The function needs to return true or false to select or exclude elements.

For example:

Copy code The code is as follows:

<script> <br /> $(function(){ <br /> $('#btn1').click(function(){ <br /> alert($('div').find('.test').html()); <br /> }); <br /> $('#btn2').click(function(){ <br /> alert($('div').filter('.test').html()); <br /> }); <br /> $('#btn3').click(function(){ <br /> alert($('div').filter('.last').html()); <br /> }); <br /> $('#btn4').click(function(){ <br /> alert($('div').filter('.first,.last').html()); <br /> }); <br /> }); <br /> </script>

first contenttest content

lastlast test content

lastlast no test content

I hope this article will be helpful to everyone