Getting started with jQuery
Maybe you’re like me a month ago: you’ve heard great things about jQuery; you would love to get to know the basics; but you have better things to do than to aimlessly walk through tutorials. I was lucky enough to be working alongside a jQuery-savvy UI developer on a recent project these past few weeks, and I’ve managed to pick up a few tricks. So let’s see if you can know what I know by the end of this blog entry, and start littering your client-side scripts with dollar signs for your next project 
At the most fundamental level, jQuery is a great way to save on typing stuff like document.getElementById("uxFirstName").value. Pre-jQuery, we would write:
<p><input type="text" id="uxFirstName" name="uxFirstName" /></p>
<p><input type="button" id="uxClickMe" name="uxClickMe" value="Click me" onclick="uxClickMe_click()" /></p>
<script type="text/javascript">
//<![CDATA[
function uxClickMe_click() {
alert(document.getElementById("uxFirstName").value);
}
//]]>
</script>
With jQuery:
<p><input type="text" id="uxFirstName" name="uxFirstName" /></p>
<p><input type="button" id="uxClickMe" name="uxClickMe" value="Click me" /></p>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function() {
$("#uxClickMe").bind("click", function() {
alert($("#uxFirstName").val());
});
});
//]]>
</script>
Important takeaways: You can place multiple $(document).ready(function() { ... }); anywhere within the document body. Using CSS notation, "#elementId" denotes the element id, and ".className" denotes the element class. (The latter is very useful for stuff we want to do on multiple elements.) What I like best is the .bind() method, this frees us from messing up elements with attributes such as onclick and onblur.
Okay, let’s move on to more interesting stuff. We want to be able to toggle a div to show and hide its contents with a “slide in/slide out” effect. The best example would be a shopping cart, but its HTML would be a bit too involved, so we’ll just use the example of a textarea for the user to key in optional remarks in a web form.
<a href="#" class="add-remarks">Additional remarks</a>
<div class="optional remarks">
<textarea id="uxRemarks" name="uxRemarks" cols="80" rows="5"></textarea>
</div>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function() {
$("div.remarks").hide();
$(".add-remarks").bind("click", function(e) {
e.preventDefault();
$("div.remarks").toggle("slow");
});
});
//]]>
</script>
So, by default, the big textarea is hidden (line 8), and if the user wants to type in it, he clicks on the link, and the textarea slides into view (lines 9-12). Nice. Now we have an additional consideration: what if there is a postback due to some user action? Then whatever the user had typed in would be hidden upon page load. The solution would be to replace $("div.remarks").hide(); with the following:
$("div.optional").each(function() {
if ($(this).children().is("textarea")) {
var textarea = $(this).children("textarea");
// assume that there'll only be one textarea in div.optional
var text = textarea.val();
if (text == null || text.length == 0) {
$(this).hide();
}
}
});
So, for each div with class=”optional”, if it has a child element that is a textarea, and the textarea doesn’t contain any text, hide the div. Note: $(this) refers to $("div.optional"). So you can have many optional textareas, and each would be hidden only if it’s empty.
Well, that’s essentially all I know (for now) about jQuery, and I hope you found $(this) (heh) useful.
Comments: