JQuery: An introduction

As a web developer we all are familiar with JavaScript. Sometimes we need complex functions to implement our business logic. It is very easy to write complex functions with a few lines of code using JavaScript libraries.

The JQuery library, referred to from here on simply as JQuery, is an extremely popular and easy to use JavaScript library originally written by John Resig. The initial release came on 14 January 2006 and since this time it has continued to be modified and refined by its creator and a growing community of contributors. It is open-source and completely free of charge.

JQuery is a small library based on few very simple intuitive principles. Working with RAW JavaScript or DOM Programming does bring-in its challenges while handling the browser-specific quirks. JQuery provides quite a few utilities to help working in browser agnostic environments. JQuery library strikes right balance between size, feature set and ease of use.

JQuery would help bring-in considerable productivity gains and it’s easy to learn and work. This tool has the potential to bring-about quiet a change in client side development with complex UI with front end logic in JavaScript library.

JQuery is primarily an element selection and DOM manipulation library. It supports the latest CSS3 and XPath selectors which enable us to get practically any element from a page.

JQuery has some advantages over other libraries. These are described below:

Easy DOM traversal: We can get a “<p>” element and then walk the DOM to its last-child, parent or next-sibling for example.

Effortless element manipulation: We can get or set the HTML or plain text content of any element for example, or remove, replace, copy or insert any number of elements.

Complete mastery of the CSS styles of any element: JQuery lets us get or set any CSS value on any element or series of elements.

Event Handling in JQuery: Events are handled very efficiently in JQuery. In JavaScript DOM manipulations for AJAX are done using Asynchronous calls which cause issues while working with different browsers because of DOM implementation. JQuery provides very easy mechanism for binding and unbinding event handlers and provides a normalized event model for all supported browsers. All events are called in the context of the element that caused the event and they receive a fixed up and browser normalized event object that is consistent. To accomplish that we get selectors, a whole slew of operations that can be performed on the wrapped set, DOM normalization for most browsers, Ajax functionality, a host of utility functions for object/array manipulation and a number of basic effect functionality. JQuery also supports JSON for any HTTP callbacks.

A rich effect portfolio: Show or hide, fade-in or fade-out, slide, or animate any element on the page – now it is very much quick and easy.

A unified AJAX request and response system: No more

if (browser == ie) {//do something}
else {//do the same thing differently}.

JQuery manages the request and response via an easy to use and practical interface with built in success and failure handlers.

Wrapped set operations: The real power of JQuery wrapped set comes forth when we apply JQuery operations to all DOM selected elements. JQuery.fn has more than a 100 functions that can operate on matched set and allows manipulating and retrieving selected DOM objects in a batch. If we want to apply styles to alternate rows or any specific rows it is very easy to do that dynamically. Class names can also be dynamically applied. Few methods allow us to go for “get” and “set” operations for .CSS(). Attributes can also be retrieved and set using .ATTR() or retrieve or set a value using .VAL(), .HTML() or .TEXT(). An element can also be cloned from the HTML document and injected into another document either to append or be reversed. Wrapped set operations are also chainable using methods into single command which means it can be taken once and used many times. It can be expanded using .FIND(), .FILTER() or .ADD() methods.

Easy plug-ins: JQuery is a language with DOM extension library with tight focus on core functionality. For everything else JQuery provides an easy plug-in API for almost all operations we can do with DOM operations. JQuery API allows extending the core JQuery object operations simply by creating a function and passing parameter to JQuery wrapped set. Using this method allows us to use the plug-ins which will receive a wrapped set and can operate and participate in JQuery chaining. If no plug-ins satisfies our requirement, we can write our own plug-in which gives us more comfort. This simple and powerful plug-in model is easy to learn and work.

This lightweight open source JavaScript library has become one of the most popular libraries on the web in a relatively short span of time. Software giants like Google, Microsoft recommends this and are using this library in a wide range. So JQuery is becoming the most advanced and strongest tool in web development industry. Now you are ready to spice up your WordPress site with JQuery.