Home > Web Front-end > JS Tutorial > body text

Commonly used filtering methods in jquery

无忌哥哥
Release: 2018-06-29 11:42:06
Original
1513 people have browsed it

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'
Copy after login

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')
Copy after login

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

$('li').first().css('color','red')
Copy after login

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

$('li').last().css('color','red')
Copy after login

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;
}
Copy after login

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

$(&#39;ul&#39;).find(&#39;li&#39;).css(&#39;color&#39;,&#39;coral&#39;)
$(&#39;ul&#39;).find(&#39;a&#39;).css(&#39;color&#39;,&#39;cyan&#39;)
Copy after login

7.children() returns all direct child elements

$(&#39;ul&#39;).children().css(&#39;color&#39;,&#39;deeppink&#39;)
$(&#39;ul&#39;).children(&#39;p&#39;).css(&#39;color&#39;,&#39;deeppink&#39;)
Copy after login

8. Execute for each element Callback function

$(&#39;li&#39;).each(function(){
$(this).css(&#39;background-color&#39;,&#39;wheat&#39;)
$(this).css(&#39;color&#39;,&#39;black&#39;)
$(this).css(&#39;font-size&#39;,&#39;1.3em&#39;)
})
Copy after login

9. Element traversal method

//next()The next sibling element

$(&#39;li&#39;).eq(2).next().css(&#39;color&#39;,&#39;blue&#39;)
Copy after login

//All sibling elements after nextAll()

$(&#39;li&#39;).eq(2).nextAll().css(&#39;color&#39;,&#39;blue&#39;)
Copy after login

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

$(&#39;li&#39;).eq(2).siblings().css(&#39;color&#39;,&#39;blue&#39;)
Copy after login

Traverse forward

//prev(): Previous sibling Element

$(&#39;li&#39;).removeAttr(&#39;style&#39;)
$(&#39;li&#39;).eq(6).prev().css(&#39;color&#39;,&#39;coral&#39;)
Copy after login

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

$(&#39;li&#39;).eq(6).prevAll().css(&#39;color&#39;,&#39;coral&#39;)
Copy after login


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

$(&#39;*&#39;).removeAttr(&#39;style&#39;)
Copy after login
Copy after login

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

$(&#39;li&#39;).css(&#39;color&#39;,&#39;red&#39;)
Copy after login

//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

$(&#39;li&#39;).add(&#39;p&#39;).css(&#39;color&#39;,&#39;red&#39;)
Copy after login

11. filter() returns qualified elements from the result

//Only returns the 6th one Element

$(&#39;li&#39;).filter(&#39;:eq(5)&#39;).css(&#39;background-color&#39;,&#39;lightgreen&#39;)
Copy after login

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

$(&#39;li&#39;).not(&#39;:eq(5)&#39;).css(&#39;background-color&#39;,&#39;lightgreen&#39;)
Copy after login

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

$(&#39;*&#39;).removeAttr(&#39;style&#39;)
Copy after login
Copy after login

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

$(&#39;li&#39;).slice(2,5).css(&#39;background-color&#39;,&#39;lightgreen&#39;)
Copy after login

//Get the first 4 elements

$(&#39;li&#39;).slice(0,4).css(&#39;background-color&#39;,&#39;lightgreen&#39;)
Copy after login

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

$(&#39;li&#39;).slice(4).css(&#39;background-color&#39;,&#39;lightgreen&#39;)
Copy after login

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!

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template