jQuery is a JavaScript library used to take the hard work and complexity out of creating dynamic and easy to use web content. It allows you to do advanced functions and provides a widget library that can be used with simple JavaScript. I’m going to show you how to get started using jQuery in your websites and web applications. Also, I will show you some simple task you can perform and give live examples of how to implement them. I will assume that you have some pre-existing knowledge of HTML and JavaScript, but shouldn’t really be necessary if you follow along.
- Setup your document to use the jQuery library.
Here you have two options. You can go to the jQuery website and download a complied version of the jQuery library, with the benefit of only selecting the parts of jQuery you will be using. Or you can link directly to a complied version that is hosted by Google, with the benefit of having jQuery always up to date with changes and bug fixes. I choose the latter.
To do this, you will have to link the library to you document.
<html> <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script> </head> <body> </body> </html>
Make sure that the line of code is placed between the <head></head> tags of your document. This will tell the browser to include the jQuery library upon page load.
That’s all the setup you need to do to be able to start using the jQuery library.
- Setup your first event
The next step is to setup an event that will tell us when the page is loaded and we are ready to start loading and manipulating objects with jQuery. To do this we create an event handler that will house the rest of our code and only execute it when the page(DOM) has been loaded.
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
// jQuery todo
});
</script>
</head>
<body>
</body>
</html>
All this is doing is letting us know that the page is loaded, and we are ready to start working with jQuery. To better understand how this works I will explain the different sections of what is going on here.
$() is a shorthand you can use with jQuery to reference page elements like “document” or “window”. You can also use it to reference elements by their tag name by wrapping the name with “” – $("div"), div being the type of element. This will apply the code to all of the div elements on the page. To reference a single object on a page you can use it’s id attribute by using a # symbol infront of it $("#idofdivcontainer"), idofdivcontainer being the id attribute for a div container on the page. You can expand even further by referencing child objects within a given element $("#idofdivcontainer > a"), this will apply the code to all of the <a> elements within the <div> container.
ready() is a jQuery function that test for the ready state of an object.
function(){} is simply the function that is going to execute when the condition is met. You can also use pre-defined functions here instead of an inline function like:
<script type="text/javascript">
$(document).ready(predefinedFunction);
Function predefinedFunction(){
}
</script>
- Now you are ready to start using jQuery to interact with and build your page
Here are some basic things you can accomplish with jQuery and an explanation of the code
Click()
This is a jQuery function that replaces the onclick attribute. It can be used to handle click events on any object. Here is the code to use this.
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(a).click(function(){alert("Hello World!");});
});
</script>
</head>
<body>
<a href="">Hello World!</a>
</body>
</html>
This code takes all the <a> elements on the page and adds a click event that displays an alert that says "Hello World!" when it’s clicked. You can also call a function with click()
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(a).click(sayHello);
});
function sayHello(){
alert("Hello World!");
}
</script>
</head>
<body>
<a href="">Hello World!</a>
</body>
</html>
addClass()
This is a jQuery function that will add a CSS class to an object on the page
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#div1").addClass("divStyle1");
$("#div2").addClass("divStyle2");
});
</script>
<style>
.divStyle1{
Width:100px;
Height:100px;
Background-color:#000;
Color:#FFF;
}
.divStyle2{
Width:50px;
Height:50px;
Background-color:#CCC;
}
</style>
</head>
<body>
<div id="div1">DIV 1</div>
<div id="div2">DIV 2</div>
<div id="div3">DIV 3</div>
</body>
</html>
You can see by the example that this code is telling the browser to apply the CSS class “divStyle1″ to the element “div1″ and “divStyle2″ to the element “div2″ and “div3″ is left with no styling. While this might not seem advantageous on an initial page load, it provides a way to add and change styles of elements after the page has already loaded, on an event like a mouse click, or a mouse over. You can also use the function “removedClass()” in the exact same way to remove a CSS class from an element. You can even string these functions together to replace a class of an element
$("#div1).removeClass("divStyle1).addClass(divStyle2);
In a follow up post I will detail how you can extend jQuery to simplify things like this.
Foreach loop
jQuery provides a simple way of looping through objects to simplify some of the more complex operations. Here is an example of looping through all the items of an unordered list and appending a number to them.
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#myList").find("li").each(function(i) {
$(this).append( " " + (i+1));
});
});
</script>
</head>
<body>
<ul id="myList">
<li>This is item</li>
<li>This is item</li>
<li>This is item</li>
<li>This is item</li>
<li>This is item</li>
</ul>
</body>
</html>
This is using the find function to locate all the <li> elements in the <ul> "myList", and then it’s saying for each of these, I’m going to do this function, with i being a counter to the current item. The term this, is a reference to the actual element for each of the loops. So we are saying that for each instance of <li> we want to append the position number to the end of its content. Using loops we can manage multiple elements at once.
So that’s a quick introduction to what jQuery is and how you can use it to simplify your web development. If you would like to learn more you can advance to my article Getting Started with Ajax (jQuery) . You can also find more information about jQuery at:
