The following is a set of jQuery shortcuts I use at some point on a daily basis.

10. appendTo()

While there are many ways to use appendTo(), I find myself taking advantage of it when dealing with dual listboxes. With that one little command, I can move listitems from one listbox to another with no crazy loops. To illustrate the ease of use, here the entire function corresponding to the “add all items” button:

jQuery(“#availableItems option”).appendTo(“#selectedItems”);

Read more here: http://docs.jquery.com/Manipulation/appendTo

9. html()

The html attribute allows you to get or set the innerHTML of an element. Typically I’ll have a div to handle some kind of validation results, and populate it based upon some logic. For example, here is a div to hold the results:

<div id=”someresults” style=”display:none;”></div>

Then some function to populate it, in this case, display an error:

function someFunction()
{
$(“#someresults”).show();
$(“#someresults”).html(“<h2 style=’color:red;’>Something bad happened…</h2>”);
}

While that example is pretty vanilla, you can imagine how far you can stretch this.

Read more here: http://docs.jquery.com/Attributes/html

8. val()

If you plan on doing any kind of form manipulation, this one’s a must! The val attribute gets/sets a form field’s value. When called with a value like here:

$(“#firstName”).val(“William”);

The value of the firstName textbox is overwritten with William. To read the value, you simply call without an argument:

var theFirstName = $(“#firstName”).val();

One fun way to use the val attribute is creating the classic “billing address is the same as the mailing address” checkbox button. Here is how the code would look:

$(“#BillingAddress1″).val($(“#MailingAddress1″).val());
$(“#BillingAddress2″).val($(“#MailingAddress2″).val());
$(“#BillingCity”).val($(“#MailingCity”).val());
$(“#BillingState”).val($(“#MailingState”).val());
$(“#BillingZip”).val($(“#MailingZip”).val());
$(“#BillingCountry”).val($(“#MailingCountry”).val());

Read more here:  http://docs.jquery.com/Attributes/val

7. TinyMCE

Back when I used to exclusively program in ASP.NET 2.0, Telerik’s RAD Editor (http://demos.telerik.com/aspnet-ajax/editor/examples/overview/defaultcs.aspx) was the coolest thing ever. It is still really cool with some really advanced features, but for projects with a tight budget, found an awesome free tool in TinyMCE.

While there are unlimited numbers of configurations, I’ll typically use it in one of two modes:

1. I’ll convert all textareas into rich text editors, usually for an admin master page

2. Initialize individual textareas as needed

Initializing the textbox is the same, the difference is where you call it. Here is how you initialize the editor:

tinyMCE.init({
mode : “textareas”,
theme : “advanced”,

theme_advanced_toolbar_location: “top”,
theme_advanced_toolbar_align: “left”,
theme_advanced_resizing: true,
readonly: false
});

Read more here:  http://tinymce.moxiecode.com

6. tablesorter 

This might be one of my favorite plugins of all! This jQuery plugin converts a generic html table into a sorting machine, with the smarts to distinguish between dates, integers, markup, etc. baked right in. Like TinyMCE, you can initialize every table to be sortable, or on an individual basis. There is also an optional paging add-on which works decently, although I tend to go with my own personal paging control. So what do you need to do?

1. Add the reference to the plugin, then the following javascript:

jQuery(document).ready(function() {
jQuery(“table”)
.tablesorter({ widthFixed: true, widgets: ['zebra'] })
});

2. Set the table’s class to tablesorter, and include <thead> and <tbody> tags.

The link above takes you to the detailed documentation and how far you can bend and flex this plugin. But if you need to support sorting, this is one powerful plugin.

Read more here:  http://tablesorter.com/docs/

Stay tuned for Part II!