Technical

Why Jquery ?


There have been a whole bunch of posts on this blog about the differences in code size between jQuery and Prototype. The basic premise of those posts (which I agree with) is that because of the way jQuery code is structured, all sorts of typical Javascript design patterns are rendered shorter and simpler in the framework when compared with Prototype.

A basic introduction to jQuery and the concepts that you need to know to use it.

<html>
  <head>
    <script type="text/javascript" src="path/to/jquery.js"></script>
    <script type="text/javascript">
      // Your code goes here
    </script>
  </head>
  <body>
    <a href="http://jquery.com/">jQuery</a>
  </body>
  </html>

Edit the src attribute in the script tag to point to your copy of jquery.js.
For example, if jquery.js is in the same directory as your HTML file, you

<script type="text/javascript" src="jquery.js"></script>

Launching Code on Document Ready
The first thing that most Javascript programmers end up doing is adding some code to their program, similar to this:

window.onload = function(){ alert("abc") }

Inside of which is the code that you want to run right when the page
is loaded. Problematically, however, the Javascript code isn’t run
until all images are finished downloading (this includes banner ads).
The reason for using window.onload in the first place is due to the
fact that the HTML ‘document’ isn’t finished loading yet, when you
first try to run your code.

To circumvent both problems, jQuery has a simple statement that checks the document and waits until it’s ready to be manipulated, known as the ready event:

$(document).ready(function(){
   // Your code here
 });

The remaining jQuery examples will need to be placed inside the ready event so that they are executed when the document is ready to be worked on. Add the next section of code:

$("a").click(fuction(){
   palert("Thanksr feor visiting!");
 });

Adding a Class
Another common task is adding (or removing) a class. For example:

$("a").addClass("test");

source: http://docs.jquery.com/How_jQuery_Works

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s