I have always used Prototype library for most of my projects until I was introduced to jQuery three months back ... and it enchanted me.

Behavior driven development (BDD) Using jQuery, behavior(s) of HTML elements is defined separately from HTML code similar to defining style of an element using CSS. Lets look at a simple example to display alert box on click of an element 1 2 3 4 5 6 $(element).click( function (){ alert ( " warning " ); //fill stub for confirming this action from user }); A complex example: All elements of class "speciallinks" should emit the following behavior: change their href link to "javascript:void(0);" generate logs on click onhover should change background color. 1 2 3 4 5 $( " div.speciallinks " ).attr( " href " , " javascript:void(0) " ) .click( function () {console. log ( " div.speciallinks clicked " );}) .hover( function (){$( this ).addClass( " hovered " );}, function (){$( this ).removeClass( " hovered " );});

MVC + J MVC framework divides web development into 3 separate parts Model-View-Controller and Ruby on Rails is a great MVC framework. The View part of MVC framework comprises of HTML, CSS and JavaScript which is bulky, combining three different parts of GUI development into one. Moreover, using Prototype helpers in Ruby on Rails views messes up HTML and JavaScript together. Here, jQuery fits in nicely (due to BDD) to separate JavaScript(J) from Views(V) to visualize the framework as MVC + J which I find very powerful especially working with Ajax. Using jQuery, I keep all my HTML files are clean and clear as all the JavaScript code is kept in .js files defining behavior of HTML elements.

Chaining of actions Chaining of actions for a HTML element follows DRY principals and increases readability of JavaScript code. If I want to add a bunch of operations on a single/multiple elements, it can be as simple as: 1 2 3 4 5 $( " div.message " ).show() .append( " Action has been executed successfully " ) .addClass( " flash " ); // chained functions can be on separate lines :) Now, this is possible because every method within jQuery returns the query object itself on which further methods can be applied to form a chain of methods on "selected" HTML elements.

CSS Selector rocks! CSS Selectors are very powerful when playing with HTML DOM. jQuery is based on CSS Selectors to identify elements in a HTML document, which avoids tedious job of managing idattribute for each of my HTML tags. Most of id attributes can be avoided using right CSS Selector. Prototype does supports CSS Selectors via $$ function, but it doesn't fully leverages the power of CSS Selectors. I find Prototype working best with element's id attribute.

No more checks for presence of an element In prototype, I always need to check if an element exists before applying an action to it. For example: I want to display user specific content in a div{id='user-box'} only if user is logged in (this div will exist on rendered page only if user is logged in). In Prototype I will do : 1 2 3 4 5 if ($( ' user-box ' )!= null ) { // this if block is redundant with jQuery $( " user-box " ).style.backgroundColor = " red " ; }