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

jQuery Selectors

Select by tag

// make all “p” tag elements red

Test yourself: jQuery Select By Tag Example

Select by ID

// make element of id “xyz” red

Test yourself: jQuery Select By ID Example

Select by Class Value

// make element of class “xyz” 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.

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.

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