12.1 JavaScript: JQuery

jQuery is the most popular library of javaScript. jQuery makes very easy to work with HTML content, with more efficiency and with less code. How it is very handy, you will see in few minutes.

Configure jQuery

There are two ways to configure jQuery with your html file.

1. Go to jquery.com and download jQuery package. Copy this package in same folder where you keep all your js and html file. Add following line in your html file.

 <src="downloaded_file_name.js"></script>

2. Open your html file and give online reference to your html file. Many vendors including Microsoft and Google have their own jQuery reference. You can use any of these. This one is from google.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"> </script>


Lets start jQuery

Create a new html file and add this code in it. This file contains very simple tags. You will play around with these html tags using jQuery.

At the bottom of this html you will see two script tags. One script tag is reference to online jQuery library which we discussed earlier and second script contains the “javaScript file name” which you will create.

<!DOCTYPE html>
<html lang="en">
<head id=>
    <meta charset="utf-8" />
    <title>Understand Programming</title>
</head>
<body>

<link rel="stylesheet" type="text/css" href="style.css" />
<center>
    <img SRC="http://www.understand-programming.com/wp-content/uploads/2015/06/logo_main_.jpg">
    <font color="#009cde"> <H1>Understand JavaScript</H1> </font> 
    <H2 id="title">JQuery Introduction</H2>
</center>

<center>
    <div id="main">
        <p id="p1"> <strong>This is a Paragraph 1</strong> </p>
        <p id="p2"> <h3>This is a Paragraph 2</h3> </p>
        <p id="p3"> This is a Paragraph 3 </p>
   </div>
    <div id="control">
        <a href="http://www.understand-programming.com" id="website"> Understand Programming</a> 
        </br> </br>
    </div>
    <btn> <input type="submit" id="mybutton" value="press this button"> </btn>
</center>

<center>
    <h4>
        Copyright © by <a HREF="http://understand-programming.com">Understand-Programming</a>
    </h4>
</center>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"> </script>
    <script type="text/javascript" src="jquery.js"></script>
</body>
</html>


Create javaScript file with jQuery code

Create a file called jquery.js and save it in same place. Make sure that jquery.js is also included in html file. Copy the following code and add in js file.

jQuery(document).ready(/* Your Code here */);

In previous articles, you were using window.onload function with javascript. There is no difference between window.onload and jquery(document).ready(). Both functions triggers when your html file loaded successfully.


Quick introduction with jQuery Functions

To keep everything simple you will write all your code in between these ( ) brackets.
jQuery(document).ready( /* Your code here*/ ).
Copy the following text and save it in jquery.js file and execute your html file. You will notice that p1 text is replaced with new text.

jQuery(document).ready(
function(){
    jQuery("#p1").text("This is Paragraph 1 from jquery ");
}
);

 

In following code notice that jQuery is replaced with $ sign, you can use jQuery or $ dollar sign shortcut, both are the same things.
Prepend function helps to add new text before specific tag.

jQuery(document).ready(
function(){
    $("#p2").prepend("<h2>Text append before p2 <h2>");
}
);

 

Get the web address element and update it with your own choice.

jQuery(document).ready(
function(){
    $("#website").attr("href","http://www.google.com");
}
);

Continue with next article

 

Download file from GitHub