Uses of jQuery Selectors
Uses of jQuery Selectors
In this section we are discussing the use of jQuery selectors.
For using JQuery library most effectively , you must be familiar to the jQuery selectors. Without selectors it is nearly impossible to implement functionalities on elements of html.
Following are some of the key uses of jQuery selectors according to selectors type :
Uses of basic CSS selector
The basic selectors are known as 'find selectors' as they are used to find the element within the DOM.
Syntax:
$.(selector/Syntax).methodName();
Given below the uses of Basic CSS Selector according to "syntax" used :
| SYNTAX | DESCRIPTION |
| * | Selects all elements |
| E | Selects all elements with tag name E. |
| E F | Selects all elements with tag name F that are descendants of E |
| E>F | Selects all elements with tag name F that are direct children of E. |
| E+F | Selects all elements with tag name F that are immediately preceded by a sibling of tag name E. |
| E-F | Selects all elements with tag name F that are preceded by any sibling of tag name E. |
| E : has(F) | Selects all elements with tag name E that have at least one descendant of tag name F. |
| E .C | Selects all the elements E that have a class name C. Removing C Removing E is identical to *.C |
| E#i | Selects all the elements E that have an id value of i. Omitting E is identical to *#i. |
| E[a] | Selects all the elements E that have an attribute 'a' of any value. |
| E[a=v] | Selects all the elements E that have an attribute 'a' whose value is exactly 'v'. |
| E[a^=v] | Selects all the elements E that have an attribute 'a' whose value starts with 'v'. |
| E[a$=v] | Selects all the elements E that have an attribute 'a' whose value ends with 'v'. |
| E[a*=v] | Selects all the elements E that have an attribute 'a' whose value contains 'v'. |
Uses of Position Selectors
This selector select the elements according to their position in page. These selectors can be apply to any base selector.(it is denoted by B here). If it is omitted, it is assumed to be *.
Given below the uses of Position Selectors according to "syntax" used :
| SYNTAX | DESCRIPTION |
| B:first | Selects the first element of element B |
| B:last | Selects the last element of element B |
| B:first-child | Selects all the elements from B that are first children. |
| B:last-child | Selects all the elements from B that are last children. |
| B:only-child | Selects all the element from B that are only children. |
| B:nth-child(n) | Selects all the element from B that are n-th ordinal children. Starts at 1. |
| B:nth-child(odd/even) | Selects all the element from B that are even or odd ordinal children. The first child is considered odd(ordinal1) |
| B:nth-child(Xn+Y) | Selects the Y element from B after every Xth element of B. |
| B:even | Selects the even elements of B. |
| B:odd | Selects the odd elements of B. |
| B:gt(n) | Selects the element after the nth element of B. Starts at 0. |
| B:lt(n) | Selects the element before the nth element of B. Starts at 0. |
| B:eq(n) | Selects the nth element defined with in B element. |
Uses of jQuery Custom Selector :
This selector select the elements according to their type or some property. These selectors can be apply to any base selector.(it is denoted by B here). If it is omitted, it is assumed to be *.
Given below the uses of Custom Selector according to "syntax" used :
| SYNTAX | DESCRIPTION |
| B:animated | Selects one of elements of B that are currently under the animated control of one of the jQuery animation method |
| B:button | Selects the elements of B of any button type. |
| B:checkbox | Selects the elements of B of checkbox type. |
| B:enabled | Selects the elements of B that are in enabled state. |
| B:file | Selects the elements of B of file input type. |
| B:header | Selects the elements of B of header type(H1 to H6). |
| B:hidden | Selects the elements of B that are hidden. |
| B:image | Selects the elements of B of image input type. |
| B:input | Selects form input element from B. i.e. input, select,textarea,button. |
| B:not(f) | Selects the elements from B that do not match the filter selector specified by f. |
| B:parent | Selects the elements of B that are parents of non-empty element children |
| B:password | Selects the elements of B of password type. |
| B:radio | Selects the elements of B of radio input type. |
| B:reset | Selects the elements of B of reset input type. |
| B:selected | Selects the elements of B that are in selected state. |
| B:submit | Selects the elements of B of submit input type. |
| B:text | Selects the elements of B of text input type. |
| B:visible | Selects the elements of B that are not hidden. |
Learn from experts! Attend jQuery Training classes.