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.
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.
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:
There are lot more things you can do with 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:
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.