jQuery

What is ?

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.

Including jQuery

Below are some of the most common ways to include jQuery.

Browser

Script tag

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

ref in -npm

Using jQuery

•      At its core, jQuery is used to connect with HTML elements in the browser via the DOM.
• The 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, we need to ensure the document is “ready” first.