jQuery Tutorial: Selectors

Perm url with updates: http://xahlee.org/js/jquery_selectors.html

jQuery Tutorial: Selectors

Xah Lee, 2010-11-12

This page is a tutorial on jQuery's selectors. If you don't know the basics, see: jQuery Basics Tutorial.

Getting Elements You Want

Here's a most basic example of getting a element and do something with it.

// make all paragraphs red
$("p").css("color","red");

jQuery Selectors

Select by tag

// make all “p” tag elements red
$("p").css("color","red");

Test yourself: jQuery Select By Tag Example

Select by ID

// make element of id “xyz” red
$("#xyz").css("color","red");

Test yourself: jQuery Select By ID Example

Select by Class Value

// make element of class “xyz” red
$("[class='xyz']").css("color","red");

Test yourself: jQuery Select By Class Value Example

Select by Matching Any Attribute and Value

jq can select any tag attribute matching their value in many ways.

MeaningSyntax
Attribute EqualsmyAttribName="myValue"
Attribute Not EqualmyAttribName!="myValue"
Attribute Starts WithmyAttribName^="myValue"
Attribute Ends WithmyAttribName$="myValue"
Attribute ContainsmyAttribName*="myValue"
Attribute Contains PrefixmyAttribName|="myValue"
Attribute Contains WordmyAttribName~="myValue"

Here's a example of getting all elements that has attribue “abc” with value “xyz”.

// select elements with attribute “abc” that has value “xyz”, make it red.
$("[abc='xyz']").css("color","red");

The syntax follows css's syntax. If you are not familiar with css seletor syntax, see: CSS Tag Matching (Selector) Syntax.

Popular posts from this blog

11 Years of Writing About Emacs

does md5 creates more randomness?

Google Code shutting down, future of ErgoEmacs