Geeks With Blogs
AzamSharp Some day I will know everything. I hope that day never comes.

JQuery is a JavaScript library is created to make the life of JavaScript developers easy. Let's check out some of the cool features of the JQuery library.

The $() function is one of the coolest features of JQuery. If you want to assign the click event to all the anchor tags on the page then you can simply do the following:

$("a").click(function() { alert('The link is clicked'); });

If I am interested in a particular element then I can use the following code:

$("link1").click(function() { alert('The link is clicked'); });

"link1" is the id of the anchor tag on which the click event is attached.

You can also add many different kinds of cool effects. Take a look at the code below which is used to add a FadeIn and FadeOut effect.

 <a id="link1" href="#">Show Link</a>

<div id="one" style="background-color:Yellow;width:100px;height:100px;display:none">

$(document.getElementById("link1")).click(function()

{

if($(this).html() == 'Show Link') { $(this).html("Hide Link"); $(document.getElementById("one")).show("slow"); }

else { $(this).html("Show Link"); $(document.getElementById("one")).hide("slow"); }

Here is the effect:

You can use the Toggle function like the following:

$(document.getElementById("one")).show("slow").toggle();

But then the you will not be able to perform FadeOut and it will quickly disappear after you click the "Hide Link" anchor tag.

JQuery documentation suggests that you can also use the Toggle(odd,even) feature. This means when you click the element for the first time the code in the odd section of the Toggle function will be fired and when you click second time the code in the even section will be fired. Sounds simple! but for some reason I did not get this to work.

  /*  
   $(document.getElementById("one"))
   .toggle(
   function()
   {
      $(this).show("slow");
   },
   function()
   {
    $(this).hide("slow");
   }      );  
*/

Posted on Wednesday, November 7, 2007 11:16 AM | Back to top


Comments on this post: A Look at JQuery

# re: A Look at JQuery
Requesting Gravatar...
I'm just curious how radiobutton works. It's granted that radio button groups share the same id but name.
Left by Al on Nov 16, 2007 7:46 AM

Your comment:
 (will show your gravatar)


Copyright © Mohammad Azam | Powered by: GeeksWithBlogs.net