jquery Tutorial

What is jQuery?

jQuery is a lightweight, "write less, do more", JavaScript library.

The purpose of jQuery is to make it much easier to use JavaScript on your website.

jQuery takes a lot of common tasks that require many lines of JavaScript code to accomplish, and wraps them into methods that you can call with a single line of code.

jQuery also simplifies a lot of the complicated things from JavaScript, like AJAX calls and DOM manipulation.

jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.

jQuery is a JavaScript Library.jQuery greatly simplifies JavaScript programming.jQuery is easy to learn.

jQuery is an open source JavaScript library that simplifies the interactions between an HTML/CSS document, or more precisely the Document Object Model (DOM), and JavaScript. Elaborating the terms, jQuery simplifies HTML document traversing and manipulation, browser event handling, DOM animations, Ajax interactions, and cross-browser JavaScript development.

The jQuery library contains the following features:

  • HTML/DOM manipulation
  • CSS manipulation
  • HTML event methods
  • Effects and animations
  • AJAX
  • Utilities

Why jQuery?

There are lots of other JavaScript libraries out there, but jQuery is probably the most popular, and also the most extendable.

Many of the biggest companies on the Web use jQuery, such as:

  • Google
  • Microsoft
  • IBM
  • Netflix

What You Can Do with jQuery

There are lot more things you can do with jQuery.

  • You can easily select elements to perform manipulation.
  • You can easily create effect like show or hide elements, sliding transition, and so on.
  • You can easily create complex CSS animation with fewer lines of code.
  • You can easily manipulate DOM elements and their attributes.
  • You can easily implement Ajax to enable asynchronous data exchange between client and server.
  • You can easily traverse all around the DOM tree to locate any element.
  • You can easily perform multiple actions on an element with a single line of code.
  • You can easily get or set dimensions of the HTML elements.

Advantages of Using jQuery

If you're not familiar with jQuery, you might be wondering what makes jQuery so special. There are several advantages why one should opt for jQuery:

  • Save lots of time — You can save lots of time and efforts by using the jQuery inbuilt effects and selectors and concentrate on other development work.
  • Simplify common JavaScript tasks — jQuery considerably simplifies the common JavaScript tasks. Now you can easily create feature rich and interactive web pages with fewer lines of codes, a typical example is implementing Ajax to update the content of a page without refreshing it.
  • Easy to use — jQuery is very easy to use. Anybody with the basic working knowledge of HTML, CSS and JavaScript can start development with jQuery.
  • Compatible with browsers — jQuery is created with modern browsers in mind and it is compatible with all major modern browsers such as Chrome, Firefox, Safari, Internet Explorer, etc.
  • Absolutely Free — And the best part is, it is completely free to download and use.

What This Tutorial Covers

This jQuery tutorial series covers all the features of the jQuery, including its selector mechanism, event handling system, as well as, effect methods to create interactive user interface features like showing and hiding elements, animating the elements on a web page, etc.

Later you will see some other interesting features of the jQuery such as chaining multiple methods, as well as how to perform common DOM manipulation task such as get or set contents and values of an HTML element on a web page, add or remove elements or their attributes, get and set CSS properties of an element, get or set width and height of the element, and so on.

Finally, you will explore one of the most powerful features of jQuery that is traversing the DOM tree to get the child, parent and sibling elements, as well as features like filtering element's selection, implementing Ajax to retrieve the information from a server and update the page content without refreshing it, and how to avoid conflicts between jQuery and other JavaScript library.