jQuery selectors

by Charlie Winfrey

HTML

<div id="container">
     <h1 class="bar">jQuery selection filtering</h1>

    <div class="foo">no paragraph</div>
    <div class="foo bar">
        <p>has paragraph</p>
    </div>
    <div class="foo">This is a <a href="#">link</a></div>
    <ul>
        <li data-id="1">first</li>
        <li class="current">second</li>
        <li>third</li>
        <li>fourth</li>
        <li>fifth</li>
        <li>sixth</li>
    </ul>
</div>

JavaScript

var els;

// Select an element by id
var els = $("#container");

// Select elements by tag name
els = $("li");

// Select elements by class
els = $(".current");

/**
 * Select elements by... selector! 
 * [can of worms]O~ ~ ~
 */

// Can select by parent/child relationship
els = $("div a"); // a anywhere underneath a div
els = $("div + div"); // div right after another div
els = $("div > p"); // p directly under a div
els = $("div ~ ul"); // any sibling ul to div

// Can select by their content
els = $("ul li:contains('sixth')");

// can select by their position 
els = $("ul li:nth-child(3)");
els = $("ul li:last-child"); // every last
els = $("ul li:last"); // the very last

// even and odd position
els = $("ul li:odd");

// select elements by a combination of selectors
els = $("div.foo a");

// select elements by more than one class
els = $(".foo.bar");

// select elements that have one class or another
els = $(".foo, .bar");

// by attribute and attribute value
els = $("li[data-id]");
els = $("li[data-id='1']");

/**
 * Refining selections.
 */

// div.foo elements that contain <p> tags             
var els = $("div.foo").has("p");

// h1 elements that don't have a class of bar
var els = $("h1").add("div.foo.bar");
var els = $("h1").not(".bar ");
var els = $("h1:not(.bar)");

/**
 * performing queries on a previous jQuery selection
 */

var $items = $("ul li");

// unordered list items with class of current
$items.filter(".current"); 

// just the first unordered list item
$items.first(); 

$items.eq(5);