IT:AD:JQuery:Selectors

## The usual suspects ##

Most of the selector syntax is pretty straight forward – although with checked, and disabled, things go pear shape, and a lot of forum posts are created for them. Here's how they do work (using modifiers rather than attr that work sporadically):

$("table input[type=checkbox]:checked
$("table input[type=checkbox]:not(:checked)
$("table input:disabled

Summary

$(“#someId”)
$(“.someclass”)
$(“h2:first”)
$(“div:first-child”)
$(“#div1:nth-child(4)”)
$(“span:no('.sectionHead')”)
- All spans who are not of class sectionHead
$(“:enabled”)
- All enabled
$(“:disabled”)
$(“:checked”)
$(“div:hidden”)
- All hidden divs
$(“:contains(.docx)”)
- All elements that contain the text '.docx'
- Notice no quotes?
$(“#div1 #div2”)
$(“:button”)
- All elements of type button
$(“:select”)

//Key Concepts of Selector Syntax (official: http://bit.ly/gVyoMp)
//p = element name (eg $('div'))
//. = class (eg: $('.myClass')) 
//# = id (eg: $('#myId')) 
//> = direct descendent (eg: $('li > a'))
//+ = next to (eg: 'div + button' gets buttons after divs)
// = sibling (eg 'li.main  li')
[] = contain the given attribute($('p[id]')

//Selector Examples:
//
//Attach an event handler everything:
$('*').click(function() {$(this).hide('slow');});
//
//Attach an event handler to all ‘p’ elements:
$('div').click(function() {$(this).hide('slow');});
//
//Attach an event handler to all ‘p’ elements of class ‘myClass’:
$('div.myClass').click(function() {$(this).hide('slow');});
//
//Attach an event handler to all elements of class ‘myClass’:
$('.myClass').click(function() {$(this).hide('slow');});
//
//Attach an event handler to an element with an id = of ‘myP’:
$('#myP').click(function() {$(this).hide('slow');});
//
//Do something to LI descendents of another element:
$('#myOL > li').addClass('Hoverable');
//
//All LI's no matter how nested:
$('div.myDiv li').css('background-color', '#C0C0FF');
//
//Directly nested LI's (note that div.myDiv > li won't cut it):
$('div.myDiv > ul li').css('background-color', '#C0C0FF');
//
//Directly nested LI's (note that div.myDiv > li won't cut it):
$('div.myDiv > ul > li').css('background-color', '#C0C0FF');
//
//Get the first directly nested LI:
$('.myDiv > ul li:first-child').css('background-color', '#C0C0FF');
//
//Get the third directly nested LI:
$('.myDiv > ul li:nth-child(2)').css('background-color', '#C0C0FF');
//
//Get the last directly nested LI:
$('.myDiv > ul li:last-child').css('background-color', '#C0C0FF');
//
//Get the even directly nested LI:
$('.myDiv > ul li:even-child').css('background-color', '#C0C0FF');
//
//Get the odd directly nested LI:
$('.myDiv > ul li:odd-child').css('background-color', '#C0C0FF');
//
//Get all directly nested LI elements after 3rd element:
$('.myDiv > ul li:gt(2)').css('background-color', 'blue');
//
//Get all directly nested LI elements after 3rd element:
$('.myDiv > ul li:lt(2)').css('background-color', 'blue');
//
//Gets div's that have a specific attribute:
$('div[id]').css('background-color', '#C0C0FF'); 
//
//Gets div's that have a specific attribute with a specific value:
$('input[id=uiEmail]').css('background-color', '#C0C0FF'); 
//
//All  external anchors (start with...)
$('a[href^=\'http://\'').css('background-color', '#C0C0FF');
//
//All external anchorts (ends with...)
$('a[href$=pdf').css('background-color', '#C0C0FF');
//
//Gets divs that have LI children:
$('div:has(li)').css('background-color', '#C0C0FF'); 
//
//Get's divs that are empty:
$('td:empty').css('background-color', '#C0C0FF');

Some more examples, specific to form elements:

//All form elements of the page's first form:
$(document.forms[0].elements).css('background-color', '#C0C0FF');
//
//All text elements:
$('input:text').css('background-color', '#C0C0FF');
//
//All checkbox elements:
$('input:checkbox').css('background-color', '#C0C0FF');
//
//All textt elements that are part of #myForm:
$('#myForm input:text').css('background-color', '#C0C0FF');
//
//All input elements with a specific name:
$('input[name=uiAA]').css('background-color', '#C0C0FF'); 
//
//All text input elements with a specific name:
$('input:text[name=uiAA]').css('background-color', '#C0C0FF');

Some more selector examples, specific to tables:

//Table examples:
//
//Odd rows in a table with a striped class
$('table.striped > tr:odd')
//
//A Selected Column
$('table tr > td:nth-child(2)').css('background-color', 'pink');

Some more selector examples specific to links:

//Link examples:
//
//All  external anchors (start with...)
$('a[href^=\'http://\'').css('background-color', '#C0C0FF');
//
//All external anchorts (ends with...)
$('a[href$=pdf').css('background-color', '#C0C0FF');

## Resources ##