Basic (CSS) JQuery Selectors
I love JQuery. Oh so easy to use, excellent documentation, and an abundance of third-party plugins and widgets ready made for almost anything you could ever need. Of course, one of the most important parts of the library are JQuery's selectors, easy CSS-like syntax to select specific DOM elements to manipulate. Here is my personal JQuery selector reference sheet, drawn from the JQuery API, the web, and other JQuery books/reference sheets I've read. These selectors use near-CSS syntax, they should be relatively easy to understand.
Matches anything
$('*')
Matches element with tagName (ex. a, span, etc)
$('tagName')
$('a') //matches all links
$('span') //matches all spans
Matches element with id elementId (with optional tagName)
$('#elementId')
$('tagName#elementId')
$('div#header') //matches div element with id = header
Matches element with class elementClass (with optional tagName)
$('.elementClass')
$('tagName.elementClass')
$('a.menu-link') //matches links with class = menu-link
Matches CSS family/descendent patterns
$('A B') //B elements that are a descendant of A
$('A > B') //B elements that are direct children of A
$('A:has(B)') //A elements that have B as a descendant
$('#header a') //matches links inside element id=header
Matching attributes
$('tagA[attr]') //tagA elements with an attr attribute
$('tagA[attr=value]') //tagA elements with attr is equal to value
$('tagA[attr^=startsWith]') //tagA elements with attr starts with startsWith
$('tagA[attr$=endsWith]') //tagA elements with attr ends with endsWith
$('tagA[attr*=containsThis]') //tagA elements with attr contains containsThis
$('img[alt]') //matches img elements with an alt attribute
//matches checkboxes whose names start with ch_ (ex. ch_1, ch_2,...)
$('checkbox[name^=ch_]')
That's it for now, I'll post again soon with JQuery custom selectors (things like :disabled
, :hidden
, etc. that jQuery has added to its library to make things easier on developers) !