jQuery Overview

In Javascript, we are using document.write to reference an object's method, similarly in jQuery, we are using a selector instead of an object and including jQuery() or an alias $() at the beginning. This selects DOM element(s) from an HTML document and then do something with them using jQuery methods.

How jQuery work?

When browser represents current webpage as the DOM, every element is a node and jQuery selects these nodes to perform some action.

Let's say we have a paragraph within a div element and with some text in it.

<div><p>Hello World</p></div>

There are three nodes here-

a div element node
a paragraph node
a text node that contains 'Hello World'

The text node is the child node of paragraph node and the paragraph node is the child node of div elements.
These nodes work as a selector in jQuery on which some effect or event occurs.

Include jQuery Library

For using jQuery, simply include a jQuery library file by using HTML <script> tag.

We can either download jQuery library from jQuery website at http://jquery.com or, we can also directly include the jquery library file from CDN.

On the jQuery official website, click on the download button to download the jQuery source file. Place this downloaded file within a folder and include within script tags.

<script src="/script/jquery.min.js"></script>

There are two versions for download - Compressed and Uncompressed.

The uncompressed file is best used during development or debugging, the compressed file saves bandwidth and improves performance on production. Once you have downloaded the jQuery file, you can see the .js extension. Include this file in your HTML document within <script> tags, just like Javascript files.

These are the links provides by Google and Microsoft for the jQuery library.

Google CDN -

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

Microsoft CDN -

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>

Check the current jQuery version

These are the following code to check the current jQuery version.

<!DOCTYPE html>
<html lang="en">
<body>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script>
alert(jQuery.fn.jquery);
alert(jQuery().jquery);
</script>

</body>
</html>