Unobtrusive JavaScript using JQuery
I feel that an important advantage of using JQuery is its ability to separate behavior from structure. Consider the case where you want to trigger a JavaScript method when a link is clicked. A common implementation would be:
Click Me
Even though this mixing of behavior (JavaScript) and structure (HTML) looks straight forward, it can become a maintenance issue in large projects. This is where JQuery shines. Using JQuery, the above code can be rewritten in a cleaner way:
Click Me
Now, consider a slightly trickier case where context specific parameters need to be passed to the JavaScript method:
Click Me 1 Click Me 2 Click Me 3 Click Me 4 Click Me 5
Here is the refactored version using JQuery:
Click Me 1 Click Me 2 Click Me 3 Click Me 4 Click Me 5