Modern web programming and web development is impossible to imagine without the usage of JavaScript. Currently, however, JavaScript frameworks are being used instead of the “naked” code of JavaScript. One of these frameworks and the most popular one by far is jQuery. According to some estimates, jQuery developers use this framework in at least half of the largest sites on the Internet.
Although we can call the jQuery framework a library, actually the concept of “jQuery” brings together an ecosystem of libraries, built around a core library: this library “jquery.ui” is designed to create visual interfaces, and there is a jqyery.mobile used in the jQuery UI development of mobile sites, and so on.
What advantages are brought by the usage of jQuery?
- Branching the marking code from behavior. Imposition of JavaScript code from marking on the outside leads of an HTML marking cleaner and clearer. In addition, it allows splitting the possibility of developing between web designers who create the visual part of the page and jQuery developers who describe the behavior of the elements in the JavaScript.
- Simplifying working on code. jQuery offers simple and elegant syntax for manipulating elements on a Web page.
- Extensibility. All jQuery code is open for viewing and editing, and if something in the library is not satisfied, it can be modified. But you can also create jQuery plugins.
- Cross-browser compatibility. jQuery has the support of most known browsers, including those like IE 7 and 8 (although, because browsers IE 6-8 gradually have become a part of history, as well as to reduce the size of the library, in the last version, support for IE 6-8 was discontinued).
Connecting the jQuery Library
To start working with this library, jQuery developers need to download it. It can be found on the official website of the developer http://jquery.com/download/. On the download page, several versions of jQuery can be found. At the time of writing this post, the latest available version is 2.1.4. Although versions are slightly different of each other, but these differences are generally not significant, and the base rod and the generic principles of most versions are essentially the same.
The library is available in two variants – Compressed or Minified (minimized) and Uncompressed (conventional). Minimized versions provide the same functionality as the conventional version, but differ in that they do not contain any unnecessary characters such as spaces, comments, etc., and therefore in their names they have the suffix min – for example, jquery-1.10.1.min .js. Because they are more productive due to the smaller volume, they are recommended to be used in actual jQuery UI development. At the same time, if you want to understand the logic of jQuery code, you can refer to the conventional version of the library.
The jQuery library is connected as well as other JavaScript files. For example:
<!DOCTYPE html>
<html>
<head>
<title>World jQuery</title>
<script src=“jquery-1.10.1.min.js”></script>
</head>
<body>
</body>
</html>
In this case, we used a minimized version of the jQuery library: jquery-1.10.1.min.js. Now we create some simple webpage using jQuery:
<!DOCTYPE html>
<html>
<head>
<title>World jQuery</title>
<script src=“jquery-1.10.1.min.js”></script>
</head>
<body>
<h2>Welcome to the world jQuery</h2>
<button id=“btn1”>jQuery</button>
<button id=“btn2” onclick=“alert(‘World JavaScript’); “>JavaScript</button>
<script type=“text/javascript”>
$(function(){
$(“#btn1”).click(function(){
$(this).css(‘background-color’, ‘red’);
alert(‘World jQuery’);
});
});
</script>
</body>
</html>
This webpage, on the one hand, uses the jQuery code, but on the other hand, it also demonstrates the difference from the usage of standard JavaScript code.
We have identified two buttons on the page. One button onclick handler is defined in the layout of the button: onclick = “alert (‘World of JavaScript’);”.
The other button is almost the same, but with jQuery. For this button, id (id = “btn1”) is defined, through which we will manage it in the jQquery function.
At the bottom of the page, we define a jQuery function:
$(function(){
$(“#btn1”).click(function(){
$(this).css(‘background-color’, ‘red’);
alert(‘World jQuery’);
});
});
The expression $ (function () {}); – this is a brief definition of jQuery. This function is made to be placed at the end of the document – as in this case, before the closing “body.” This involves all of the code in the JavaScript language, which will be executed when the page loads.
If you are a newbie in jQuery IU development, it all may seem too difficult for you. If you need IT homework help, GetCodingHelp can assist you. They have a big team of experts who are knowledgeable not only in web programming, but in web designing, IT administration, mobile development, and so on.