What is jQuery and how to use it

jQuery Dec 29, 2022

During JavaScript development, it is often necessary to use rather cumbersome constructs from code in order to perform a simple function. To simplify the work, there is the jQuery library, which is a set of JavaScript functions. It is especially convenient to use jQuery to create interactive sites.

How to include jQuery?

You can't just start using functions from the jQuery library. It needs to be connected first. To do this, you can put the script connection by link in the <head> section of the site. For example, you can take the jQuery library from Google servers. Like this:

<!DOCTYPE html>
<html>
   <head>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
   </head>
   <body>
      Page Data
   </body>
</html>

After connecting jQuery (on the lines below the connection), you can use the jQuery methods.The example used the jQuery library, which is located on the Google servers . Referring to these servers is a fairly common practice. But we strongly recommend that you copy the jQuery library to your site and download directly from your site. Because in some countries Google servers are blocked, for example, in China. This means that for Chinese users, the jQuery library will not load and the scripts on your site will not work for them.

jQuery code is more compact than JavaScript

Compare JavaScript and jQuery code. Here is the pure JavaScript code:

document.getElementById('id').innerHTML = 'Tiger, lion and wolf';

In this code, a tag with a certain "id" is accessed: the internal content of this tag is changed to the line "Hush your mouse, the cat is on the roof." Let's rewrite this line using functions from jQuery:

$('#id').html('Tiger, lion and wolf');

Obviously, the code has become more compact. Let's give another example in which the difference in convenience will be more obvious. Let's say we need to change a CSS property on multiple tags with the same class. For example, make the text blue. In pure JavaScript, we will need to get an array of references to the found elements using the getElementsByClassName method , then iterate through the array and set the CSS property for each of the found tags. It will look like this:

var a = document.getElementsByClassName('class');
for (var i = 0; i < a.length; i++) {
   a[i].style.color = 'red';
}

Let's rewrite this example using a function from jQuery:

$('.class').css('color', 'red');

It turned out that four lines of code were replaced by one, which contains a rather visual function for changing the CSS property.

jQuery Selectors

The dollar sign $ at the beginning of the line in the examples above is a generic jQuery function. Most often it is used to select HTML elements, so after this sign there are parentheses, which contain an indication of the selector.Selectors in jQuery are exactly the same as those in CSS. Let's try to select all elements with class "wolf" using jQuery:

var a = $('.wolf');

Now select everything with id="wolf":

var a = $('#wolf');

And now let's select everything with the "wolf" class, but which are div containers:

var a = $('div.wolf');

All access to elements happens in the same way as in CSS selectors.

jQuery method chains

A large number of jQuery methods return a set of elements. Therefore, you can make chains of these methods. Let's try to modify the examples from the first paragraph of this article. That is, the change in color is compatible with the change in the HTML content of the tag. You get this code:

$('.wolf').html('Tiger, lion and wolf').css('color', 'red');

In this example, we've selected all the HTML tags on the page that have the class "wolf" and inserted the line 'Tiger, lion and wolf' into their content. Then we colored the text in each of these tags blue.