If you are looking around for a JavaScript library or looking to switch libraries, you should give jQuery a sample. If you have been doing web
development for any period of time, then I am sure you've heard of it. From my experience, jQuery is an incredibly easy library to learn. I made the decision to
learn jQuery several months ago and it has been a godsend. It has
dramatically improved my relationship with JavaScript; a strained
relationship, at best, no thanks to IE. But those days are history
along with the days of getElementById. This brings me to the topic of
this post. I wanted to take a little time to talk about jQuery
selectors and showcase a few of my favs. When using jQuery, IDs are
optional. You can select elements using class name, DOM position,
attribute value and IDs (if you feel like being all precise and stuff).
Keep in my mind this is not an exhaustive list of every possible
selector. It is, however, a list of my most used (read favorite)
selectors.
1. var value = $('.fields:first input:hidden').val();
Selector number 1 will find the first instance of the fields class (.fields:first) and then select all hidden inputs (input:hidden)
found within the containing tag. Since there is only one hidden input
that matches the selection, only one will be returned. Making the
retrieval of the hidden inputs value a snap.
<div class="fields">
<input type="text" id="textBox1" name="textBox1" />
<input type="text" id="textBox2" name="textBox2" />
<input type="hidden" id="Hidden1" name="Hidden1" value="Hello"/>
</div>
<div class="fields">
<input type="text" id="textBox3" name="textBox3" />
<input type="text" id="textBox4" name="textBox4" />
<input type="hidden" id="Hidden2" name="Hidden2" value="Goodbye"/>
</div>
2. $('.fields input, .fields select, .fields .someClass').click(function() { alert('hello') });
Numero dos on the list is the multi-selector. I am not sure if that is
the official name but that's what I like to call it. Using this
selector, you combine multiple selectors into one separating each
selector with a comma. This will allow you to manipulate the matches
of three selections as one. It can be very useful if you need to
assign an event to multiple elements of different types.
<div class="fields">
<input type="text" id="textBox1" name="textBox1" />
<select>
<option>opt 1</option>
<option>opt 2</option>
<option>opt 3</option>
</select>
<input type="text" id="textBox2" name="textBox2" class="someClass" />
</div>
3. $(this).nextAll('ul').toggle();
This selector is kind of a stretch. Inside an event you can pass in the this keyword
as a selector and get instance access to the element that fired the
event. If you need to find some related DOM elements you need a change
in strategy. The this keyword can't be concatenated with
string selectors. One possibility, is to grab the ID attribute of the
element that fired the event ($(this).attr('id')). But what if
your element doesn't have an ID? That's where jQuery's traversing
methods make an entrance. The nextAll() method will get all sibling
objects that appear after the currently selected object. You can
optionally pass selectors in to the the nextAll() method ...
<div>
<h3 class="toggleButton">Text</h3>
<ul><li>text</li></ul>
<ul><li>text</li></ul>
<ul><li>text</li></ul>
<ul><li>text</li></ul>
</div>
$('.toggleButton').click(function(event) {
$(this).nextAll('ul').toggle();
});
Conclusion
With three short examples I am only scratching the surface of
jQuery's amazing selectors. I hope this post makes you hungry for more
and at the very least, gets the uninterested interested in jQuery. I
will be back with more soon!
Tags: jquery, javascript