A couple of weeks back I attended a session on Unobtrusive JavaScript (UJS) and jQuery by John Teague.  This was probably the biggest thing I took from the Houston TechFest.  Recently, I found the opportunity to put my new knowledge to good use.  I haven't reach the unobtrusive part of John's presentation, but jQuery is my first step.


I found the jQuery API documentation to be invaluable.  At first, as a reference, it was a little difficult to find what I need.  For example the "val()" function.  Not knowing the name of the function hindered my search on the documentation.  Of course, as tons of people have already been using jQuery, I did a quick search on the Net and found what I was looking for.


One of the key components of jQuery is the selector syntax.  Already being very familiar with CSS and XPath, I found selectors in jQuery to be quite natural.  The "." (dot) represents a css class, the "#" represents an target by id.  If you know CSS selectors, you have more than enough to get started with jQuery selections. 

For more advanced selection, you can use attribute selectors, like $("input[type='checkbox']").  This feels very natural to me with my knowledge of XPath.  However, jQuery provides a lot of shortcuts.  In this example, you can simply use $("input:checkbox").  There are a lot of other filters you can use.  The jQuery API documentation covers them very well.


Chaining of jQuery functions can be very useful.  In particular, when you don't want to "select" the same component more than once, you have a couple of options.  You could store the selection in a local variable (e.g.  var tmp = $("#mySelector")).  Or, you could simply chain commands.  Here is an example of using chaining to first change the selection on a drop down list, then trigger the "onchange/change" event:  $('#mySelector').val('somevalue').trigger('change'); 

Could that be any easier?!  I remember the days of writing my own javascript to find an option by value and "select" it.  With jQuery, my javascript is becoming much more elegant.

Cross-Browser Compatibility

The product I am working on right now is for a customer who is using IE6 as a corporate standard.  It's been annoying at best reading about how to do one thing or another with CSS only to find out that it doesn't quite work in IE6.  A simple example is the ":hover" selector.  It simply doesn't work in IE6 for anything other than anchors.  Well, jQuery has a hover function that allowed me to get the behavior I was looking for.  Now hovering over my GridView rows works like a charm.

Also, attaching events is hassle free.  You don't have to worry about what browser you are using.  Of course, this is perhaps the primary purpose of a library like jQuery, but it deserves mention.


I had been thinking, I need to learn more about jQuery and see how I can use it on my web applications.  Now, I wish I had taken the time to investigate the library sooner.  Hopefully, this post will inspire those of you on the fence to play with jQuery today.

Happy coding...

posted on Friday, February 6, 2009 10:46 AM
Filed Under [ CSS jQuery Web Development ]


No comments posted yet.

Post A Comment