Use jQuery to filter exclusion elements to modify attributes of a specified tag. jquery Filters
Simple case:
$ (Function () {$ ("td [id] [id! = '']"). Click (function () {// your logic });});
In the above Code, td with an id and the id is not empty will execute "your logic ".
================================================= ========
1. eq () filters the elements of the specified index number.
2. first () filters out the first Matching Element.
3. last () filters out the last matched element.
4. hasClass () checks whether the matched element contains the specified class.
5. filter () filters the set of elements that match the specified expression.
6. is () checks whether the element can match
7. map ()
8. has () filters out elements containing the specified child element.
9. not () exclude elements that can be matched by Parameters
10. slice () intercepts the specified number of elements from the specified index
11. children () filters and obtains resources of a specified element.
12. From the current element, closest () returns the parent element that matches the condition first.
13. find () searches for child elements from a specified Element
14. next () gets the next sibling element of the specified element.
15. Obtain all sibling elements after nextAll ().
16. Obtain the element after nextUntil () until the parameter can match, excluding the ending Condition
17. offsetPosition () returns the First Ancestor element to be located, that is, the element whose position is relative or absolute.
18. parent () obtains the direct parent element of a specified element.
19. Get all the ancestor elements of the specified Element Through parents () until <body> </body>
20. Obtain the ancestor element of the specified element by parentsUntil (), so far that the parameter can match
21. prev () gets the first sibling element of the specified element.
22. prevAll () obtains all the sibling elements before a specified element.
23. prevUntil () gets all the sibling elements before the specified element until the conditions in the parameter can match. Note that the parameter conditions are not matched.
24. siblings () obtains the sibling element of the specified element, regardless of the front and back
25. add (): add the selected element to the jQuery object set.
26. andSelf () adds itself to the selected jQuery set to facilitate one-time operations
27. end () changes the selected operation of the current selector to the previous state.
28. contents does not understand
************** **********************
I. Use eq () to filter the elements of a specified index number.
Syntax: eq (index |-index) index number starts from 0. If it is a negative value, it starts from the last one and ends from-1.
$ ("P"). eq (1); // If the selector is changed to $ ("p"). eq (-1), the fourth P is selected.
<Div> <p> I am the first P </p> <p> I am the second P </p> // It will be selected, the index value is 1 <p> I am the third P </p> <p> I am the fourth P </p> </div>
2. first () filters out the first Matching Element.
Syntax: first () This method has no parameters
$ ("P "). first (); <div> <p> I am the first P </p> // my index value is 0, and I am the first, I will be selected <p> I am the second P </p> <p> I am the third P </p> <p> I am the fourth P </p> </div>
3. last () filters the last matched element.
Syntax: last () This method has no parameters
$ ("P "). last (); <div> <p> I am the first P </p> <p> I am the second P </p> <p> I am the third P </p> <p> I am the fourth P </p> // I am the last, I will be selected </div>
4. hasClass () check whether the matched element contains the specified class.
Syntax: hasClass (class) class is a class name // return a Boolean Value
If ($ ("p"). hasClass ("p2 "))
{
Alert ("I have an element of class = p2"); // It will pop up. The element of class = "p2" does exist in p.
}
<Div> <p> I am the first P </p> <p class = "p2"> I am the second P </p> <p> I am the third P </p> <p> I am the fourth P </p> </div>
5. filter () filters the set of elements matching the specified expression.
Syntax: filter (expr | obj | ele | fn) expr: matching expression | obj: jQuery object, used to match existing elements | DOM: Used to match DOM elements | function return value as matching condition
$ ("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" <p> I am the third P </p> <p> I am the fourth P </p> </div>
6. is () checks whether the element can match
Syntax: is (expr | obj | ele | fn) expr: matching expression | obj: jQuery object, used to match existing elements | DOM: Used to match DOM elements | function return value as matching condition
$ ("P"). first (). is (". p2 "))
{
Alert ("will not pop up, because the first P class 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 am the third P </p> <p> I am the fourth P </p> </div>
VII. map ()
8. has () filters out elements containing the specified child element.
Syntax: has (expr | ele) expr: Select expression | DOM element selection
$ ("Div "). has ("p"); <div> // This div is selected, because this div contains p sub-elements <p> I am the first P </p> <p class = "p2"> I am the second P </p> <p> I is the third P </p> <p> I am the fourth P </p> </div>
<Div>
<Span> I am a span </spam>
</Div>
9. not () exclude elements that can be matched by Parameters
Syntax: not (expr | ele | fn) expr: selection expression | DOM element selection | the function of fn is unclear.
$ ("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> // It is not selected because class = p2 is not (". p2 ") excluded <p> I am the third P </p> // will be selected, no class = p2
<P> I am the fourth P </p> // will be selected, no class = p2
</Div>
10. slice () intercepts the specified number of elements from the specified index
Syntax: slice (start, [end]) start position, end (optional) end position, excluding the end position. If this parameter is not specified, it matches the last one.
$ ("P "). slice () <div> <p> I am the first P </p> // will not be selected, my index is 0 <p class = "p2"> I am the second P </p> // will be selected, my index is 1 <p> I am the third P </p> // will be selected, my index is 2 <p> I am the fourth P </p> // It is not selected. Although my index is 3, it does not include me </div>
***************** ****************
11. children () filter and obtain resources of a specified Element
Syntax: children (expr); get the resource of the specified element. expr is the filtering condition of the child element.
$ ("Div "). children (". p2 "); <div> <p> I am the first P </p> // not selected, although I am a child element of div, but I do not have class = p2 <p class = "p2"> I am the second P </p> // will be selected. I am a child element of p, another class = p2 <p> I am the third P </p> // will not be selected. Although I am a sub-element of div, I do not have class = p2
<P> I am the fourth P </p> // it will not be selected. Although I am a sub-element of div, I do not have class = p2
</Div>
12. closest () returns the first matched parent element from the current element.
$ ("Span "). closest ("p", "div"); <div> // It is not selected, and P gets the lead. <p> I am the first P/P and will be selected, because P meets the condition and is first matched, although div also meets the condition, div is not first matched. Therefore, the div is not selected.
<Span> I am a span in P </span>
</P> </div>
13. find () searches for child elements from a specified Element
Syntax: find (expr | obj | ele) expr: matching expression | obj is used to match jQuery objects | DOM Element
$ ("Div"). find (". p2 ");
<Div> <p> I am the first P </p> // It is not selected, although I am a child element of div, but I do not have class = p2 <p class = "p2"> I am the second P </p> // will be selected. I am a child element of p, another class = p2 <p> I am the third P </p> // will not be selected, although I am a child element of div, but I do not have class = p2 <p> I am the fourth P </p> // it will not be selected. Although I am a sub-element of div, I do not have class = p2 </div>
14. next () gets the next sibling element of the specified element.
Syntax: next (expr) expr: (optional) filtering condition. If the next sibling element does not meet the modification condition, null is returned.
$ (". P2"). next (); // If the filter is changed to $ (". p2"). next (". p4"), which one is selected? The answer is: no element is selected, because although there is a class = p4 P, It is not next to. p2. <Div> <p> I am the first P </p> <p class = "p2"> I am the second P </p> <p> I am the third P </p> // I am. p2 next <p class = "p4"> I am the fourth P </p> </div>
15. nextAll () obtains all sibling Elements
Syntax: nextAll (expr) expr: (optional) filtering condition. Obtain all sibling elements that match the expr condition.
$ (". P2 "). nextAll (); // If the filtering condition is changed to $ (". p2 "). nextAll (". p4 "); then only the fourth P will be selected.
<Div> <p> I am the first P </p> <p class = "p2"> I am the second P </p> <p> I am the third P </p> // is selected, yes. the sibling element behind p2 <p class = "p4"> I am the fourth P </p> // will be selected, yes. sibling element behind p2 </div>
16. Obtain the element after nextUntil () until the parameter can match, excluding the end Condition
Syntax: nextUntil ([expr | ele] [, fil]) expr filter expression | DOM element filtering. Note that this parameter is not included.
$ (". P2"). nextUntil (". p4"); // note that this method does not include. p4
<Div> <p> I am the first P </p> <p class = "p2"> I am the second P </p> <p> I am the third P </p> // is selected, yes. the sibling element behind p2 <p class = "p4"> I am the fourth P </p> // will not be selected. I am used as the end condition, excluding mE </div>
17. offsetPosition () returns the First Ancestor element for positioning, that is, the element where position is relative or absolute.
Syntax: offsetPosition () This method does not have a parameter. Because the absolute positioning benchmark of CSS is a relatively recent located element, the function of this method is self-evident.
$ ("Span"). offsetParent ();
<Div> $ ("span "). parent (); <div >$ ("span "). parents (); <div >$ ("span "). parentsUntil ("div"); <div>$ (". P2 "). prev (); <div> <p> I am the first P </p> // I will be selected, I am. the first element of p2. <P class = "p2"> I am the second P </p> <p> I am the third P </p> <p class = "p4"> I am the fourth P </p> </div>22. prevAll () obtains all the sibling elements before a specified element.
Syntax: prevAll (expr) expr: (optional) exclude all elements that cannot be matched by expr.
$ (". P4 "). prevAll (". p2 "); <div> <p> I am the first P </p> // not selected, although I am. the sibling element before p4, but I do not have class = p2 <p class = "p2"> I am the second P </p> // will be selected, I am both. the sibling element before p4, And I have class = p2 <p> I am the third P </p> // will not be selected, although I am. the sibling element before p4, but I don't have class = p2
<P class = "p4"> I am the fourth P </p>
</Div>23. prevUntil () obtains all the sibling elements before the specified element until the conditions in the parameter can match. Note that the parameter conditions are not matched.
Syntax: prevUntil ([expr | ele] [, fil]) expr match expression | DOM element match
$ (". P4 "). prevUntil (". p2 "); <div> <p> I am the first P </p> // not selected, when p2 is reached, <p class = "p2"> I am the second P </p> // will not be selected. I am the stop condition, excluding mE <p> I am the third P </p> // will be selected. before p2, recursion is passed. p2 <p class = "p4"> I am the fourth P </p> // it will not be selected. How can I be ahead of myself? </Div>
****************** *************/
Twenty-four, siblings () Get the sibling element of the specified element, regardless of the front and back
Syntax: siblings (expr); expr is a filtering condition and is not selected if the condition is not met.
$ (". P2 "). siblings (); <div> <p> I am the first P </p> // will be selected, I am. the sibling element of p2 <p class = "p2"> I am the second P </p> // will not be selected, I am myself <p> I am the third P </p> // will be selected, I am. sibling element of p2
<P class = "p4"> I am the fourth P </p> // will be selected. I am a sibling element of. p2.
</Div>25. add (): add the selected element to the jQuery object set.
Add (expr | elements | html | jQueryObject) expr: Selector expression | DOM expression | Html fragment | jQuery object, which combines jQuery objects for convenient operations;
$ (". P2 "). add ("span" ).css ("background-color", "red "); <div> <p> I am the first P </p> <p class = "p2"> I am the second P </p> // it turns red <p> I is the third P </p> <p class = "p4"> I am the fourth P </p> </div>
<Span> I am a span </span> // it turns red.26. andSelf () is added to the selected jQuery collection to facilitate one-time operations.
AndSelf () This method has no parameters
$ (". P2 "2.16.nextall().andself().css (" background-color "," red "); <div> <p> I am the first P </p> <p class = "p2"> I am the second P </p> // it turns red, this is andSelf () <p> I am the third P </p> // returns red <p class = "p4"> I am the fourth P </p> // returns red </p> /div>Twenty-seven, end () will change the selected operation of the current selector 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> // it turns red, in this case, the end () effect <p> I am the third P </p> // will not become red, although this one is selected after the next () method, however, it is the previous one because it is rolled back by the end () method. <P class = "p4"> I am the fourth P </p> </div>Twenty-eight, contents did not understand
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
