jQuery for Absolute Beginners by ed2go Instructor Alan Simpson

13836

jQuery for Absolute Beginners by ed2go instructor Alan Simpson

Okay, so what is jQuery?

jQuery is an immensely popular “write less, do more” library of JavaScript code for Web developers. We use it in conjunction with HTML and CSS in Web development, primarily to add more interactivity or animation to a page.

If you’re familiar with CSS and HTML but are struggling with jQuery, I feel your pain. It can be difficult to wrap your head around it when you only read bits and pieces about it while doing Web searches.

This is the article you want to read. I’ll talk about the absolute basics—the things that everyone else assumes you already know!

Accessing the Library

Unlike JavaScript code, which all Web browsers can execute on their own, jQuery is a library of prewritten code that’s not built into the Web browser. You can only use jQuery in pages that have access to the jQuery library.

One way to provide that access is to download the library yourself and link the page to your copy of the library. But these days, most developers are using CDN (Content Delivery Networks) to host the library. It simplifies things and generally provides better performance.

To link to a jQuery library on a CDN, you put tags like these between the <head> and </head> tags of the page that needs access to the library:

<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js” >

</script>

That links to version 1.10.2 on Google’s CDN. You’ll find several versions of jQuery at any CDN. Typically, you want to link to the latest one. But if your pages need to support Internet Explorer Versions 6, 7, and 8, be aware that the 2.x versions don’t support those older Internet Explorer versions. Only the 1.x library versions support older Internet Explorer browsers.

Notice that inside the script tag, the URL after src= starts with http:. In other examples, you may not see that in front of the URL. When the page is being served by a Web server from an actual site or a local server on your development machine, then it’s okay to omit the http. But if you’re testing and developing by opening files directly, make sure you use the http: address. Otherwise, jQuery won’t work or it’ll be painfully slow.

The Document Ready Block

In addition to the link to the library, you’ll typically see a block of jQuery code like this in the page (without the colors):

<script>

$(document).ready(function() {

// Your code here

});

</script>

The $ sign is a special character that tells the Web browser to use the jQuery library. All of the parentheses and curly braces that follow can be daunting. I’ve color-coded them above so you can better see which opening character goes with which closing character. Basically, all of your code will go inside the curly braces where you see the comment //Your code here.

There’s also a shortened version of this that works just as well. Here’s what it looks like:

<script>

$(function() {

// Your code here

});

</script>

Either way, the purpose of the block is to ensure that the page is fully loaded into the Web browser before any jQuery or JavaScript code inside the curly braces is executed.

Where to Put Your Code

You can put regular JavaScript code, or jQuery code, inside the curly braces of the document.ready function. The // characters indicate a JavaScript comment. So don’t put those in front of any code that you want to execute.

Using the simplest example possible, let’s have the page pop up a Hello World alert box when loaded. For that, you’d put the alert code just inside the ready function’s curly braces, like this:

$(document).ready(function() {

alert(“Hello World”);

});

To write your own jQuery function, you have to use a syntax that’s similar to the syntax of the document.ready function, like this:

$(“element“).event(function(){
//code to execute;
});

The element is typically the element (or element type), expressed in CSS selector syntax that’s associated with the code. The event is the action performed to trigger the code, such as click. The code to execute is the JavaScript or jQuery code to execute when the event happens. (The element name and event name are case-sensitive—so again, watch your upper- and lowercase letters carefully.)

As a working example, let’s suppose we put a button in the body of the page and give it an id of btntest like this:

<button id=”btntest”>Test</button>

To write a function that fires when someone clicks that button, the selector will be #btntest, and the action will be click. We need the # in front of btntest because (just as in CSS selectors) the # indicates an ID name. So here’s what the complete function would look like inside the document ready function:

$(document).ready(function() {

$(“#btntest”).click(function() {

alert(“You clicked the button!”)

});

});

Here’s a complete page to experiment with or to keep as a template for your own jQuery pages. When you open the page in a browser, you should see a button. And when you click the button, you should see the alert box and text.

<!DOCTYPE html>

<html>

<head>

<title></title><!– Link to jQuery as hosted on Google CDN –>

<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js”>

</script>

<!– Your jQuery code between the curly braces of the function below –>

<script>

$(document).ready(function() {

$(“#btntest”).click(function() {

alert(“You clicked the button!”)

});

});

</script>

</head>

<body>

<button id=”btntest”>Test</button>

</body>

</html>

Obviously, there’s a lot more to jQuery than what we’ve discussed here. And there are countless resources for learning. But understanding these basic syntactical requirements and seeing some relatively simple code with everything in place will give you a good foundation as you build your additional learning.

Alan Simpson teaches several ed2go online courses