jQuery Selectors and Filter Methods

Basic Selectors

Select All

$("*")

Select by element id

$("#id")  

Select by element class name

$(".className")  

Select by element tag name

$("div")  

Select by multiple condition union

$("selector1,selector2,...,selectorN ")

Select by tag name and class name

$('div.my-class')

Hierarchical Selectors

Select Children and Descendant

$("form > input") // all direct children
$("table td") // select all descendant  

Select After

$("label + input") // select all input after label

Select all Siblings

$("#prev ~ div") // select all siblings

Selector Filters

Filter by Position

$("tr:first")
$("tr:last")
$("tr:even")
$("tr:odd")
$("tr:eq(1)")
$("tr:gt(1)") // greater than
$("tr:lt(3)") // less than

Filter by Content

// :contains
$("div:contains(hello)") // select all div contains text 'hello'

// :empty
$("td:empty") // select all td text is empty

// :has()
$("div:has(p)") // select all div has <p> element

// :parent()
$("div :parent(p)") // select all div contained by <p> element

Filter by Attribute

// [attr]
$("div[id]") // all <div> have id attr 

// [attr="value"]
$("div[id=div1]")

// [attr!="value"] not equal
$("div[id!=div1]")

// [attr^="value"] attr value start with
$("div[id^=test]")] // all div, 'id' attr value start with 'test'

// [att|="value"] attr value equals or start with
$("div[id|=test]")]

// [attr$="value"] attr value end with
$("div[id$=test]") // all div, 'id' attr value end with 'test'

// [attr*="value"] attr value contains
$("div[id*=test]") // all div, 'id' attr value contains 'test'

// [name~="value"] attr value split with whitespace. splited values contains 
$( "input[name~='man']" )

Filter by attribute and class name

$('.myclass[reference="12345"]')
$("input[reference=12345].myclass")

Filter by Visibility

// :hidden
$("input:hidden")

// :visible
$("input:visible")

Select Child

// :nth-child
$("ul li:nth-child(2)") // match ul child li second

// :first-child
$("ul li:first-child")

// :last-child
$("ul li:last-child")

// :only-child
$("ul li:only-child") // match ul only contain one li child

Select Form

Filter by element name

:button	//Selects all button elements and elements of type button.
:input  //Selects all input, textarea, select and button elements.

Filter by input element type

:checkbox
:file
:image
:text 
:password
:radio
:reset
:submit

Filter by status of form element

:checked 	//Matches all elements that are checked or selected.
:selected
$("option:selected[value=1]")
:focus  	//Selects element if it is currently focused.
:disabled
:enabled	//Selects all elements that are enabled.

:Not

// :not()
$("input:not(:checked)") 
$("#form1 input:not('#id')")

Others

:header // select all header elements, such as <H1>,<H2>
:animated

Filter Methods

Filter Methods

filter("p") // get all <p> elements in jquery dom set
$("li").has("span") //get all li has child element 'span'
not("p, .name") // get all not <p> and class=name elements in jquery dom set

Position Method

first()
last()
eq("") // index begin with 0 

Hierarchical Methods

Select parent or ancestors

parent() // one parent
parents() // all ancestors
$("span").parents("ul"); // all ancestors
$("span").parentsUntil("div") // returns all ancestor elements between two given arguments

Select children or descendants

children("") 
children()
find(""); // find descendants
// the find() is similar to the children() method，but childern() only find children not descendants.

Select siblings

siblings() 
siblings("") // get other dom of same level, don't contain self
next()
nextAll() 
nextUntil() 
prev()
prevAll()
prevUntil()

References

[1] Selectors - jQuery Documentation