JQuery is the largest library of scripts that allow you to fill the site with interactive elements and add interesting design features. It is considered more optimized and productive than using pure JavaScript. This article will take a detailed look at how to connect jQuery to your page.
Where to download jQuery
Downloading the library is performed on the official website. Take a look at the screenshot below. When you click on the big orange button, you will be taken to a page where you can select the desired version of jQuery for your operating system.
To date, the latest version of the library is 3.3.1. Previous versions are no longer supported, so if you used them before, you need to replace them with the latest one, it is optimized for all modern browsers and will display correctly.
Select any version of jQuery that you require, right-click on the link, then click "Save Page As" - the file will be saved in JS format.
After downloading, the jQuery library will be available for work.
JQuery Library Options
Before you enable jQuery, it’s important to figure out which file will be used. The fact is that this library is available in two versions: compressed and uncompressed. What is the difference?
All unnecessary characters, tabs and spaces are removed from the compressed version. This is done in order to reduce the weight of the document that your page will link to when working with the library. The name of this version contains .min - this is an indication that you are using the compressed version.
In the uncompressed version of jQuery, the code is positioned so that it allows you to make any required edits; it is convenient for debugging. It can also be connected to a web page, but using this version can slow down the site’s performance.
Connect the library to the HTML document
There are several ways to enable jQuery in HTML.
The easiest is to use the <script> tag, which makes it possible to link to external files containing JavaScript.
In order to use the downloaded library, place the file in the folder where all the other files of your site are stored. You can add it to the root directory, but it’s better to create a separate folder for scripts only, this will help you navigate the page structure more conveniently.
Next, go to the HTML document and write the code there that connects jQuery to the web page.
The code will look like this:
<!DOCTYPE html> <html> <head> <script src="/js/jquery.min.js"></script> </head> <body> </body> </html>
The <script> tag is located with the src attribute pointing to the file to be searched for in the <head> tag.
Please note: in this example, we connect to the page a compressed version of the jQuery library, which is located in the "js" folder in the root directory of the site. Always carefully specify the path to the connected files, otherwise the document will not be able to refer to them.
Thus, the code will need to be placed on all pages of the site where jQuery is used.
The second way is to connect jQuery via Google.
This is even easier: you need to go to the Google Developers service, find jQuery in the libraries section for optimization and copy the code:
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
This code refers to the current version of the library. It can be entered either in the <head> tag similarly to the previous option, or at the bottom of the page before the closing </body> tag.
This method of connecting jQuery is good because it does not overload your page with unnecessary information, but refers directly to the library on a third-party resource. Google services are reliable enough, so you don’t have to worry about something stop working on your site. Enabling jQuery in this way is the best option if you do not need to debug the source code of the library.
Google also refers to a compressed version of the library.
JQuery when working with CMS Wordpress
A large number of sites are made on the Wordpress engine, it is considered the most flexible and convenient for developers. Therefore, there is a special tool that allows you to connect jQuery to the site on this CMS.
Open the functions.php file and enter the following code into it:
function theme_scripts_method(){ wp_enqueue_script( 'jquery'); } add_action( 'wp_enqueue_scripts', 'theme_scripts_method' );
Finally
The Jquery library has wide functionality, it can be used to give a web page interactivity and add interesting design elements. It is used by both beginners in website development and experienced developers.
Jquery does not reduce the performance of the site and is very easy to connect.