If you have gone through the previous chapter, you probably have implemented jQuery in your Battleship game. In this chapter, we will discuss about jQuery in detail.
The jQuery library is a JavaScript framework. It was released in 2006. People used to call it jSelect. We use jQuery in our websites so that we can work with JavaScript easily and add effects to our web pages. You may think jQuery is different from JavaScript. No! jQuery is just another JavaScript file. It is a very lightweight library that helps you to decorate your web pages more easily with less coding.
We use jQuery due to the following advantages:
- It is open source; you can edit or modify its code if required
- It is a small library (about 150 KB file)
- The community support for jQuery is very strong; you can get help from the users easily
- It is user-friendly and popular
- It supports cross-browsers
- It is openly developed; you can fix any bug or add features to it by editing the codes
- It helps the developers to build responsive sites by using AJAX
- It has built-in animation functions that help a developer to create animations in their website
The question is where to find jQuery. Well, you can find it at http://jquery.com/. I have also attached the file with this book. You can download it from there.
If you go to http://jquery.com/, you will see the following screen:
Click the Download jQuery button. You will be redirected to the following page:
There are two versions of jQuery: 1.x.x and 2.x.x. There are just a few differences between these versions. The compressed version's code is not readable as the version does not have blank spaces and comments; however, the uncompressed version is clearly coded and formatted, it also has important comments to understand the code and functions' work. If you want to learn how a function of jQuery works, I would suggest you to go through the jQuery uncompressed version.
Throughout this chapter, we will use the 2.x.x version. The latest version of 2.x.x is 2.2.0.
We will use the uncompressed version for this chapter so that you can study the jquery.js and get a clear concept of how it works. After clicking Download the uncompressed, development jQuery 2.2.0, you will see the jQuery library on your browser. Click Ctrl + S on your keyboard to save the file, as shown in the following screenshot:
After downloading the jQuery, place it in your computer. For simplicity, rename it to jquery.
Create a new HTML file in the same folder and include the jquery.js in your HTML document by typing the following code in the <head></head> tags:
<script src="jquery.js"></script>
To check whether your imported jquery.js is working, type the following code. I will explain the code later:
<html>
<head>
<script type="text/JavaScript" src="jquery.js"></script>
</head>
<script type="text/JavaScript">
jQuery(document).ready(function()
{
jQuery('h1').click(function()
{
alert("jQuery is working!");
} //click function ends here.
);
} // ready function ends here.
);
</script>
<body>
<h1>Click Here!</h1>
</body>
</html>After opening the HTML file, click on Click Here! You will see the following screen:
It means your jQuery is working.
Let's discuss the code that we have written.
Note
You can also install jQuery without downloading it. This kind of installation is known as content delivery network (CDN) installation.
You need to add the following line to your HTML document and if you're connected online, your browser will automatically load jQuery.
<script type = "text/javascript" src = "http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>