jQuery is a JavaScript library that greatly reduces the work of encoding and allows us to do complicated things like animations, event handling, use of AJAX , the JSON object , etc.., in an easy way. jQuery can run on any browser such as FireFox, Internet Explorer, Safari, Chrome, etc.., unimpeded. To start with JQuery we need the jquery.js file in our directory. We can download the jQuery this link. Once downloaded the file,save the file as Jquery js-like 2.0.3.js. So we need to add this download file in our website directory, eg :JQuery. Now, the path should resemble the following: “JQuery / JQuery-2.0.0.js“. In the meantime, let’s take a look at the features of jQuery mentioned above in detail and with examples.
jQuery Animations
The jQuery animations can be used in applications or Web sites, to make the site attractive.
Step 1:
In this step we will learn how to use jQuery in our html page and create a simple animation. Let us start using jQuery in our html page. This page will locate the file which we have downloaded above:
Listing 1: Getting Started with jQuery
<script type = "text / javascript" src = "JQuery/Jquery-2.0.3.js"> </ script> <script type="text/javascript">
Version of JS can vary . At the time of writing this article I used jQuery-2.0.3.js. Below is the skeleton of what our html page will look like:
Listing 2: Skeleton html
<html>
<head>
<title> jQuery Test </title>
<script type = "text / javascript" src = "/JQuery/Jquery-2.0.3.js"> </script>
<script type="text/javascript"></script>
</head>
<body>
</body>
</html>
Listing 3: Code performing step1- myanimation.html
<html>
<head>
<title> Starting with jQuery </title>
<script src="JQuery/Jquery-2.0.3.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").animate({left:'700px'});
});
});
</script>
</head>
<body>
Click the button to animate the div.
<div style="background:red;height:10px;width:10px;position:absolute;">
</div>
<button> Click here </button>
</body>
</html>
Output after opening the above html is as below:
Step 2:
In this step, we will learn how to use custom scripts. Create a file and name it menuscript.js in the same directory. In this case it will be in the directory JQuery. The skeleton of any JS custom will look like this:
Listing 4: Skeleton. js
$(document).ready(function() {
//Your code will be added here
});
Here is the code for our menuscript.js
Listing 5: userdefined JS
$(document).ready(function() {
$("div").click(function() {
alert ("Congratulations, the code is running.");
});
});
Now include menuscript.js as follows:
List 6: code for performing step 2
<html> <head> <title> Animations with jQuery </title> <script type = "text/javascript" src ="JQuery/Jquery-2.0.3.js"> </script> <script type = "text/javascript" src ="JQuery/menuscript.js"> </script> </head> <body> <div> Click here couple over the message. </div> </body> </html>
Output of the above html code would be as below:
Event Handler (Event Handling)
Using jQuery, we can handle events such as clicking a button, the click of a menu, etc., without refreshing the entire page html.
Step 3:
In this step, we will learn about event handling in jQuery. Events are actions such as the push of a button, the mouse over, etc., The purpose of any event is to initiate some action. The code below is a good example for event handling in jQuery.
Listing 7: code for performing step 3
<!DOCTYPE html>
<html>
<body>
<div onmouseover="mouseover(this)" onmouseout="mouseout(this)"
style="background-color:blue;width:120px;height:20px;padding:40px;">Mouse Over Me</div>
<script>
function mouseover(obj)
{
obj.innerHTML="Thank You"
}
function mouseout(obj)
{
obj.innerHTML="Mouse Over Me"
}
</script>
</body>
</html>
In the above code, the script tag calls the function that changes the text in the box on when you take mouse over the box. Open the above html in your browser, and you will the output as below:
after mouser over the output would be:
jQuery and AJAX
If we unite jQuery and Ajax we can develop rich and interactive web applications.
Step 4:
In this step we will learn how to implement ajax functionality in jQuery. AJAX acronym for Asynchronous JavaScript and XML, help us load information from server without the need of refreshing the entire page. Let’s see an example. In this example, let us will load static data using jQuery and AJAX. Load() is one of the most important methods used in jQuery to load data. Create an html file and name it JQueryajax.html
Listing 8: Code to perform step 4: JQueryajax.html
<html>
<head>
<title> jQuery and Ajax </title>
<script type = "text/javascript" src = "JQuery/Jquery-2.0.3.js"> </script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("#driver").click (function(event) {
$('#stage').load('JQuery/contents.html');
});
});
</script>
</head>
<body>
<p> Click the button below to upload the contents: </ p>
<div id="stage" style="background-color:red;">
Content
</div>
<input type="button" id="driver" value="load" />
</body>
</html>
To run this code we should create a html file in directory JQuery that was previously created. We have to name the file as contents.html. The code for contents.html is given below.
Listing 9: contents.html
<html> <body> i'm contents page </body> </html>
Click on the button “Load” in JQueryajax.html . Let’s take a look above at “JQueryajax.html” more in detail. Let’s look at the load () method.
$(‘#stage’).load(‘/JQuery/contents.html’); The load () method accepts the path of contents.html as a parameter and asks for your content to be loaded on the stage. This allows the file to load the html content from another html file. Open the above html in your browser and the below output would be displayed:
On click of the Load button the following output is displayed:
JSON Data Using jQuery
We can work with JSON data using jQuery.
Step 5:
In this step we will learn how to load data from a Json file. Create an html file and name it “exampleforJqueryJson.html”. Below is the code to load data from JSON.
Listing 10: Code to perform step 5: exampleforJqueryJson.html
<html>
<head>
<title> Working with JSON </title>
<script type = "text/javascript" src ="JQuery/Jquery-2.0.3.js"> </script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("#driver").click(function(event){
$.getJSON('JQuery/data.json',function(v) {
$('#stage').html('<p> Movie 1: '+ v.Movie1 +'</p>'); $('#stage').append('<p>Movie 2 : '+ v.Movie2+'</p>');
$('#stage').append('<p> Movie 3: '+ v.Movie3 +'</p>');
});
});
});
</script>
</head>
<body>
<p> Click the button to load data </p>
<div id="stage" style="background-color:red;">
Movies:
</div>
<input type="button" id="driver" value="load"/>
</body>
</html>
Create a file “data.json” in the directory JQuery. The json file should look like this:
Listing 11: Archive json
{
"Movie1": "Life of Pie" ,
"Movie2": "Jurassic Park" ,
"Movie3": "Mission Impossible"
}
Let’s look at the code above in detail: Let’s look at the $.getJSON in greater detail. In the above code, the $.getJSON takes the path “JQuery / data.json”, which is the path of the json file, in other words, the file we created in the directory JQuery. Then the function $.getJSON accepts another function with parameter v as its own parameter. The variable v stores the values that are in the file. The values stored in the variable are Movie1, Movie2, Movie3. So when the code calls the value by calling their respective keys, say v.Movie1 , etc., the names get displayed.
Open the html in your browser and the result would be as below:
Now click on the Load button and the result will be as below:
Here I’ve tried to concisely explain some of the features of Jquery. Also there are many plugins available that can also be added in the same way as we did in step 1 of our html , but jQuery plugins have more features.
Summary
In this article, learn about jQuery and its characteristics. We also implemented some of its functionality in our own code. If you have any questions, please write it in the comments section.
Introduction to JavaScript