RSS Feed
Feb
16

jQuery From Scratch: A Beginner’s Guide

jQuery



So what exactly is jQuery? jQuery is a concise JavaScript library. The developers state that jQuery aims to change the way we write JavaScript. I like to think of jQuery as a tool that allows us to simplify JavaScript code. This “Getting Started Guide” is intended as a quick introduction to jQuery - mainly for website designers.

Document Ready?

Say you have a simple function. To execute the function, you must specify an action. For example:

<a href="#" onload="aFunction();">Hello World!</a>

The function, “aFunction”, is executed when the page loads. Similarly, you can apply the “onclick” event to element. This allows you to execute a single function when that element is clicked. It is important to note that you can only apply 1 (a single) function to events such as onclick, onload etc.

jQuery allows us to easily execute multiple functions when events are triggered. Say, for example, that you wanted to assign a value to a variable when the DOM (document) has loaded. To assign a value to a variable using JavaScript, we can write:

var variableName = "variable value"

To have this value assigned when the document has loaded, we can place the code within the $(document).ready() function:

$(document).ready(function() {
  var variableName = 'variable value';
});

You may also see this written as:

$(function() {
  var variableName = 'variable value';
});

This is really just shorthand notation. Use whichever you feel comfortable with.

How About Other Events?

Say we have a simple element on our page:

<span id="someID">Some Text</span>

How do we use jQuery to perform action(s) when the link is clicked? Well, we could use the “click” event:

$("#someID").click(function() {
  alert("Hello World!");
});

We can see that the “click” action causes the defined function to be executed when elements, that have id=”someID”, are clicked.  Hence, the following code is executed at the click of a button:

alert("Hello World!");

This is the “alert” function. The “alert” function displays a defined message (in this case ‘Hello World!’) when executed. We can see this code in action: demonstration page.

Other events include “blur”, “change”, “dblclick”, “focus”, “hover” etc. You can find an extensive list of events at Visual jQuery.

CSS Manipulation

You can manipulate an element’s CSS attributes using jQuery. Hopefully you can see where this is going… Using an event (e.g. click), it is possible to manipulate any element. Let’s continue with the previous example:

<span id="someID">Some Text</span>

We could change the color of the text when that text is clicked:

$("#someID").click(function() {
  $("#someID").css("color","red");
});

As before, we insert the code we want to be executed inside the “click” function. However, this time I introduce to you jQuery’s CSS manipulation abilities. The syntax follows:

$("#someID").css("CSS-attribute-name", "CSS-attribute-value");

Note: Instead of selecting element(s) to be manipulated by their ID, we could select by class. To select elements by their classes, we would use “.className” instead of “#someID”.

Here is a demonstration page.

jQuery Tutorial Summary

Hopefully, after reading this tutorial, you can see how useful jQuery is as a scripting tool. The purpose of this tutorial was to introduce you to some of jQuery’s basic features. Stay tuned for more ;)





<a href="http://www.mysite.com/">some site</a>
<blockquote>quote</blockquote>
<em>some emphasized text</em>
<strong>some bold text</strong>
<pre lang="">some code</pre>
To add code to your comments, simply wrap the code inside <pre> tags. Syntax highlighting will be added if you define the language. Example:
<pre lang="php">some code</pre>

Supported "lang" attribute values: html4strict, css, php, javascript, xml & mysql