jQuery $ unleash the power of selectors

October 12th, 2007 Posted by Don Albrecht

While jQuery is many powerful things, Selectors are quite possibly its most capable and useful feature. So here’s the jQuery Selector crash course.

The Ground Rules:

Selectors work just like CSS (1-3) selectors # for ID’s, . for classes p, div, ul, li etc.
XPath an also be used.
CSS & XPATH selectors can be combined

The $ wrapper.

Selectors + $ = jQuery Nirvana. The $() function accepts any selector and returns an object that can be manipulated.
Filters

jQuery filters enhance jQuery Selectors by providing additional logic. Here’s a list of supported filters:

Not (selector)
first
last
even
odd
eq( index) matches an elements index in returned array
gt( index) matches all elements after given index in an array
lt( index ) matches all elements before given index in an array
header matches all h elements (h1 h2 h3 etc)
animated (matches all elements that are currently being animated)
contains( text) matches all elements which contain given text
empty matches all empty elements
has(selector) matches all elements containing an element that matches the given selector
parent matches all elements that are parents / have child element. (opposite of empty)
hidden matches all elements of type hidden
visible (opposite of hidden)