jQuery library

jQuery is a new kind of JavaScript Library. It is a fast and concise library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development, and last but not least, is really simple to understand and manipulate.

Demonstration

Click here...

I would like to demonstrate:

Click here...

How to setup

jQuery is a library that allows you to write javascript in a brand new way.
The first thing you\'ll have to do to use its fantastic possibilities is to include it in the header of your page :

/** jQuery Inclusion **/
<script type="text/javascript" src="Path_to/jQuery.js"></script>

Once this is done, write your javascript code between the following snippet:

jQuery(document).ready(function() { 
    //Your Code Here. 
});

This code can be placed in you page header or in a separate js file. From now on, you\'ll have to pick up the jQuery syntax which is much more concise and efficient than traditional javascript. Here are a few examples:

<script type="text/javascript">
  //** jQuery use **/
  jQuery(document).ready(function() {
    $("#hello").append("<b>The Append Effect</b>");
    $("#spanclick1").click(function () {
      $("p.hidden").addClass("ohmy").show("slow");
    });
    $("#spanclick2").click(function () {
      $("#fadediv").fadeIn("slow");
    });
  });
</script>

One of the strentgh of jQuery is how it handles selectors. For example, instead of using a method such as document.getElementById("someid"), jQuery does $("#someid").

Why not having a look a the selector page on the jQuery Official website to have a better understanding of what it can do.

The following code is the html corresponding to the example jQuery code above. The combination of te two gives the results shown in the demonstration.

<span id="spanclick1">Click here...</span>
<p class="hidden">Congratulations!
You just ran a snippet of jQuery code who
<strong>added the class</strong> "test" to that piece of text
and <strong>revealed it</strong>.
</p>
 
<p id="hello">I would like to demonstrate: </p>
 
<span id="spanclick2">Click here...</span>
<div id="fadediv" class="hidden">Fade In Effect</div>

S_ABOVE_CODE_SNIPPET.
S_NICE_AND_EASY.

Why not share this here:

Posted Comments

Hi schnozz.

Actually in this demonstration, the only style applied specifies that some elements have the class .hidden, which css is as follows:
.hidden {
display: none;
}

Regards. Jeremy

From jdmweb at 13:32 06/10/09 { Reply }