[/shameless parody of Lt. Commander Data in blog title]
Most web designers are familiar with HTML, CSS, and Javascript–they are the most basic web languages out there, forming the foundations of what the rest of the Internet is built on. Javascript in particular can make very pretty Web sites, in the sleek Web 2.0 style with subtle animations (like tidy menus you can pull out or put away with just a click).
Alas, Javascript is generally implemented through clunky individually-written or copy-pasted scripts, some outdated and some not. Poorly-written and bloated Javascript is one of the top Web features that can slow a page’s load time, as I well know from trying to load Javascript over dialup.
But what if I told you that Javascript isn’t just a random assortment of scripts and functions anymore? What if I told you that someone was bored awesome enough to gather all that Javascript can do into a single resource that developers can draw from?
It’s called jQuery…and it rocks.
What IS jQuery, Anyway?
Basically, whatever page element you’d like to animate, manipulate, or just plain select, jQuery can do that for you, just with the addition of one file to your site directory.
Think I’m kidding? Look at the detailed list of stuff jQuery can do, according to w3schools.com:
- HTML element selections
- HTML element manipulation
- CSS manipulation
- HTML event functions
- JavaScript Effects and animations
- HTML DOM traversal and modification
- AJAX
- Utilities
What this means is that you can now do page animations without images, slide various menu “panels” in and out of place temporarily, give blocks of text or images new formatting…practically all the other stuff you’re used to JavaScript being able to do. And, you can access all of those functions through code as short and simple as this:
<head>
<script type=”text/javascript” src=”jquery.js”></script>
</head>
You no longer have to copy-paste multiple iterations of <script type=”javascript”> into the <head> section of your webpages; all those functions are right there, waiting for you to ask for them (one reason it’s called “jQuery”).
jQuery’s Syntax
To include functions, you still have to put the script reference in thesection of your document, like you’re used to doing with individual JavaScripts. However, the syntax (how you write the script itself) is a little bit different.
Code Example
<html>
<head>
<script type=”text/javascript” src=”jquery.js”></script>
<script type=”text/javascript”>
$(document).ready(function(){
$(“button”).click(function(){
$(“p”).hide();
});
});
</script>
</head><body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
</body>
</html>
This example from w3schools.com, shown here for easy reference within this article.
Explaining This Code, Step by Step
First, you call for the jQuery library (the first <script> tag); that alerts the browser that “hey, we’re going to be doing something with this, so have your jQuery book open to the right page!”
Next, you start the individual script you’d like to run. In this case, the script’s function is to hide paragraphs when a button is clicked.
(Note: Before you have the script do anything else, it’s good practice to add in the “document ready” line before calling any other function in jQuery, because it gives the page time to load before the script starts running.)
After the “document ready” line, the actual script starts. This particular script selects all button elements on the page, and designates that when every button on this page is clicked, all elements will be hidden.
Changing This Script: Hiding One Paragraph
If, however, you wanted only one button on your page to do this effect, and only one paragraph to be hidden, you would change the script to the following:
$(“#click”).click(function(){
$(“#hideme”).hide();
And you would change the HTML code to the following:
<body>
<h2>This is a heading</h2>
<p id=”hideme”>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button id=”click”>Click me</button>
</body>
</html>
In this modified example, you can see that adding an ID to both elements you want the script to use will make a difference in how the script runs. Instead of all buttons hiding all <p> elements, now only the button with the ID of “click” will affect the paragraph with the ID of “hideme”. Simple, but page-changing!
Changing This Script: Hiding One Class of Paragraphs
Say you wanted one button on your page to hide all <p> elements of a specific class? You can do that, too! Just make a tiny adjustment to the “hideme” ID, changing it to a class instead:
$(“#click”).click(function(){
$(“.hideme”).hide();
Make the corresponding change to your HTML code, like so (an additional <p> element has been added so you can test how it only hides the specific class):
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<p>This is more stuff you’d like hidden.</p>
<button id=”click”>Click me</button>
</body>
</html>
More Examples of jQuery’s Abilities
You can see a couple of other examples through the w3schools website’s Try It! pages. For instance:
 |
 |
| Fade out an element | |
 |
|
 |
|
| Slide an element out of the way and back | |
 |
 |
| Change the CSS of a particular element | |
Going Further with jQuery
If you want to learn more about the host of wonderful things jQuery can do for your webpage, the w3schools page on jQuery is a great place to start. (I’m personally going to be exploring jQuery for possible use in my domain’s next layout… :D)
