One of the things I love about jQuery (and a few other JavaScript libraries) are how selectors can make life very easy when dealing with many objects in the HTML DOM via JavaScript. For example, someone asked a question the other day during training of how to check client side validation in a single point of entry to check values and based on the settings fire a callback to the server.

With jQuery finding all the textboxes, textareas and lists and hooking an event to it is as easy as this:

<script type="text/javascript">
jQuery(document).ready( 
function() 
{ 
    GetActiveProjectsForCustomer();
    
    jQuery("input[@type=text],select,textarea").bind("change",
    function(event) {
        alert(event.target.id + " changed");    
        UpdateTotals(event.target.id);  // Callback invocation
    });
} );
</script>

The first part is a call to the jQuery function with a selector string that specifies what to find. This call returns a jQuery object on which you can call any number of methods that operate on the selected list of elements. In this case .bind() is called which binds a specific event to each of the selected controls. Here I define the delegate function inline, but you can also point at an external function to keep the code a little cleaner.

The nice thing is that you can combine multiple selectors and that you can even filter selectors nicely using CSS/xquery style syntax. Note that all textboxes are searched by looking for input with an attribute of type with a value of text. The filtering features take a little getting used to and applying on a reguar basis, but once you get familiar with it it becomes an extremely powerful tool to manipulate a client side document.

For example if you wanted to further delimit the controls that are bound by the .bind() call and limit to a specific area in the page such as inside of a specific container event you can use:

    jQuery("#divTime input[@type=text],#divTime select,#divTime textarea")

jQuery selectors and most of the functions the object supports return a selector list, which can be chained further (similar to the way LINQ chains its filters and query selectors), so that you can chain together multiple operations for fairly complex filtering logic. And like LINQ you can store and further apply filtering at a later point for incremental filtering based on user selections/choices.

In the code above jQuery also helps by providing a browser independent event object. Finding the target object for an event is not trivial using raw DOM because each browser differentiates between source and target objects a little differently and jQuery makes this much more consistent a) by the event object abstraction and b) by automatically providing this event object to any function that is bound with the .bind() function. The event object abstraction in general provides many useful features such as getting reliable key code and position values that work across browsers.

I've been using Prototype (which also uses selectors heavily although its syntax is a bit different unfortunately) and jQuery for a while now, but at first I didn't really 'get' the power of selectors and constantly ended up writing way more script code than I had to. It takes a little getting used to, but if you're familiar with CSS you should feel right at home.

The power of selectors in client script are a tremendous time and code saver. If you're doing any sort of client scripting and not using a library that helps with element selection and assignment take a little time out and check out some of the JavaScript libraries out there. It's well worth the effort.