jQuery Selectors and Filter Methods

Contents

1. 1. Basic Selectors
2. 2. Hierarchical Selectors
   1. 2.1. Select Children and Descendant
   2. 2.2. Select After
   3. 2.3. Select all Siblings
3. 3. Selector Filters
   1. 3.1. Filter by Position
   2. 3.2. Filter by Content
   3. 3.3. Filter by Attribute
   4. 3.4. Filter by Visibility
   5. 3.5. Select Child
   6. 3.6. Select Form
   7. 3.7. :Not
   8. 3.8. Others
4. 4. Filter Methods
   1. 4.1. Filter Methods
   2. 4.2. Position Method
   3. 4.3. Hierarchical Methods
5. 5. References

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