After working for quite some time with jquery in big and small projects, these are my top reasons:
- Easy to use if you have a hidden element (of any kind - li, div, td, etc) - in order to show it, it's "display" property has to set the its proper "block" state. Each element has its own native "block" state. Jquery does that simply with the show() method: $('div').show(). So - if it's a "td" element, in modern browsers (such as firefox, chrome, webkit etc..) this method will set its display property to "table-cell".
- Performance Jquery uses a document fragment for some inner dom processing - which results in faster dom manipulations such as: appending html content, removing elements etc.
- CSS (xpath) selector syntax to retrieve elements one of the most common actions in jquery is to get a set of elements (or one element) and perform one or more actions on it. Jquery uses the sizzle engine to retrieve dom elements. Sizzle uses the convenient simple css syntax to describe the elements it will try to retrieve. i.e., if i want to retrieve all elements with class "my-class", which has a div ancestor: $('div .my-class').
- Easy Ajax Jquery has implemented a very convenient and easy cross-browser ajax. Handling callbacks, passing values as json or other data format is straight forward. Moreover, there are simplified versions of the $.ajax() method for just $.get() for loading a url, $.getJSON() for loading json data and $.post() method for posting data to the server (using POST method).
- Worldwide community support Jquery is being used by many (millions...). Microsoft officially supports this library integrating tools in its developer web tools, the web is full with tutorials, mentors and help using jquery for any project or use.
- Excellent Event Management System jquery has a very convenient event management. you can bind events easily and you get an event object (again, cross-browser) with useful properties. One addition that I like is the ability to have a namespace for any event, i.e.: $('#myId').bind('click.anyObject'). Now, when myId is clicked, it will trigger a click with the additional property of "anyObject" as a namespace. In fact, you can use this namspace again for more objects.
- Dom Manipulation is a breeze Jquery has simple syntax for removing, adding, appending or operating any kind of manipulation on dom elements including attribute manipulation. i.e., for removing an element: $('#myElement').remove(), for deep cloning an element: $('#myElement').clone().
- Getting form element values Again. the elegant way of getting values from any form element is simply as: $('#someFormElement').val(). However, you can also use the form function $('myForm').serialize() to retrieve a query string which includes the form elements with their values ready to be sent with an ajax call.
- Get the source dom element Sometimes, you'll want to use the source dom element resulted in your jquery object,so you can finally revert back and get the reference source dom object easily with: $('.myClass').get(5); (where you can use any index to get any object in the jquery result set).
- BONUS Reason: Method Chaining I couldn't avoid this one: since jquery mostly returns a jquery object, you can write few operations in one line. i.e.: $('.tool-tips').append(' ').addClass('new-tool-tip').bind('click', someFunctionName);
These are some of my 10 good reasons for using jquery. I'm sure there are a lot of other good reasons for using jquery in your projects. It's fast, it's dynamic, it's open source, it's cross-browser and it's beautiful and elegant. I'm sure once you start developing with it, you'll feel very comfortable and you'll get the feeling of where it can assist you and save time while writing elegant code.