International - English

Cart Console

Topic Center

Contact Sales

Home > Others

Overview jquery's element filtering _jquery

Last Update:2017-01-18 Source: Internet

Author: User

Tags prev

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

1, eq () to filter the elements of the specified index number
2, first () to filter out a matching element
3, last () filter out the final matching element
4, hasclass () check if the matching element contains the specified class
5. Filter () filters out the collection of elements that match the specified expression
6, is () check whether the element parameters can match the
7, Map ()
8, has () filter out the elements that contain the specified child elements
9, not () excluding elements that can be matched by parameters
10, Slice () from the specified index to intercept the specified number of elements
11, children () filter to obtain the resources of the specified element
12, closest (), starting from the current element, returns the parent element that matches the criteria first
13. Find () finds child elements from the specified element
14, Next () gets the next sibling element of the specified element
15, Nextall () to obtain all the following sibling elements
16, Nextuntil () to obtain the following elements, until the parameters can match up, not including the end of the condition that
17, Offsetposition () returns the first ancestor element to be positioned, that is, to find elements in the ancestor element position as relative or absolute.
18. Parent () Gets the direct parent element of the specified element
19. Parents () gets all the ancestor elements of the specified element until the <body></body>
20, Parentsuntil () gets the ancestor element of the specified element, knowing that the parameters can be matched to the
21, Prev () gets the first sibling element of the specified element
22. Prevall () gets all sibling elements preceding the specified element
23. Prevuntil () gets all sibling elements in front of the specified element until the condition in the parameter can be matched to. Note that the parameter condition itself is not matched
24. Siblings () Gets the sibling element of the specified element, before and after
25. Add () adds the selected elements to the collection of jquery objects
26. Andself () adds itself to the selected jquery collection to facilitate a one-time operation
27, End () changes the current selector selected operation back to the previous state.
28, Contents did not understand

Filter ************************************

One, EQ () to filter the elements of the specified index number

Syntax: eq (index|-index) index number starting from 0, if negative, then countdown from the last, the last one starting from-1

$ ("P"). EQ (1); If the selector is changed to $ ("P"). EQ (-1), then I am fourth P will be selected
<div>
<p> I am the first p</p>
<p> I am the second p</ P>//Will be selected, index value is 1
<p> I am the third p</p>
<p> I am the fourth p</p>
</div>

Second, first () filter out a matching element

Syntax: A () This method has no parameters

$ ("P").
<div>
<p> I was the first p</p>//My index value is 0, I am the first, I will be selected
<p> I am the second p</p>
& Lt;p> I was the third p</p>
<p> I was fourth p</p>
</div>

Third, last () filter out the final matching element

Syntax: Last () This method has no parameters

$ ("P"). Last ();
<div>
<p> I was the first p</p>
<p> I was the second p</p>
<p> I was the third p</p>
    <p> I am the fourth p</p>//I am the last one, I will be selected
</div>

Iv. hasclass () check that the matching element contains the specified class

Syntax: Hasclass (Class) class for category name//return Boolean value

 if ($ ("P"). Hasclass ("P2"))
{
alert ("I contain CLASS=P2 elements"); Will pop up, p does exist class= "P2" Elements
} 
<div>
<p> I was the first p</p>
<p class= "P2" > I was the second A p</p>
<p> I'm the third p</p>
<p> I'm the fourth p</p>
</div>

Filter () filters out the collection of elements that match the specified expression

$ ("P"). Filter (". P2");
<div>
<p> I am the first p</p>
<p class= "P2" > I am the second p</p>//I will be selected, my class= "P2"
& Lt;p> I was the third p</p>
<p> I was fourth p</p>
</div>

Six, is () check whether the element parameters can match the

