jQuery is one of those things that sounds scary to most web designers, but really isn’t. It gives you great power over how the page you’re working on not only looks, but how it acts too.
I’m going to assume that if you’ve found this tutorial, you
already know the basics of jQuery but are looking for more control over what’s selected. In this tutorial I will be explaining how selectors work to generate jQuery wrapped sets, and how you can use filters to accomplish thing that basic selectors don’t allow you to do.
If you are at all familiar with CSS, you will immediately notice that many jQuery selectors are the same as the CSS selectors. Because this functionality is provided by jQuery, it does not rely on the browser to support the selector. Great, right? I think so.
Basic Tag Selection
The first thing you typically do when planning your selection is to examine the tags on your page, along with their ID and class. Here is a list of the basic tag selectors and how they may be used:
| Basic Selectors | |
* | Selects every element |
| $(‘*’) would match every element, regardless of tag | |
tag name | Selects every element with a name matching tag name |
| $(‘div’) would match every <div> tag | |
tag.class | Selects every element with a name matching tag and a class matching class |
| $(‘div.seperator’) would match every <div class=”seperator”> tag | |
tag#id | Selects every element with a name matching tag and an id matching id |
| $(‘div#main’) would match every <div id=”main”> tag |
| Selecting by other Attributes | |
tag[attr] | Selects every element with a name matching tag and with an attribute attr. The attribute must be present, but can have any value |
| $(‘img[alt]’) would match every <img alt=””>, <img alt=”anything”>, etc. | |
tag[attr='abc'] | Selects every element with a name matching tag and with an attribute attr that has a value of abc |
| $(‘label[for=”main”]’) would match every <label for=”main”> tag | |
tag[attr^='abc'] | Selects every element with a name matching tag and with an attribute attr that has a value beginning with abc |
| $(‘img[src^=”http://mydomain.com”]’) would match every <img> with a src that starts with http://mydomain.com | |
tag[attr$='abc'] | Selects every element with a name matching tag and with an attribute attr that has a value ending with abc |
| $(‘img[src$=”.gif”]’) would match every <img> with a src that ends in .gif | |
tag[attr!='abc'] | Selects every element with a name matching tag and with an attribute attr that does not match abc, OR without an attribute attr |
| $(‘label[for!=”wrapper”]’) would match every label except for <label for=”wrapper”>. It would match <label> also. | |
tag[attr*='abc'] | Selects every element with a name matching tag and with an attribute attr containing abc |
| $(‘a[href*=”blog”]’) would match every <a> tag linking to a url containing the word blog |
| Combining Selectors (Relational Selectors) | |
tag descendant | Selects every element with a name matching descendant that is anywhere inside an element with a name matching tag |
| $(‘div input’) would select any <input> that is anywhere inside a <div> (even if it is deeply buried) | |
tag, anothertag | Selects every element with a name matching tag or anothertag |
| $(‘div, span’) would select all elements that are either <div> or <span> | |
tag > child | Selects every element with a name matching child that is directly inside an element matching tag |
| $(‘a > img’) would select every <img> directly inside of an <a> | |
tag + next sibling | Selects every element with a name matching next sibling that comes directly after an element named tag |
| $(‘label + input’) would select all <input> tags that come directly after a <label> | |
tag ~ any sibling | Selects every element with a name matching any sibling that comes after an element named tag (within the same parent) |
| $(‘img ~ a’) would select all <a> that come after an <img> tag and share the same parent |
Filters
Filters are another critical piece of the puzzle, and can fill any gaps that the basic selectors may leave. One common example of a filter being used is to select every other row in a table (to alternate colors for example). To do that you could use a selector like $(‘table tr:nth-child(even)’). For this portion of the tutorial I’m going to try something new: a live demonstration of each of the basic filters.
| Live jQuery Samples | |||
| Basic Filters | |||
| Filter | Live jQuery Sample | Explanation | |
:first |
$('tbody tr:first')
| Selects the first TR in the TBODY | |
:last |
$('tbody tr:last')
| Selects the last TR in the TBODY | |
:even |
$('tbody tr:even')
| Selects every even TR in the TBODY | |
:odd |
$('tbody tr:odd')
| Selects every odd TR in the TBODY | |
:eq(n) |
$('tbody tr:eq(6)')
| Selects the 6th* TR in the TBODY | |
:gt(n) |
$('tbody tr:gt(6)')
| Selects every TR after the 6th* | |
:lt(n) |
$('tbody tr:lt(8)')
| Selects every TR before the 8th* | |
| Child Filters | |||
| Filter | Live jQuery Sample | Explanation | |
:first-child |
$('tbody tr td:first-child')
| Selects the first child TD of each TR | |
:last-child |
$('tbody tr td:last-child')
| Selects the last child TD of each TR | |
:only-child |
$('tbody tr td:only-child')
| Selects each TD that has no siblings within it’s TR | |
:nth-child(n) |
$('tbody tr:nth-child(15)')
| Selects the 15th* TR in the TBODY | |
:nth-child(even|odd) |
$('tr td:nth-child(even)')
| Selects every other TD in each TR (evens) | |
:nth-child(xn+y) |
$('tbody tr:nth-child(4n+1)')
| Selects the TR after every 4th TR in the TBODY |
* NOTE: The nth-child Filters are 1-based, while the eq, gt, and lt filters are 0-based
Still to come:
- Selecting by a tag’s current state using filters like :checked, :disabled, :enabled :hidden
- Selecting by a tag’s type using filters like :button :checkbox etc
- Negating and other useful filters like :not() :has() :contains(text) :parent :animated
- Combining Filters
I hope this tutorial was helpful. I’m open to comments & suggestions, and will be doing more like this in the coming weeks.