Use of Selectors

Learn the use of Selectors with the help of example code.

Use of Selectors

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.