jQuery - Introduction
jQuery
In this tutorial we will learn about jQuery a JavaScript library.
Prerequisite
This tutorial assumes that you have some basic knowledge of the following.
What is jQuery?
jQuery is a JavaScript library that makes writing JavaScript code easy.
jQuery tag line is "write less, do more".
Note! jQuery is not a new language as under the hood it is JavaScript.
Why use jQuery?
We can use JavaScript to get the work done but jQuery makes the task easier. jQuery combines commonly used JavaScript code into easy to use methods. For instance, it is relatively easier to manipulate DOM, access and modifiy elements in the page using jQuery.
In the following example we are using plain JavaScript to select an HTML element in the page using id value sample-elem.
document.getElementById("sample-elem");
In the following example we are selecting the same element using jQuery.
$("#sample-elem");
We can easily tell that jQuery code to select an element by id is shorter and simpler than plain JavaScript.
Similarly, to send and fetch data from server using JavaScript XMLHttpRequest API is a bit complex but jQuery provides $.ajax() method which reduces much of the coding part.
Code written using jQuery runs exactly the same in most of the modern browsers as jQuery takes care of most of the cross-browsers issues.
Text editors and IDEs
For this tutorial series we can use the following text editors.
We can also use the following IDEs.
Download jQuery
You can download jQuery from their website.
Include in your project
Let's say we have the following project structure.
In the above image we can see that we have a project folder jquery-project. Inside the project folder we have a js folder which holds the jquery.min.js file. We will be saving JavaScript files inside this folder.
Inside the project folder we also have an index.html file.
To include the jQuery file inside the index.html file we are using the script tag.
<script type="text/javascript" src="js/jquery.min.js"></script>
The index.html file contains the following code.
<!DOCTYPE html>
<html>
<head>
<title>Index Page</title>
</head>
<body>
<!--
more HTML will go here...
-->
<!-- script -->
<script type="text/javascript" src="js/jquery.min.js"></script>
</body>
</html>
ADVERTISEMENT