Advanced JQuery Selectors
3 likes2,619 views
This document provides descriptions and examples of various jQuery selectors. It covers attribute selectors that select elements based on attributes or attribute values. It also covers pseudo-class selectors that select elements based on conditions like visibility, position in the DOM, or whether they are checked/selected. Selectors are provided to select elements by index, child relationships, or by excluding certain elements. Links are included for further documentation.
![01
$('[attribute|="value"]')
Description: Selects elements that have the specified attribute with a value
either equal to a given string or starting with that string followed by a hyphen
(-).
Example
$('[attribute*="value"]')
Description: Selects elements that have the specified attribute with a value
containing the a given substring.
Example](https://image.slidesharecdn.com/advancedjqueryselectors-121210152321-phpapp02/85/Advanced-JQuery-Selectors-3-320.jpg)
![02
$('[attribute^="value"]')
Description: Selects elements that have the specified attribute with a value
beginning exactly with a given string.
Example
$('[attribute$="value"]')
Description: Selects elements that have the specified attribute with a value
ending exactly with a given string. The comparison is case sensitive.
Example](https://image.slidesharecdn.com/advancedjqueryselectors-121210152321-phpapp02/85/Advanced-JQuery-Selectors-4-320.jpg)
![03
$('[attribute!="value"]')
Description: Select elements that either don't have the specified attribute, or
do have the specified attribute but not with a certain value.
Example](https://image.slidesharecdn.com/advancedjqueryselectors-121210152321-phpapp02/85/Advanced-JQuery-Selectors-5-320.jpg)
Advanced JQuery Selectors
- 3. 01 $('[attribute|="value"]') Description: Selects elements that have the specified attribute with a value either equal to a given string or starting with that string followed by a hyphen (-). Example $('[attribute*="value"]') Description: Selects elements that have the specified attribute with a value containing the a given substring. Example
- 4. 02 $('[attribute^="value"]') Description: Selects elements that have the specified attribute with a value beginning exactly with a given string. Example $('[attribute$="value"]') Description: Selects elements that have the specified attribute with a value ending exactly with a given string. The comparison is case sensitive. Example
- 5. 03 $('[attribute!="value"]') Description: Select elements that either don't have the specified attribute, or do have the specified attribute but not with a certain value. Example
- 6. 04 $(':visible') Description: Selects all elements that are visible. Example $(':checked') Description: Matches all elements that are checked. Example
- 7. 05 $(':eq(index)') Description: Select the element at index n within the matched set. Example $(':nth-child(index/even/odd/equation)') Description: Selects all elements that are the nth-child of their parent. Example
- 8. 06 $(':even') Description: Selects even elements, zero-indexed. Example $(':odd') Description: Selects odd elements, zero-indexed. See also even. Example
- 9. 07 $(':first-child') Description: Selects all elements that are the first child of their parent. Example $(':last-child') Description: Selects all elements that are the last child of their parent. Example
- 10. 08 $(':first') Description: Selects the first matched element.. Example $(':last') Description: Selects the lastmatched element.. Example
- 11. 09 $(':gt(index)') Description: Select all elements at an index greater than index within the matched set. Example $(':lt(index)') Description: Select all elements at an index less than index within the matched set. Example
- 12. 10 $(':not(selector)') Description: Selects all elements that do not match the given selector. Example $(':has(selector)') Description: Selects elements which contain at least one element that matches the specified selector. Example
- 13. 11 $(':parent') Description: Select all elements that are the parent of another element, including text nodes. Example
- 14. 12 $(':header') Description: Selects all elements that are headers, like h1, h2, h3 and so on. Example Next Adjacent Selector (prev + next) Description: Selects elements which contain at least one element that matches the specified selector. Example
- 15. 13 JQuery selectors documentation All JQuery selectors and examples can be found on this link. http://api.jquery.com/category/selectors/ Thank You. :)