jQuery part 3: overview of jQuery

By Andrew Clifford

jQuery is an important technology for anyone involved in writing websites or developing business systems that run on the web.

In the last two weeks I have covered how the basic web technologies of HTML and CSS produce elegant but limited websites, how JavaScript can meet the requirements for fully functional and dynamic websites, but that JavaScript is very complicated to write well.

This is where jQuery comes in.

jQuery is an open source JavaScript library, which you can reference from your web pages to simplify JavaScript development.

In plain JavaScript, scripts have to navigate through the HTML to find the parts that you want to modify or for which you want to respond to events. The big difference with jQuery, from which it gets its name, is that scripts can use simple query statements instead of navigation code. For example, if you want to find all the text which as been marked as important, you could use a single statement like $(".important") rather than many lines of code searching through the page. The query statements use the same syntax as CSS, making it familiar for web developers.

On top of this basic querying facility, jQuery adds many functions. This includes functions to modify the page and respond to events. It includes routines to perform animations, such as moving or fading parts of the page. It includes code to retrieve data from the server, sometimes known as Ajax. These functions cope with the differences between browsers, so scripts work the same whatever browser the user chooses. The functions make it much easier to write the types of code that modern websites require.

In addition to these functions, jQuery allows "plug-ins". These are additional libraries of JavaScript based on the jQuery library that perform more specific functions. Just to pick one example amongst hundreds, I have been using the DataTables plug-in, which adds sorting, searching and paging to any table on a web page.

jQuery has become a de facto standard for JavaScript. It is well supported by all the major vendors. If you are involved in any sort of website or web application development, you should be familiar with it.

However, for all its benefits, jQuery is not magic. You do need to use it wisely. Specifically:

• Base web pages on simple HTML and CSS. Make sure the website or application works without any JavaScript at all.
• Use jQuery to enhance the simple web pages, adding more visual effects and a richer user experience.
• Use plug-ins carefully. Core jQuery is stable, well-documented, and well-supported. But not all plug-ins are. Stick to a small number of the most widely-used plug-ins. Use them in a way that would let you easily swap for a different plug-in with similar functionality if you have to.
• Remember that jQuery does not replace the underlying skill. It does not turn programmers into web designers, or web designers into programmers. You will need people with different skills to work on different aspects of web development, even if they do all use jQuery.

Subscription