Say for example we wanted to select the following block of XHTML:

Hello
blank
Hello

We would use jQuery to select this code black as follows with a bit of JavaScript:

(function ($) {
    $().ready ( function () {
        var main = $('#main');
    });
})(jQuery);

So when the above snippet runs it would select the element with the id of “main” in this case it’s the main div element. So then to further drill down to be able to select elements within this jQuery object we would extend the previous snippet to the following:

(function ($) {
	$().ready ( function () {
		var main = $('#main');
		main.each ( function () {
			var odds = $(this).find ('.odd');
			odds.each ( function () {
				$(this).append ('
World


');
			});
		});
	});
})(jQuery);

Doing this will select all of the elements with the class “odd” and append two div’s to it. Obviously you could just select all of the “odd” elements in this document and get the same result but if you where working with multiple tables with the same class names and you only wanted to manipulate one this would be a useful technique.

Hope this helps. For further information about selectors please read my article jQuery selectors and attribute selectors reference and examples.

The following table lists the different methods you have available to you to select nodes when using jQuery. All of the listed selectors should be wrapped in the following to stop your jQuery scripts conflicting with other libraries:

    (function ($) {
        //Your code here
    })(jQuery);

jQuery selectors and examples

jQuery Selectors and Attribute Selectors

Selector	Example	Description
List accurate as of jQuery 1.3
*	$(‘*’);	This selector is a wild card method and will select all elements in a document.
#id	$(‘#id’);	This selector selects an element with the given ID.
.class	$(‘.class’)	The class selector will gather all elements in the document with the given class name
element	$(‘element’)	This selector will collect all elements in a document with the given tag name i.e. table, ul, li, a etc.
a, b, c. … n	$(‘th, td, .class, #id’)	This method can use multiple selection patterns to collect elements.
parent child	$(‘li a’)	This will select all “a” elements that are a descendant of “li”
a > b	$(‘table > tr’);	This will select all b elements which are a child element of a or in our example all tr elements in a table or tables.
a + b	$(‘li + a’);	This will select all “a” elements that are an immediate descendant of “li” in our example.
a ~ b	$(‘p ~ ul’);	This selector will select all “ul” elements that are a sibling of “p”
:first	$(‘ul li:first’);	Returns the first element in a result set
:first-child	$(‘ul li:first-child’);	Returns the first child element of the parent element.
:last	$(‘ul li:last’);	Returns the last element in a result set
:last-child	$(‘ul li:last-child’);	Returns the last child element of the parent element.
nly-child	$(‘div p:only-child’);	Returns elements which are the only child of the parent element.
:not(a)	$(‘input:not(:checked)’);	Returns all elements that are not “a” on in our example all input elements that are not checked
:has(a)	$(‘div:has(p)’);	Returns all elements with a descendant that matches a in out example a “div” that contains a “p”.
dd	$(‘ul li:odd’);	Returns all odd elements in a result set (zero based)
:even	$(‘ul li:even’);	Returns all even elements in a result set (zero based)
:eq(n)	$(‘ul li:eq(n)’);	Returns a numbered element identified by n (zero based)
:gt(n)	$(‘ul li:gt(n)’);	Returns all elements in a result set greater than n (zero based)
:lt(n)	$(‘ul li:lt(n)’);	Returns all elements in a result set less than n (zero based)
:nth-child(n)	$(‘ul li:nth-child(n)’);	Returns the nth child in a result set (one based)
:nth-child(odd)	$(‘ul li:nth-child(odd)’);	Returns all odd numbered elements in a result set (one based)
:nth-child(even)	$(‘ul li:nth-child(even)’);	Returns all even numbered elements in a result set (one based)
:nth-child(formula)	$(‘ul li:nth-child(3n)’);	Returns every nth child in a result set. In our example every third child (one based)
:header	$(‘:header’);	Returns all heading elements e.g. h1, h2, etc.
:animated	$(‘ul:animated’);	Returns elements with an animation currently in progress
:contains(text)	$(‘:contains(hello)’);	Returns all elements containing the passed string
:empty	$(‘:empty’);	Returns all elements that contain no child nodes
:parent	$(‘li:parent’);	Returns all elements that a parent nodes to any other DOM element including text nodes.
:hidden	$(‘ul:hidden’);	Returns all hidden elements that are hidden with CSS or input fields of the type “hidden”
:visible	$(‘ul:visible’);	Returns all visible elements
[attribute]	$(‘[href]‘);	Returns all elements that contain the passed attribute in our example any element with a “href” attribute
[attribute=value]	$(‘[rel=external]‘);	Returns all elements that the passed attribute value is equal to the passed value. In our example ant element with a “rel” attribute equal to “external”
['attribute!=value']	$(‘[rel!=external]‘);	Returns all elements that the passed attribute value is not equal to the passed value. In our example ant element with a “rel” attribute that is not equal to “external”
[attribute!=value]	$(‘[class^=open]‘);	Returns all elements that the passed attribute value start with the passed value. In our example any element thats “class” attribute value begins with “open”
[attribute$=value]	$(‘[id$=-wrapper]‘);	Returns all elements that the passed attribute value ends with the passed value. In our example any element whos “id” ends with “-wrapper”
[attribute*=value]	$(‘[class*=offer]‘);	Returns all elements that the passed attribute value contains the passed value. In our example any element whos “class” contains the string “offer”
:input	$(‘:input’);	Returns only input elements of the tag name input, select, textarea and button
:text	$(‘:text’);	Returns only input elements of the type “text”
:password	$(‘:password’);	Returns only input elements of the type “password”
:radio	$(‘:radio’);	Returns only input elements of the type “radio”
:checkbox	$(‘:checkbox’);	Returns only input elements of the type “checkbox”
:submit	$(‘:submit’);	Returns only input elements of the type “submit”
:image	$(‘:image’);	Returns only input elements of the type “image”
:reset	$(‘:reset’);	Returns only input elements of the type “reset”
:file	$(‘:file’);	Returns only input elements of the type “file”
:button	$(‘:button’);	Returns only input elements of the type “button”
:enabled	$(‘:enabled’);	Returns all enabled input elements
:selected	$(‘:selected’);	Returns the selected element in a select list.
:disabled	$(‘:disabled’);	Returns disabled input elements
:checked	$(‘:checked’);	Returns checked input elements of the type radio or checkbox.

Hopefully this reference table will help you on your way with jQuery selectors and attribute selector. Hope this helps.

For information on how to use the returned jQuery object from any of the selectors above please read this aticle: jQuery Object to jQuery DOM Element

(function ($) {
    var elms = $('#a-form').find ('input');
})(jQuery);

Now I’m sure that there are a million better ways to do this in jQuery, but for what I had to do it was just fine. So say we want to iterate through the returned jQuery Objects using the each method:

(function ($) {
    var elms = $('#a-form').find ('input');
    elms.each ( function () {

    });
})(jQuery);

So how would you use the jQuery Objects that you will iterate through in this code snippet as jQuery DOM Elements? Well there are two ways. You can ether use the this with the $ selector as follows:

(function ($) {
    var elms = $('#a-form').find ('input');
    elms.each ( function () {
        $(this).click ( function () {
            //code here
        });
    });
})(jQuery);

Or you could save the element into a variable for later use like so:

(function ($) {
    var elms = $('#a-form').find ('input');
    elms.each ( function () {
        var elm = $(this);
    });
})(jQuery);

Hope this helps someone.