JQuery is the most voluminous and popular script library in order to maximize the functionality of a web page. Its use is considered in many cases more preferable than writing separate scripts for the site, because this library is distinguished by reliability and the ability to work in all browsers, including their older versions. Also, the use of jQuery optimizes the site and creates a much lower load than the "clean" JavaScript code.
In this article, we will figure out how to connect jQuery to your site.
How to download jQuery
In order to connect the JQuery library to a web page, you need to download it and add it to the folder with JavaScript files in the directory where the web page files are located.
The library can be downloaded on the official website, the latest version of jQuery and a download link will be indicated directly on the main page. It looks like this:
Accordingly, we can see that the latest version of the Jquery library today (October 2018) is v3.3.1. It is recommended to check for updates and regularly connect the current version to avoid errors in displaying information on the site.
After the file is downloaded, it must be placed in a directory on the hosting, where other site files are posted. If the web page has not yet been posted to the network, but is located on the computer, the downloaded file is simply placed in the appropriate folder. If it has already been transferred to the server, then you need to use any file manager to transfer data (for example, WinSCP or FileZilla).
To store JS-scripts, it is better to select a separate folder. JQuery is also ported to it.
Connect the downloaded library
How to include jQuery library in HTML document. First, open any HTML page on your site in any text or code editor. In the event that you are working on any CMS, you need to go to the section where changes are made to the head block.
Next, in the <head> area, the following code is entered with a link that indicates how to connect JQuery scripts and leads to the appropriate directory.
It will look like this:
<script src="scripts/jquery-3.3.1.min.js"></script>
Accordingly, scripts is the folder in which the desired library is located, followed by its full name with permission (similar to connecting any other files to the document). As you can see, the <script> tag is used with the src attribute specifying the path to the file.
This method of connecting jQuery is the most common, but in some cases it can slightly reduce the performance of the site.
JQuery Connection in Wordpress
Wordpress is one of the most popular CMS for developing websites and blogs. Let's see how to enable jQuery in Wordpress.
It will not be a mistake to connect the library using the method described above through the head block, but the following method is recommended to optimize the site.
Download the library in this case is not required. You need to go into the editing mode of the functions.php file and write the following code in it:
function my_enqueue_scripts() { wp_enqueue_script('jquery'); } add_action('wp_enqueue_scripts', 'my_enqueue_scripts');
Thus, the connection will be completed.
Using jQuery with Google
There is a convenient way to use Google services to connect jQuery to a site. Its advantages include increased website performance, since it is not the files from the internal system of the document that become involved, but an external resource, that is, additional time is not spent on loading, and the page is faster.
How to connect jQuery to a site using Google.
It is necessary, as in the first method, go to the <head> block of all HTML documents, then add the following code:
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
This is a direct link to a library posted directly on Google. In the future, when the script will access the library, it will load it immediately from there.
It is important to note that the latest version of jQuery must be specified in the link. The code with the latest version can be taken from the Google Developers service, having found through the library name search.
JQuery Options
When wondering how to connect JQuery to the site, you probably noticed that when downloading, two files become available, one of which has an additional "min" in the name, and the second does not.
Both of these options can be used to connect to a web page, but there is a difference between them.
The version with min in the name is compressed, since all unnecessary characters, such as tabs and line breaks, are removed from it. It is almost impossible to use it for making edits and debugging, but it shows good performance when connected to the site.
The uncompressed version, on the contrary, is good to use when debugging code, but it weighs more, and it is not recommended to use it to connect to the site.
Conclusion
So, we looked at the basic methods and learned how to connect jQuery scripts to an HTML document. Depending on the goals and objectives, as well as relying on the issue of personal convenience, you can use any option proposed.
The jQuery library is a great way to expand the functionality of a site without losing performance.