Commonly used filtering methods in jquery

Filtering methods, that is, functions, are mostly consistent with the filter functions introduced earlier

1: get() converts the jquery object into a DOM object: sets the foreground color of the second text Is red

$('li').get(1).style.color = 'red'

2.eq(): Gets the element with the specified serial number. Note that the returned object is a jQuery object

$('li').eq(4).css('color','red')

3.first(): Returns the first element, no parameters are required

$('li').first().css('color','red')

4.first(): Returns the last element, no parameters are required

$('li').last().css('color','red')

5.toArray(), returns a DOM array, note that it is not a jquery object

var li = $('li').toArray()
for(var i=0; i<li.length; i++){
li[i].style.color = &#39;green&#39;
}

6 .find(): Returns all descendant elements, including children and grandchildren...

$('ul').find('li').css('color','coral')
$('ul').find('a').css('color','cyan')

7.children() returns all direct child elements

$('ul').children().css('color','deeppink')
$('ul').children('p').css('color','deeppink')

8. Execute for each element Callback function

$('li').each(function(){
$(this).css('background-color','wheat')
$(this).css('color','black')
$(this).css('font-size','1.3em')
})

9. Element traversal method

//next()The next sibling element

$('li').eq(2).next().css('color','blue')

//All sibling elements after nextAll()

$('li').eq(2).nextAll().css('color','blue')

//siblings(): Returns all sibling elements of the selected element, except itself

$('li').eq(2).siblings().css('color','blue')

Traverse forward

//prev(): Previous sibling Element

$('li').removeAttr('style')
$('li').eq(6).prev().css('color','coral')

//prevAll(): You must have guessed, yes, it is all the previous sibling elements

$('li').eq(6).prevAll().css('color','coral')

10. add(selector) , add elements to the selected collection

//First remove the custom styles on all elements, return the elements to their prototypes, and look plain

$('*').removeAttr('style')

//Set all li text is red, you will find that there is a p that is not selected, which is normal

$('li').css('color','red')

//So how can you select the p element? You can only increase the selection area and put the p element into this selection.

//You can do this using the add() method

$('li').add('p').css('color','red')

11. filter() returns qualified elements from the result

//Only returns the 6th one Element

$('li').filter(':eq(5)').css('background-color','lightgreen')

12. The function of not() is exactly the opposite of filter(). It removes the elements that meet the conditions

$('li').not(':eq(5)').css('background-color','lightgreen')

13. slice(start, end), returns the elements in the specified range

$('*').removeAttr('style')

//Including the starting position, excluding the end position, the number of results returned is 5-2=3

$('li').slice(2,5).css('background-color','lightgreen')

//Get the first 4 elements

$('li').slice(0,4).css('background-color','lightgreen')

//Omitted The second parameter defaults from the current beginning to the end

$('li').slice(4).css('background-color','lightgreen')

The above is the detailed content of Commonly used filtering methods in jquery. For more information, please follow other related articles on the PHP Chinese website!