Sunday,November,25th,2012by Jhalak Subedi
jQuery is an open source Javascript Library released in 2006 by John Resig.It has now become the most popular library and has been used by most popular websites.It’s slogan says “write less,do more”.So it is lightweight and easier to understand. With jquery we can perform event handling, DOM manipulation,CSS manipulation,Ajax implementation, create animations, and many other dynamic stuffs inside a web page.
First of all, let me tell you that before starting to learn jQuery you should have a basic understanding of html,css and javascript.
Example usase:
1) Create a new document in your favorite text editor and name it “index.html”
2) Now we need to add the jQuery library to our page. There are couple of ways to accomplish this task.
First one,download the jQuery library from jquery and include it on your page.
The Other way to include jQuery is linking the source from google CDN(Content Delivery Network) directly to your page.
You need to add something like this into your head section:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"> </script>
3)After jQuery is loaded into our page we are ready to go coding some cool stuff with jQuery.
First Structure your page with HTML elements like this:
<html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"> </script> </head> <body> <p>This is a sample Paragraph.</p> <button class="hide">Hide</button> <button class="show">Show</button> <button class="change">Change Color</button> </body>
4)Now add the following jQuery code inside the head section after the link to google CDN:
$(document).ready(function(){
$(".hide").click(function(){
$("p").hide();
});
$(".show").click(function(){
$("p").show();
});
$(".change").click(function(){
$("p").css("color","red");
});
});
5) Now the “index.html” page should look like this:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$(".hide").click(function(){
$("p").hide();
});
$(".show").click(function(){
$("p").show();
});
$(".change").click(function(){
$("p").css("color","red");
});
});
</script>
</head>
<body>
<p>This is a sample Paragraph.</p>
<button class="hide">Hide</button>
<button class="show">Show</button>
<button class="change">Change Color</button>
</body>
</html>
6) Done! Go ahead and open the page with your browser. You have just created your first jQuery powered page.One thing to note here is that you need to be connected with the internet here since we are loading the jquery library from the google CDN.
Regards for sharing the information with us.