Assalamualaykum Wr Br…Lets quick start our journey towards the world of JQUERY which is quite simple to use than JavaScript. JQuery is a library of JavaScript. jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.
The prototype of jQuery is as follows:
1.$().ready();
2.Then modify step 1 as:$(document).ready(function () {//write code here
});
jQuery always start with symbol ‘$’ and ready keywords specifies that after all html code is loaded on browser then start executing the jQuery code. In other terms, jQuery controls all the execution of markup code and JavaScript. I understand that theory seems so boring…yeah now lets start our practical session.
step 1: Write the HTML code to display 2 headings, when clicked on first heading it shows corresponding paragraph text and on again click hides it. The next heading will be the static heading. The behavior is achieved from the jQuery code as shown below:
$(“p”).hide(); //this code specifies the browser not to display paragraph(
blah blah
)contents.
$(“h1”).click(function(){});//this piece code of code illustrates on click to heading 1 execute the function whose implementation is coded as:
$(this).next().slideToggle(300);//instructs that on click of heading toggle it to 300pxs..thats all in our jQuery code…save the file as “my_code.js”.
Step 2: Now write the simple html code that is shown as:
Please Note: It is simple html markup code written and in body tag we wrote two script tags, first is for referencing the library of jQuery which is kept in same directory location where all my files associated to this page is present and other script tag specifies the “my_code.js” jQuery file.
It is the protocol that these order of the scripts is must.
If you dont have the jQuery library with you then download it from http://jquery.com/ and reference it in src=”my_code.js” and close the script tag as show above.
When you open your html document using browsers then you would get is as shown:
Now click on Heading 1.
…Thats all for this series 1..we shall meet soon with various tips and tricks of jQuery..till then Enjoy..
Qursheeds 