This is the first part of a series of jQuery tutorials for designers and web developers. You can automatically receive future additions to the tutorial series by subscribing to the RSS feed, or by following me on Twitter.
jQuery is a javascript framework that makes it easy to edit markup and styles on a page, build advanced user interfaces, and update data sources with AJAX (that is, Asynchronous Javascript and XML). In the words of the jQuery developer site:
jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.
Today, we’ll go over the first steps and the one major benefit of using jQuery: selecting and manipulating markup and CSS. First, you’ll need to include jQuery in your page:
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
// this is where our jQuery commands will soon go
</script>
...
For the course of this tutorial, I’m going to refer to a sample unordered list with two text spans. It looks like this:
<ul id="list">
<li class="listitem" id="listitem-1"><span class="smallcaps">Hello</span> and thank you for reading.</li>
<li class="listitem" id="listitem-2">I hope you like this tutorial.</li>
</ul>
Notice that I adorned the markup with the id and class attributes. That’s so I can select portions of the markup with jQuery. Remember, the id attribute should be unique, but the class attribute will be repeated on multiple elements, usually in line with an attached stylesheet. For this tutorial, though, assume that there is no CSS modifying the basic behavior with the markup.
Now, you can use jQuery to apply a style to the entire list. First, we’ll create a function that is loaded when the page is opened, we’ll select the entire list with jQuery, and apply a CSS style to make the text blue via the color attribute.
$(document).ready(function() {
// anything in here will be loaded when the page is ready
$("#list").css("color", "blue");
});
Here’s the rundown: the $() command is used to select markup or series of markup from the page. You can select elements by id, class, or element name. To select by id, add a # to the front of the id name inside the parenthesis. For instance, to select the first li in the example above, use $("#listitem-1"). Classes are selected by putting a . before the class name, and element names are selected without adding any modification.
You can use hierarchies to drill down through the markup and select specific portions of the page. The syntax is similar to XPath, where you place a > in between the names discussed above. Here’s a quick snippet partially based on the sample above:
$("#list > li") // all list items in the list with an id of list
$("div > .nav > a") // all links underneath the div elements that belong to an element with a class of nav
Once you select an element, you can apply a CSS style to them with the css(attribute, value) command. Attributes are things like color, font-weight, and display, and values are things like #cccccc, 1.2em, and inline. So, you can make the span in the section above render in small-caps with the following:
$(".smallcaps").css("font-variant", "small-caps");
Next time, we’ll walk through some of the more advanced selectors. Also, expect tutorials on AJAX and jQuery UI.
