Learn JQuery Step By Step Part 1: Installing the Library

JQuery is a Javascript framework/library helps you develop websites with less coding… but you already knew this and I hate this type of intros so why not jump right into action.

The first thing you are going to need is of course JQuery, you can either go here and download it or link right to the version hosted on Google which is what’ll do.

To begin using JQuery all you have to do is included it just like you would any other javascript file.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Look am learning JQuery!</title>

</head>
<body>

<!-- load jquery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>

</body>
</html

Notice how I included JQuery right before the second body tag, you could included it in your header but your site will appear to load much faster if you load JQuery ( or any other javascript file ) at the bottom.

Note: Any JQuery code must go after you’ve included the library. All other javascript can go anywhere in the document.

Now let me me show you the basic JQuery set up.

$(document).ready(function(){
  // do this when the document loads
});

This the same thing as if I did.

window.onload=function()
{
 // do this when the document loads
};

Note: like I said before, all jquery code has to go after you’ve included the library, and you don’t need the $(document) snippet part I mention but it’s of good practice. Whether you use JQuery or not, you should execute javascript after the page loads.

Add the following code inside the curly brackets to see some of what JQuery can do.

$("body").html("<h1> Am Using JQuery </h1>");

// you can also use single quotes like this $('body')

One thing that I did not mention is that to use JQuery you have to know CSS first, don’t worry, you don’t have to be an expert at CSS, if you know that a class is a specified by a dot ( . ) an id by a pound sign (#) and a selector by its name you are good to go.

In JQuery you refer to tags in HTML by putting the selectors inside double or single quotes like this

// refer to the <p> tag
$("p")

// refer to id="footer"
$("#footer")

// refer to class="column"
$(".column")

// refer to the tag, id and class
$("p , #footer , .column")

// refer to <div id="header">
$("div#header")

Now that you know how we refer to things with JQuery you also know that when I said

$("body").html("<h1>Am Using JQuery</h1>");

I was referring to the body tag. The second part of the line of code “.html("<h1>Am Using JQuery</h1>");” is referring to the html attribute of body, this would be the same thing as using “innerHTML=” in javascript.

I hope this was a good intro to JQuery, drop a comment letting me know what you think. I will talk about attributes like “.html” and JQuery events in my next post.

blog comments powered by Disqus