jquery How To

HTML, CSS, and JavaScript are the three fundamental languages of the web. We structure our websites with HTML, style them with CSS, and add interactive functionality with JavaScript. In fact, most animations and any action that happens as a result of a user clicking, hovering, or scrolling are constructed with JavaScript.

jQuery is the “Write Less, Do More” JavaScript library. It is not a programming language, but rather a tool used to make writing common JavaScript tasks more concise. jQuery has the added benefit of being cross-browser compatible, meaning you can be certain the output of your code will render as intended in any modern browser.

Using jQuery

At its core, jQuery is used to connect with HTML elements in the browser via the DOM.

The Document Object Model (DOM) is the method by which JavaScript (and jQuery) interact with the HTML in a browser. To view exactly what the DOM is, in your web browser, right click on the current web page select Inspect. This will open up Developer Tools. The HTML code you see here is the DOM.

Each HTML element is considered a node in the DOM - an object that JavaScript can touch. These objects are arranged in a tree structure, with <html> being closer to the root, and each nested element being a branch further along the tree. JavaScript can add, remove, and change any of these elements.

If you right click on the site again and click View Page Source, you will see the raw HTML output of the website. It’s easy at first to confuse the DOM with the HTML source, but they’re different - the page source is exactly what is written in the HTML file. It is static and will not change, and will not be affected by JavaScript. The DOM is dynamic, and can change.

The outermost layer of the DOM, the layer that wraps the entire <html> node, is the document object. To begin manipulating the page with jQuery.

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.