jQuery is a fast, small and feature-rich JavaScript library included in a single .js file. It is by far the most popular JavaScript library.
JQuery makes the web developer’s life easier. The library provides many built-in functions with which you can easily and quickly perform various tasks with less code.
Important features of jQuery
DOM selection: jQuery provides selectors to retrieve a DOM element based on various criteria such as tag name, id, css class name, attribute name, value, nth child in the hierarchy, etc.
DOM manipulation: You can manipulate DOM elements using various built-in jQuery functions. For example, adding or removing elements, changing HTML content, CSS class, etc.
Special Effects: You can apply special effects to DOM elements, such as showing or hiding elements, fading in or out, sliding effect, animations, and more.
Events: The jQuery library includes functions that are equivalent to DOM events such as press, dblclick, mouseenter, mouse release, blur, keyup, keydown, etc. These features automatically resolve browser issues.
Ajax: jQuery also includes easy-to-use AJAX functions to load data from servers without reloading the entire page.
Cross-browser support: The jQuery library handles cross-browser issues automatically, so the user doesn’t need to worry about it. jQuery supports IE 6.0+, FF 2.0+, Safari 3.0+, Chrome, and Opera 9.0+.
JQuery benefits
Easy to Learn: jQuery is easy to learn because it supports the same JavaScript style coding.
Write less, do more: jQuery provides a rich set of features that improve developer productivity by writing less readable code.
Excellent API documentation: jQuery provides excellent online API documentation.
Cross-browser support: jQuery provides excellent cross-browser support without writing additional code.
Unobtrusive: jQuery is unobtrusive, which allows you to separate concerns by separating HTML and jQuery code.
JQuery Versions
There are currently three versions of jQuery: 1.x, 2.x, and 3.x. The only difference in the second version is that it no longer supports old browsers, such as Internet Explorer below version 8. This made it possible to reduce the size of the library file and speed up its work. The third version received even more acceleration, new methods and fixes.
JQuery is also used in a compressed (.min) and non-compressed version. You can use the uncompressed version of the library during development. In a compressed version, the code is minimized and it is almost impossible to make any changes to it. Therefore, the compressed version is used already on the working project for more optimal work, since the library in this version takes up much less space and is processed faster.
JQuery connection
There are 2 ways to connect jQuery to your project: local and using CDN. With the local method, the library is connected as a regular .js file that is located on your server. When connecting from a CDN, the library connects from a remote server, for example, from a Google CDN. Let’s take a closer look at each method.
Connecting jQuery locally
- Download the jQuery library js file from the official page. Just right-click on the download link and select “Save Link As” from the pop-up menu.
- Then save the download file in your site directory. For example, I just save it in the js folder of my project along with the rest of the js scripts.
- Now you need to include the previously downloaded library file in your page. Place the following code between the and tags:
<script type="text/javascript" src="jquery-3.5.0.min.js"></script>You should end up with something like this:
<!doctype html>
<html>
<head>
<title>jQuery</title>
<script src="jquery-3.5.0.min.js"></script>
</head>
<body>
<h1>Conaction jQuery</h1>
</body>
</html>Connecting jQuery with CDN
Connecting jQuery hosted on a CDN is similar to a local one, except that the library file will not be on your server, but on a remote one. Aside from this detail, you simply add jQuery to your page like any other external JavaScript file.
One big benefit of using Google hosted jQuery: Many users have already downloaded jQuery from the Google CDN when visiting another website. As a result, it will be loaded from the cache when you visit your site, which leads to faster loading. In addition, Google CDN will make sure that after a user requests a file from him, it is sent from the server closest to them, which also leads to faster downloads.
The most popular CDNs are Google CDN and jQuery CDN. We will consider connecting from Google CDN, but connecting from other servers is the same and you can choose any option you like.
