JQuery — The Basic Basics

Welcome to my first JQuery tutorial.

Over the past week or so I’ve been reading the tutorials at www.JQuery.com. Additionally I’ve had a peek at the freely available first chapter of JQuery in Action 2nd Edition. If you’re interested, check it out here http://www.manning-source.com/books/bibeault/ch01_JQIA_sample.pdf.

In this blog I’ll be keeping it simple and sweet to help solidify the concepts in my own mind before I venture a bit further into planet JQuery.

So, here’s one I made earlier.

Below is the HTML of the test page for this mini-application. If you’re not familiar with HTML then this snippet creates a blank page with a single hyperlink on it pointing to www.ntcoding.com. Feel free to copy and paste the following code into a notepad document and then rename the file extension to .html. If you then open it with your browser, it will show the lonely link on an otherwise blank page.

<! — DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
xmlns=”http://www.w3.org/1999/xhtml">


http://jquery.js
// <! — [CDATA[ →
JQueryMoney.js” type=”text/javascript”>
// ]]>


Click me for lots of money



In this tutorial, I’ll show you the basic JQuery syntax — including what “$” means. I’ll then show you how to ‘do stuff’.

Firstly, quickly refer back to the above html. You will see two script elements; one points to the .js file that contains the code to make JQuery work, the other (JQueryMoney) is the external file which contains my code for this example.

We will ignore the JQuery file because there is nothing basic about taking a look in there! Instead, lets check out the few lines of my code (the contents of JQueryMoney.js):

$(document).ready(onLoad);

function onLoad() {

$(“#lnkMoney”).hover(redBackground, whiteBackground);

}

function redBackground (){

$(“*”).css(“background-color”, “Red”);

}

function whiteBackground() {

$(“*”).css(“background-color”, “White”);

}

Unfortunately, “$” doesn’t mean you’re going to be rich; it means enclosed in the brackets that follow it is a JQuery object. The best explanation — and the most to the point, is that it is shorthand for jQuery(). Thus, $() is equivalent to jQuery().

In the code above I create a jQuery object that wraps the document it is being used in. All achieved through $(document). What I then do is say: “when the document is ready, invoke the onLoad function”.

It is possible to put an anonymous method directly in there, but for clean, readable code, I really do not want to do that!

So, when the document is ready, the onLoad function will be called. But what does it do? Let’s take a(nother) look:

function onLoad() {

$(“#lnkMoney”).hover(redBackground, whiteBackground);

}

We see the now familiar JQuery shorthand notation ($), but what’s that he’s got in his parenthesis? Well, if you think it looks like an id selector used in CSS — I’ve got good news for you — it is! And for me that’s great. The ease at which CSS allows you to select elements is utilised in JQuery — one of the many reasons I already have a strong liking for JQuery. In the snippet above, like I said, I’m selecting a CSS element by its id. You can, however, select and element by its html type or by any other type of CSS selector (yes including descendants) .

With the reference to our object, in this case just a single html object but it can be multiple if they meet the criteria in the parenthesis, I am then saying: “when you hover over it apply the function called redBackground”. In the same parenthesis, the second parameter says: “when you stop hovering over the element call the whiteBackground function”.

I won’t show you any examples of the standard javascript way to do this, but you’re not going to beat one line are you?

Anyway, I’ll wrap up by talking you through the redBackground function; the whiteBackgroud is the same except for one parameter, so I wont patronise you.

function redBackground (){

$(“*”).css(“background-color”, “Red”);

}

Here we go then. In this method we select everything — the * in CSS means select all, so in JQuery it means the same. This time, I haven’t hooked into an event, I’ve called a JQuery function — css. Quite simply, it takes two parameters. The first is a string requiring the name of a CSS property and the second is a string specifying the value for that CSS property. Any element matching the expression in the preceding JQuery object will have these properties applied. In this example it is everything (although not a lot).

With that explained, it should be clear that when I now hover over the lonely link on my page (id of lnkMoney) everything on the page will have its background turn red, but as soon as I am no longer hovering over it, all elements will then have a white background.

If you’re not familiar with JQuery then I guess you’ve just learnt a little bit. Whatever your background, please post a comment and share your thoughts on this blog entry. Hopefully you can help me to take things up a notch over the coming weeks.

Thanks for reading.

--

--

Nick Tune
Strategy, Architecture, Continuous Delivery, and DDD

Principal Consultant @ Empathy Software and author of Architecture Modernization (Manning)