Introduction to JQuery

  • Article

JQuery is an open source JavaScript library, which can be integrated with any web technology. JQuery is been there around for more than 3 years. I thought of coming up with a series of articles, which can explain JQuery in depth. I start this series with history of it followed by benefits offered. JQuery version 1.0 in 2006 is the first release of it with support to CSS selectors, Ajax support. Later, 1.1, 1.2 versions released with support to event delegation, namespaced events etc. A new plug-in called as JQuery UI got released, which includes widgets like modal dialog, tabs, accordions and effects like shake, slide etc. Current stable version of JQuery is 1.4 and JQuery UI is 1.7. We can download JQuery from https://jquery.com/ . It comes in two formats one is minified and other is uncompressed. Minified version is Gzipped and minified by removing spaces, comments and reducing names of lengthy variables. Minified version is used for production deployment, since it will reduce the time to download the JQuery .js file to browser. Uncompressed version is used in development environment. In the same way, we can download JQuery UI plug-in from https://jqueryui.com/download by selecting the theme along with components needed. JQuery UI comes with four components:

  • Core UI - It is mandatory for working with widgets, interactions, effects properly.
  • Interactions - It will help to make elements draggable, droppable, selectable etc.
  • Widgets - It provides UI elements like tabs, dialogs, slider etc.
  • Effects - It adds effects like slide, shake, highlight etc to an element.

We can selectively download the required components from JQuery UI. There are lot more plug-ins available, which can be downloaded from https://plugins.jquery.com/. 

Now, let's move our focus towards benefits offered by JQuery. As we know, JQuery is light weight, open source, cross-browser javascript library. It works on variety of browsers like IE, Firefox, Opera, Chrome. The MIT license for JQuery allows us to integrate it in our proprietary software. 

Benefits of using JQuery:

  • Allows to manipulate elements in DOM in an efficient manner using selector syntax.
  • Allows to alter the HTML document content dynamically like element insertions.
  • Adds effects like fading, shaking to DOM elements.
  • Can retrieve information from server without a postback or refreshing the page by using $.get(), $.post(), $,ajax() methods.
  • Cross-browser support makes it to work consistently on all browsers. JQuery provides this feature by an abstraction layer.
  • JQuery works on sets. It means, there is no need of iteration statements or loops for applying a style or action on a set of elements.
  • Reduces lines of code by using chaining. Chaining allows a method to return an object itself as a result all the time,  reducing usage of temporary variables.
  • It is extensible. We can write our own plug-in, which will work on top of JQuery.
  • Its syntax is based on CSS selectors. This feature makes designers to learn JQuery quickly.

Before start writing JQuery, we need to know few things about structure of HTML document. Since, JQuery uses CSS selectors to access elements in a DOM.

Refer below HTML document's structure:

<html>

  <head>

    <title>JQuery Sample HTML Page</title>

  </head>

  <body>

    <span>

      <div>This is a Section.</div>

      <div>This is next Section.</div>

      <div>This is Last Section.</div>

    <span>

  </body>

</html>

Here, <html> is parent of all other elements. In other words, all other elements are descendants of <html>. <body> and <head> are descendants as well as children of <html>. <div> are siblings of other <div> under <span> element. 

I am ending the things here. In next article, we will write some sample JQuery selectors.