<<<< jQuery Tutorial part 2
JQuery filters
One of the very important feature of JQuery is JQuery filters that makes JQuery selectors even more powerful.
JQuery filters work on jQUery selectors
Basic filters
It allows to refine the JQuery selectors.
- :first – selects only the first instance of the selector’s returned set
- :last – selects only the last instance of the selector’s returned set
- :even – selects only the even-numbered elements in the selector’s returned set
-
dd – selects only the odd-numbered elements in the selector’s returned set - :eq(n) – It takes the index and filters out elements that are not positioned at the given index
- :gt(n) – will only includes elements that are past the given index
- :lt(n) – will only includes elements that are before the given index
- :header – selects all header elements (h1,h2 etc) in the page
- :animated – will select all elements that are currently being animated in some manner.
- :not(selector) – Negation filter, includes elements that do not match the given selector
Basic filters example
$("p:first")
- finds the first paragraph tag
$("p:last")
- finds the last paragraph tag
$("p:even")
- finds the even numbered all paragraph tags.
$("p:odd")
- finds the odd numbered all paragraph tags.
$(".classA:first")
- finds the first tag which has classA css
$("p:gt(1)")
- finds the all paragraph tags whose index is greatherthan 1
$("p:not(p:eq(2))")
- finds the all paragraph excluding the paragraph index 2.
Attribute filters
We could further filter out selected content based on the selected content attributes as well.
| JQuery Attribute Filters | When to use? |
|---|---|
| [attribute] | includes only the elements in the resulted set if they have the given attribute and doesn’t matter what the value is. |
| [attribute =value] | includes only the elements in the resulted set if they have the the given attribute and value |
| [attribute !=value] | includes only the elements in the resulted set if they have the the given attribute and doesnt not have the given value. |
| [attribute ^=value] | includes only the elements in the resulted set if they have the the given attribute and starts with the given value. |
| [attribute $=value] | includes only the elements in the resulted set if they have the the given attribute and ends with the given value. |
| [attribute *=value] | includes only the elements in the resulted set if they have the the given attribute and contains the given value. |
| [attrFilter1][attrFilter2] | compound statement – multiple attribute filters: Only elements match both the filters will be retained in the resulted set |
Attribute filter examples:
$("p[class]")
- filters only the p tags which has the class attribute
$("p[id = introduction]")
- filters only the p tags which has an id attribute and the value of id = introduction
$("p[id^ = intr]")
- filters only the p tags which has an id attribute and the value of id starts with intr.
$("p[id^ = intr][lang*=en")
- filters only the p tags which has an id attribute and the value of id starts with intr and
has lang attribute containing a string "en".
Content filters && Visibility filters and Child filters:
We could also do a filter based on the content of the selected elements and also based their visiblity attributes like hidden.
- :contains(text) filters only the selected content to include only if that contains the given text string
- :empty filters the selected content to include only if they are empty elements
- :has(selector) matches elements that contains at least one element that has the specified selector
- :parent Matches all elements that are parents
Visibilty fitlers
- :visible filters the selected content to include only visible elements
- :hidden filters the selected content to only include hidden elements
Child filters:
- :first-child: matches elemetns which are the first child of their parent
- :last-child : matches elements which are the last child of their parent
- nly-child: matches elements which are the only child of their parent
- :nth-child(index / even / odd / equation) : Matches elements that at index, or even or odd increments, or which matches an equation
of the form Xn+M ( M is optional) for e.g., 2n, 3n+1)
Examples:
$("p:contains("Hello")")
- filters p tags which contains a text "Hello".
$("p:parent")
- filters p tags that are parents
$("ol:has(li[class="terms"])")
- filters ol which has li tag containing a css class called "terms"
$("ol li:last-child")
- last list item child in a ordered list ol will be filtered.
$("ol li:nth-child(2n)")
- every second element list item will be filtered.
Note: in the nth-child equation operator, the equation of n starts from 1 instead 0.
Form filters :
Works on forms, processing elements in forms etc
form selectors:
- :input Finds all input elements
- :text Finds all text elements
- :password Finds all password elements
- :radio Finds all radio elements
- :checkbox Finds all checkbox elements
- :submit Finds all submit elements
- :reset Finds all reset elements
- :image Finds all image elements
- :button Finds all button elements
- :file Finds all file elements
form filters
selects form elements which are in a certain state which are checked, selected or enabled.
- :enabled Matches all form elements that are enabled
- :disabled Matches all form elements that are disabled
- :checked Matches all form elements that are checked
- :selected Matches all form elements that are selected
Recommended books
>>>> jQuery Tutorial part 4
Thanks for reading my post. please do not hesitate to post your comments or ask any questions below ( or even you find any mistakes too 
)
0 Comments.