$ ($ ("P"). First (). is (". P2"))
{
alert ("does not pop, because the class of one P is not equal to P2");
<div>
<p> I am the first p</p>
<p class= "P2" > I am the second p</p>//I will be selected, my class= "P2 "
<p> I was the third p</p>
<p> I was fourth p</p>
</div>

Vii. map ()

Viii. has () filter out elements that contain the specified child elements

Syntax: has (expr|ele) expr: Choosing an expression | DOM element selection

$ ("div"). has ("P");
<div>//This div will be selected because the DIV contains P child elements
<p> I was the first p</p>
<p class= "P2" > I was the second P&L　　　　T;/p>
<p> I was the third p</p>
<p> I was fourth p</p>
</div>
<div>
<span> I am a span</spam>
</div>

Nine, not () excluding elements that can be matched by parameters

Syntax: not (EXPR|ELE|FN) expr: Choosing an expression | DOM Element Selection | The role of FN is not clear.

$ ("P"). Not (". P2");
<div>
<p> I am the first p</p>//will be selected, no class=p2
<p class= "P2" > I am the second p</p>//No is selected because a CLASS=P2 is excluded by not (". P2")
<p> I am the third p</p>//will be selected, no class=p2
<p> I am the fourth p</p& 　　　　　　　 Gt Will be selected, no CLASS=P2
</div>

Slice () to intercept the specified number of elements, starting at the specified index

Syntax: Slice (start, [end]) Start position, end optional, ending position, does not contain the ending position of that. If not specified, the match is to the last one.

$ ("P"). Slice (1,3)
<div>
<p> I am the first p</p>//will not be selected, I index to 0
<p class= "P2" > I am 　　　　　　　 Two p</p>//will be selected, I index to 1
<p> I am the third p</p>//will be selected, I index to 2
<p> I am the fourth p</p> Will not be selected, although my index is 3, but I am not included

Filter *********************************

Xi. Children () filter to get resources for the specified element

Syntax: Children (expr); Gets the resource for the specified element, expr for the child element filter criteria

$ ("div"). Children (". P2");
<div>
<p> I am the first p</p>//will not be selected, although I am the child element of Div, but I do not class=p2
<p class= "P2" > I am the second P　　　　</p>/Will be selected, I am both the child element of P, and class=p2
<p> I am the third p</p>//will not be selected, although I am the child element of Div, but I did not class=p2
<p> I am the fourth p</p>//will not be selected, although I am the child element of Div, but I did not class=p2

12, closest (), starting from the current element, returns the parent element that matches the criteria first

$ ("span"). Closest ("P", "div");
<div>//Will not be selected, p robbed the initiative
<p> I was the first P//p will be selected because p meets the criteria and is the first match, although Div is also eligible, but DI V is not the first match. Therefore div is not selected.
<span> I'm span</span> in P
</p>
</div>

13. Find () finds child elements from the specified element

Syntax: Find (Expr|obj|ele) expr: matching expression | obj for matching jquery objects | DOM element

$ ("div"). Find (". P2");
<div>
<p> I am the first p</p>//will not be selected, although I am the child element of Div, but I did not class=p2
<p class= "P2" > I is the second p</p>//will be selected, I am both a child of P, and class=p2
<p> I am the third p</p>//will not be selected, although I am the child element of Div, but I do not class=p2
    <p> I am fourth p</p>//will not be selected, although I am the child element of Div, but I do not class=p2
</div>

14, Next () gets the next sibling element of the specified element

Syntax: Next (expr) expr: Optionally, filter the criteria, and return NULL if the next sibling element does not conform to the change criteria.

$ (". P2"). Next (); If the filter changes to $ (". P2"). Next (". P4") which is the chosen one?　　　　　　The answer is: No elements are selected, because although there is a CLASS=P4 p, it is not. P2 's next.
<div>
<p> I was the first p</p>
<p class= "P2" > I was the second p</p> 
<P&G t; I am the third p</p>//I am p2 next
<p class= "P4" > I am fourth p</p>
</div>

XV, Nextall () get all the sibling elements that followed

Syntax: nextall (expr) expr: optional, filter criteria, get all sibling elements that match the expr condition later

$ (". P2"). Nextall ();　　If the filter condition is changed to $ (". P2"). Nextall (". P4"); Then only I am the fourth P will be selected
<div>
<p> I was the first p</p>
<p class= "P2" > I was the second p</p> 
    <p> I am the third p</p>//will be selected, yes. P2 behind the sibling element
<p class= "P4" > I am the fourth p</p>//will be selected, yes. P2 behind the Brothers Elements
</div>

16, Nextuntil () to obtain the following elements, until the parameters can match up, not including the end of the condition that

Syntax: Nextuntil ([Expr|ele][,fil]) expr filter Expression | DOM element filtering, note that does not include the one in the parameter

$ (". P2"). Nextuntil (". P4"); Note that this method does not include. P4
<div>
<p> I was the first p</p>
<p class= "P2" > I was the second p</p> c4/> <p> I am the third p</p>//will be selected, yes. P2 behind the sibling element
<p class= "P4" > I was fourth p</p>//would not be selected, I as the end condition, but Not including me.

17, Offsetposition () returns the first ancestor element to be positioned, that is, to find elements in the ancestor element position as relative or absolute.

Syntax: Offsetposition () This method has no parameters because the positioning datum of the absolute positioning of the CSS is relative to the nearest positioned element, so this method has an obvious effect.

$ ("span"). offsetparent ();
<div style= "position:relative" >//Selected is Div, so div is a positioned element.
<p>
<span> I am a span</span>
</p>
</div>

18. Parent () Gets the direct parent element of the specified element

Syntax: parent (expr) expr is a filter condition and does not return any elements if the direct parent element does not qualify (regardless of whether its ancestors have the ability to match expr)

$ ("span"). parent ();
<div style= "position:relative" >
<p>/I am the direct parent element of span, I will be matched to
<span> I am an S pan</span>
</p>
</div>

19. Parents () gets all the ancestor elements of the specified element until the <body></body>

Syntax: parents (expr) expr is a filter condition, if an ancestor element does not conform to expr

$ ("span"). parents ();
<div style= "position:relative" >//I am the ancestor element of span and I will be matched to. <body></body> will also be matched to
<p> I am the direct parent element of span and I will be matched to
<span> I am a span</span>
</p>
</div>

20, Parentsuntil () gets the ancestor element of the specified element, knowing that the parameters can be matched to the

Syntax: parentsuntil (expr) expr is a stop parameter that is matched to expr until the condition of the parameter is not matched.

$ ("span"). Parentsuntil ("div");
<div style= "position:relative" >//I am the ancestor element of span, but as a stop condition, I will not be selected
<p>//I am the direct parent element of span, I Will be selected
<span> I am a span</span>
</p>
</div>

21, Prev () gets the first sibling element of the specified element

Syntax: prev (expr) expr: optional. When the previous sibling element does not conform to the criteria in the parameter, no elements are returned.

$ (". P2"). Prev ();
<div>
<p> I am the first p</p>//I will be selected, I am the previous element of. P2.
<p class= "P2" > I was the second p</p> 
<p> I was the third p</p> <p class= "
P4" > I am the first Four p</p>

22. Prevall () gets all sibling elements preceding the specified element

Syntax: prevall (expr) expr: optional, excluding all elements that cannot be matched by expr

$ (". P4"). Prevall (". P2");
<div>
<p> I am the first p</p>//will not be selected, although I am. P4 front of the sibling element, but I have no class=p2
<p class= "P2" & gt; I am the second p</p>//will be selected, I am both the P4 front of the sibling element, and I have class=p2
<p> I am the third p</p>//will not be selected, although I am. P4 front of the sibling element, but I No class=p2
<p class= "P4" > I was fourth p</p>
</div>

23. Prevuntil () gets all sibling elements in front of the specified element until the condition in the parameter can be matched to. Note that the parameter condition itself is not matched

Syntax: Prevuntil ([expr|ele][,fil]) expr Match expression | DOM element Matching

$ (". P4"). Prevuntil (". P2");　
<div>
<p> I was the first p</p>//will not be selected, to P2 stopped
<p class= "P2" > I was the second p</p> Will not be selected, I am the stop condition, not including me
<p> I am the third p</p>//will be selected, I am in. P2 before, recursion to me before. P2
<p class= "P4" > I'm fourth P </p>//Will not be chosen, how could I myself be in front of myself?
</div>

/******************** Series *******************************/

24. Siblings () Gets the sibling element of the specified element, before and after

Syntax: siblings (expr); Expr is a filter condition and does not match the criteria that are not selected

$ (". P2"). siblings (); 　
<div>
<p> I am the first p</p>//will be selected, I am. P2 's brother element
<p class= "P2" > I'm the second p</p> Will not be selected, I am myself
<p> I am the third p</p>//will be selected, I am. P2 's brother element
<p class= "P4" > I am the fourth p</p>// Will be chosen, I am the brother of P2. Elements
</div>

25. Add () adds the selected elements to the collection of jquery objects

$ (". P2"). Add ("span"). CSS ("Background-color", "Red");　　　　
<div>
<p> I was the first p</p>
<p class= "P2" > I was the second p</p>//would turn red
<p> I was the third p</p>
<p class= "P4" > I was fourth p</p>
</div>
<span> I am a span</span>//will turn red

26. Andself () adds itself to the selected jquery collection to facilitate a one-time operation

Andself () This method has no parameters

$ (". P2"). Nextall (). Andself (). CSS ("Background-color", "Red");
<div>
<p> I am the first p</p>
<p class= "P2" > I am the second p</p>//will turn red, this is the effect of andself () c4/> <p> I am the third p</p>//will turn red
<p class= "P4" > I am the fourth p</p>//will turn red
</div>

27, End () changes the current selector selected operation back to the previous state.

End () This method has no parameters

$ (". P2"). Next (). End (). CSS ("Background-color", "Red");
<div>
<p> I am the first p</p>
<p class= "P2" > I am the second p</p>//will turn red, this on end () effect 
   
     <p> I am the third p</p>//will not turn red, although this one is selected after the next () method, but is last because the end () method is rolled back.
<p class= "P4" > I am the fourth p</p>
</div>

28, Contents did not understand

The above is the entire content of this article, there are problems can be linked with small, thank you for the support of the cloud habitat community!

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Related Keywords:

activex filtering ingress filtering chromebook overview ssl overview openid overview chromebook overview servicenow overview

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

What's Trending

Top 10 Tags

datastax versions naming convention zookeeper client class definition md5 microsoft sql server 2005 data structures exception handling error handling

Top 10 Keywords

microsoft download center down wordpress address url site address url wordpress address url windows installer 4 0 download 302 not found web address url definition site address url wordpress db2 integer mac os installation step by step pdf abbreviation for return

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

Overview jquery's element filtering _jquery

Contact Us

What's Trending

Top 10 Tags

Top 10 Keywords

Trending Topic

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support