Free Online Courses for Software Developers - MrBool
× Please, log in to give us a feedback. Click here to login
×

You must be logged to download. Click here to login

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

jQuery for beginners

In this article , we will learn about jQuery, features of JQuery and start using some of the features in our code.

JQuery is a javascript library, which reduces lot of coding work and allow us to do complicated things like Animations, Event handling, using AJAX, using JSON object etc. in an easy way.

JQuery can run on any browser like firefox, internet explorer, safari, chrome etc without any constraints.

This feature of JQuery is known as cross browser support. To start working with JQuery we need the JQuery.js in our directory. We can download JQuery from the link provided: http://code.jquery.com/jquery-2.0.0.js

Save the .js file as Jquery-2.0.0.js.

We need to add this downloaded file in a directory of our website, e.g. /JQuery.

Now the path should look something like this: ‘/ JQuery/Jquery-2.0.0.js’. Now Let us look at the above mentioned features of JQuery one by one in detail with examples.

jQuery

Figure 1: jQuery

Animations: JQuery has built in animations which can be used, while creating a web site or web application, to make the site catchy.

Step 1

In this step we will learn how to use JQuery in our html page and create a simple Animation.

We can start using JQuery in our html page by locating the file which we have downloaded as follows:

   <script type="text/javascript" 
   src="/ JQuery/Jquery-2.0.0.js"></script>
   <script type="text/javascript">

The version of .js may vary according to the download. In this tutorial we are using Jquery-2.0.0.js.

Below is the skeleton, on how our html page is going to look like.

<html>
    <head>
        <title>Test JQuery</title>
        <script type="text/javascript" 
        src="/JQuery/Jquery-2.0.0.js"></script>
        <script type="text/javascript">
        </script>   
    </head>
    <body>
    </body>
</html>

Listing 1: code to execute step 1: myanimation.html:

<html>
<head>
        <title>My First Animation using JQuery</title>

<script src="//ajax.googleapis.com/ajax/libs/JQuery/1.9.1/JQuery.min.js">
</script>
<script> 
$(document).ready(function(){
  $("button").click(function(){
    $("div").animate({left:'700px'});
  });
});
</script> 
</head>
 
<body>
If you don’t like red, click the button and see him move out of the screen
<div style="background:red;height:10px;width:10px;position:absolute;">
</div>
<button>Button</button>
</body>
</html>

Step 2

In this step we will learn how to use custom scripts.

Create a file and name it as userdefined.js in the same directory. In this case it will be in /JQuery directory.

Skeleton of any custom ‘.js’ file will look this.

$(document).ready(function() {
   // custom codes go here

 });

Here is the code for our userdefined.js

$(document).ready(function() {
  $("div").click(function() {
	alert ("Success! My custom code executed");
  });
});

Now we can include userdefined.js as follows:

Listing 2: code to execute step 2.

<html>
<head>
<title>A simple example to show JQuery Animation</title>
   <script type="text/javascript" 
   src="/JQuery/Jquery-2.0.0.js"></script>
   <script type="text/javascript" 
   src="/JQuery/userdefined.js "></script>
</head>
<body>
<div>
 Click to see a success message
</div>
</body>
</html>

Event handling: Using JQuery, we can handle events, like button click, menu click etc. without reloading the entire html page.

Step 3

In this step we will learn event handling in JQuery.

Events are actions like button click, mouse over etc which is done on the User interface.

The aim of any event is to trigger some action. The code below is a good example for event handling in JQuery.

Listing 3: Code to Execute Step 3

<html>
<head>
<script src="http://code.JQuery.com/JQuery-1.9.1.js"></script>
</head>
<body>
Select the comic which you like most:
<select name="Comics" multiple="multiple">
<option>Asterix</option>
<option>Tin Tin</option>
<option>Phanthom</option>
<option>Batman</option>
</select>
<div></div>
<script>
$("select").change(function () {
var favourite = "";
$("select option:selected").each(function () {
favourite+= $(this).text() + " ";
});
 alert("I like "+favourite);
})
.change();
</script>
</body>
</html>

In the code above the script tag calls a function which produces an alert box based on the value selected from the list of options.

The selected value is stored in the variable favourite and gets displayed along with the string value that is appended.

AJAX: JQuery along with Ajax, we can develop rich, interactive web applications.

Step 4

