What is jQuery
Modern web programming and website development is no longer imaginable without the use of the JavaScript language. However, at present, more and more often not “naked” JavaScript code is used, but JavaScript frameworks and libraries. One of these libraries, and probably the most popular today, is jQuery. By some estimates, at least half of the largest sites on the Internet use this library.
While we might call jQuery a library, it’s actually the concept of “jQuery” that brings together an entire ecosystem of libraries built around a core library: jquery ui for building visual interfaces, jqyery mobile for developing mobile sites. and etc.
What are the benefits of using jQuery?
- Simplification of working with code. jQuery provides a simple, elegant syntax for manipulating elements on a web page.
- Extensibility. All jQuery code is open for review and modification, and if something in the library does not suit you, it can be modified. You can also create jQuery plugins.
- Cross browser. jQuery has support for most popular browsers, including these. like IE 7.8. (Although due to the fact that browsers IE 6-8 are gradually becoming history, and also to reduce the size of the library, support for IE 6-8 was discontinued in the latest version).
Including the jQuery library
To start working with this library, we first need to load it. You can find it on the official website of the developer https://jquery.com/download/ . You can find several versions of jQuery on the downloads page itself. At the time of writing this chapter, the latest version available is 2.0.3. Although the versions differ slightly from each other, these differences are usually not so significant, and the basic core and general principles of most versions are essentially the same.
The library is presented in two versions – Compressed or Minified (minimized) and Uncompressed (normal). The minified versions provide the same functionality as the regular versions, but differ in that they do not contain any optional characters like spaces, comments, etc., and therefore have a min suffix in their name , for example, jQuery-3.6.0.min.js _ Since they are more productive due to the smaller volume, they are recommended for use in real production. At the same time, if you want to understand the logic of the jQuery code, then in this case you can refer to the regular version of the library.
The jQuery library is included in the same way as other JavaScript files. For example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The world of JavaScript</title>
<script src="jquery-3.6.0.min.js"></script>
</head>
<body>
</body>
</html>
In this case, I used a minified version of the jQuery library – jQuery-3.6.0.min.js. Now let’s create some simple web page using jQuery:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Welcome to the jQuery</title>
<script src="jquery-3.6.0.min.js"></script>
<script type="text/javascript">
$(function () {
$("#btn1").click(function () {
$(this).css('background-color', 'red');
alert('Welcome to the jQuery jQuery');
});
});
</script>
</head>
<body>
<h2>Welcome to the jQuery</h2>
<button id="btn1">jQuery</button>
<button id="btn2" onclick="alert('Welcome to the jQuery'); ">JavaScript</button>
</body>
</html>
This web page, on the one hand, uses jQuery code, on the other hand, it also demonstrates the difference from using standard JavaScript code.
We have two buttons defined on the page. One button has an onclick handler defined in the button’s markup itself: onclick=”alert(‘Welcome to the jQuery’); “.
The other button does almost the same thing, but only with jQuery. This button has an id (id=”btn1”), through which we will control it in the jQuery function.
At the very bottom of the page, we’ll define a jQuery function:
$(function () {
$("#btn1").click(function () {
$(this).css('background-color', 'red');
alert('Welcome to the jQuery jQuery');
});
});
An expression $(function(){});is a short definition of a jQuery function. It is customary to place this function at the end of the document, as in this case, before the closing body tag. This function includes all the JavaScript code that will be executed when the page is loaded.
The meaning of the code used is that we get the button element in the expression $(“#btn1”)and then hang a click handler on it. In fact, the expression $(“#btn1”).click will be similar to using the handler onclick in the body of the button markup. At the same time, we do not need to change the markup of the button itself in any way, to add something there. Everything is done in the jQuery function.
What does it include in our case? First, we set the color of the button: $(this).css(‘background-color’, ‘red’);. And then just display the message on the screen.
Using CDNs
In the previous example, I included the jQuery library directly from the local drive, but we do not need to download the library and place it on the local drive along with other files. Instead, we can use CDNs (Content Delivery Networks). In this case, the library itself will be physically located in some CDN network, and we can point a link to it.
For example, let’s include the jQuery library located on the jQuery CDN:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The world of JavaScript</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
</body>
</html>
It is not necessary to include exactly this version of the library, the entire set of available versions of the library can be found at https://code.jQuery.com/
We can also use other CDNs. For example:
Google CDN: Provided by Google. All available versions can be found at https://developers.google.com/speed/libraries/devguide?hl=en#jQuery .
Microsoft CDN: Provided by Microsoft. All available versions can be found at https://www.asp.net/ajaxlibrary/cdn.ashx#jQuery_Releases_on_the_CDN_0 .