jQuery Selectors

jquery selectors are the most important aspects of the jquery Library. On top of standard CSS selectors jquery introduces some custom selectors that makes your code even more simpler and easier to read. Below is a summary table of the jquery selectors

Selector

Example

Selects

*

$("*")

All elements

#id

$("#lastname")

The element with id=lastname

.class

$(".intro")

All elements with class="intro"

element

$("p")

All p elements

.class.class

$(".intro.demo")

All elements with the classes "intro" and "demo"

 

 

 

:first

$("p:first")

The first p element

:last

$("p:last")

The last p element

:even

$("tr:even")

All even tr elements

:odd

$("tr:odd")

All odd tr elements

 

 

 

:eq(index)

$("ul li:eq(3)")

The fourth element in a list (index starts at 0)

:gt(no)

$("ul li:gt(3)")

List elements with an index greater than 3

:lt(no)

$("ul li:lt(3)")

List elements with an index less than 3

:not(selector)

$("input:not(:empty)")

All input elements that are not empty

 

 

 

:header

$(":header")

All header elements h1, h2 ...

:animated

$(":animated")

All animated elements

 

 

 

:contains(text)

$(":contains('W3Schools')")

All elements which contains the text

:empty

$(":empty")

All elements with no child (elements) nodes

:hidden

$("p:hidden")

All hidden p elements

:visible

$("table:visible")

All visible tables

 

 

 

s1,s2,s3

$("th,td,.intro")

All elements with matching selectors

 

 

 

[attribute]

$("[href]")

All elements with a href attribute

[attribute=value]

$("[href='default.htm']")

All elements with a href attribute value equal to "default.htm"

[attribute!=value]

$("[href!='default.htm']")

All elements with a href attribute value not equal to "default.htm"

[attribute$=value]

$("[href$='.jpg']")

All elements with a href attribute value ending with ".jpg"

 

 

 

:input

$(":input")

All input elements

:text

$(":text")

All input elements with type="text"

:password

$(":password")

All input elements with type="password"

:radio

$(":radio")

All input elements with type="radio"

:checkbox

$(":checkbox")

All input elements with type="checkbox"

:submit

$(":submit")

All input elements with type="submit"

:reset

$(":reset")

All input elements with type="reset"

:button

$(":button")

All input elements with type="button"

:image

$(":image")

All input elements with type="image"

:file

$(":file")

All input elements with type="file"

 

 

 

:enabled

$(":enabled")

All enabled input elements

:disabled

$(":disabled")

All disabled input elements

:selected

$(":selected")

All selected input elements

:checked

$(":checked")

All checked input elements

References :

http://codylindley.com/jqueryselectors/

 

No Comments