In this step we will learn how to implement ajax functionalities in JQuery.

Asynchronous JavaScript and XML, also known as AJAX helps us to load data from the server without allowing the entire page to reload.

Let us look at an example.

In this example we will load a static data using JQuery AJAX.

load() is one of the most important methods in JQuery used for loading the data.

Create a html file and name it as JQueryajax.html

Listing 4: Code to Execute Step 4: JQueryajax.html

<html>
<head>
<title>JQuery Ajax Example</title>
   <script type="text/javascript" 
   src="/JQuery/Jquery-2.0.0.js"></script>
   <script type="text/javascript" language="javascript">
   $(document).ready(function() {
      $("#driver").click(function(event){
          $('#stage').load('/JQuery/output.html');
      });
   });
   </script>
</head>
<body>
   <p>Click button to load data:</p>
   <div id="stage" style="background-color:red;">
          Text Loads Here
   </div>
   <input type="button" id="driver" value="Load Some Text" />
</body>
</html>

To execute this we should create a html file in JQuery directory which we created already. We have to name the html file as output.html. The code for output.html is given below.

Listing 5: output.html

<html>
<head>
<title>This is just an output page</title>
</head>
<body>
This is a static page, just for demo.
</body>
</html>

On clicking the ‘Load Some Text’ button in JQueryajax.html, it will load the static data, from the body of ‘output.html’.

Let’s look at the above ‘JQueryajax.html’ more in detail. Let’s have a look at the load() method.

        $('#stage').load('/JQuery/output.html');

The load method accepts the path of the output.html as its parameter and asking the content to load in the stage. This enable the html file to load the contents of another html file.

JSON: We can work with JSON data using JQuery.

Step 5

In this step we will learn how to load datas from a .json file.

Create a html file and name it as ‘JQueryjson.html’. Below is the code to load JSON data.

Listing 6: Code to execute Step 5: JQueryjson.html

<html>
<head>
<title>Load JSOn</title>
   <script type="text/javascript" 
   src="/JQuery/Jquery-2.0.0.js"></script>
   <script type="text/javascript" language="javascript">
   $(document).ready(function() {
      $("#driver").click(function(event){
          $.getJSON('/JQuery/jsondata.json', function(v) {
             $('#stage').html('<p> Book 1: ' + v.book1 + '</p>');            $('#stage').append('<p>Book 2 : ' + v.book2+ '</p>');
        $('#stage').append('<p> Book 3: ' + v.book3+ '</p>');
          });
      });
   });
   </script>
</head>
<body>
   <p>Press the button to load data</p>
   <div id="stage" style="background-color:red;">
          Data will load here
   </div>
   <input type="button" id="driver" value="Click" />
</body>
</html>

Create a file ‘jsondata.json’ in /JQuery directory. The json file should look like this:

Listing 7: jsondata.json

{
"book1": "Harry Potter",
"book2" : "Alchemist",
"book3": "Lord of the Rings"
}

Let’s look at the above code more in detail. Let’s have a look at the $.getJSON method from the above html page more in detail.

      $.getJSON('/JQuery/jsondata.json', function(v) {
             $('#stage').html('<p> Book 1: ' + v.book1 + '</p>');            $('#stage').append('<p>Book 2 : ' + v.book2+ '</p>');
        $('#stage').append('<p> Book 3: ' + v.book3+ '</p>');

In the above code $.getJSON() function gets the path ‘/JQuery/jsondata.json’, which is the path of the json file, in other words, the file we have created in JQuery directory.

Then $.getJSON() function accepts another function with parameter v as its own parameter.

The variable v stores the values that is got from the file. The values stored in variable v are book1, book2, book3. So when the code calls the value by calling the respective keys , say v.book1 etc. the respective names are displayed.

Other than the features which are available in Jquery-2.0.0.js which we have downloaded for this tutorial, there are lot many plugins available which can also be added in the same way as we did in step 1 to our html code. These plugins have more JQuery features.

They can be downloaded from the following link.: http://plugins.JQuery.com/

Conclusion

In this article, we have learnt about JQuery, and the features of JQuery. We also have implemented some of the features in our own code.



I am well versed with Computer Programming languages and possess good working knowledge on software languages such as C, Java, PHP, HTML and CSS

What did you think of this post?
Services
[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually – in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits – in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login