jQuery Selectors and Filter Methods

Basic Selectors

Select All


Select by element id


Select by element class name


Select by element tag name


Select by multiple condition union

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

Select by tag name and class name


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: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"]

// [attr!="value"] not equal

// [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

// [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


Filter by Visibility

// :hidden

// :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


Filter by status of form element

:checked 	//Matches all elements that are checked or selected.
:focus //Selects element if it is currently focused.
:enabled //Selects all elements that are enabled.


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


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

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

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

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

Select siblings

siblings("") // get other dom of same level, don't contain self


[1] Selectors - jQuery Documentation