Just the weekly tutorials.

Learning jQuery from Scratch: Getting Started

In this tutorial we will learn the very basics of jQuery programming. The examples below assume that you have already added jQuery to your website. If not, follow that link and then return to this page.

Questions such as "Where To Start?", "What Makes jQuery Worth Studying?" will be answered. This is followed by a few very simple examples of jQuery code. In this tutorial you will learn How to Include jQuery in Your Webpage and the question "Where do you type (enter) jQuery code" will be answered. Once you included jQuery, what then? How to call jQuery commands and how to make your own jQuery plug-in will be briefly discussed.

jQuery simplifies JavaScript programming by providing a number of easy-to-use methods (JavaScript functions attached to, and accessible from, the main jQuery object.) Because each browser implements JavaScript a little different from one another, writing native JavaScript code would not always produce exactly the same results, or worse, break the program flow. What required a few lines of native JavaScript code is now possible with just a short jQuery command. jQuery is cross-browser. It means that the code, once written, will work the same in all browsers 99% of the time.

This is what jQuery code looks like:

/* Wait for all HTML elements to be loaded first, only then do something */ var do_something = function(){ /* Do something */ }; $(document).ready(do_something); /* Do something when <body> tag is clicked (your entire web page) */ $("body").on("click", function() { alert("<body> tag was clicked!"); } ); /* Add a paragraph to the very top of the <body> tag */ $("body").prepend("<p>I will appear inside body tag on the very top.</p>"); /* Hide all <div> tags on the web page */ $("div").hide(); /* Show all <div> tags on the web page */ $("div").show(); /* Remove all <p> tags from the DOM physically */ $("p").remove();

These are just a few examples of what can be done with jQuery in just a few lines of code.

Learn JavaScript to Better Understand jQuery Code

Even though you don't have to fully understand JavaScript to write jQuery code, JavaScript becomes important, if later, you decide to delve deeper into designing dynamic websites. For now the basic understanding of CSS selectors (which jQuery uses to select HTML elements) and a handful of jQuery methods would be enough.

Most jQuery commands begin with the dollar sign, followed by a CSS selector:

$("div");

But an even more proper way to think about it is to know that what you see above is really just a JavaScript function called $ (dollar sign is a valid variable name in JavaScript.) This function takes a parameter of type String (this is the "div" CSS selector). In other words, if you were to write your own JavaScript function you could create an equivalent as follows:

function my_function(css) { /* do something value stored in "css" argument */ }

And now, let's rename the function to dollar sign:

function $(css) { /* my code here */ }

And this is where jQuery meets JavaScript.

In JavaScript functions are also objects. This means that they can contain properties. And that's what jQuery does exactly. The entire library is just a function named $ (dollar sign) and it contains properties (methods) that allow us to do all kinds of operations on the HTML elements within the DOM hierarchy of your web page (The DOM or Document Object Model is just a tree-like structure of HTML elements placed one within another.) Knowing how to write jQuery code without fully understanding JavaScript is not impossible. But it is likely that you will need to understand at least the basic principles like variables and JavaScript functions, function closures, and a few other core principles. All of that is explained on this website, so all you have to do is browse around if you need to brush up on JavaScript.

If you find tutorials on this site insufficient, remember that My PDF tutorial e-book "Understanding jQuery" is here to answer your questions as it contains a chapter called "JavaScript Bootcamp" for beginners and intermediate web programmers. If you feel like you are struggling with understanding JavaScript, I recommend that you pick up a copy of "Understanding jQuery". However, tutorials already posted on this website should be enough to get started.

jQuery is a Library Written in JavaScript

Because jQuery is a JavaScript framework, it is important to understand that when you are learning about jQuery, you are still seeing nothing more than JavaScript syntax. A syntax in any programming language is simply a set of rules which defines how a program in that language will be written.

JavaScript is a programming language in which almost everything is an object. The jQuery object itself is nothing more than a JavaScript object. All variables, functions, arrays, strings, numbers often refer to JavaScript objects. In other words, they are not always just primitive values

But what is an object anyways? An object is a concept that was created as part of the Object Oriented Programming paradigm, also known as OOP, it was developed decades ago. It is part of the evolution of computer programming languages that were not always object-oriented. For now all you have to know is that the entire framework is a jQuery object. Objects can be used to execute functions "attached" to them. And understanding these functions is important if you want to start using jQuery to its fullest. Beside knowing jQuery functions, CSS selectors are incredibly important. Some of the jQuery tutorials on this site will guide you through them, but first we need to sort out a few other things. JavaScript is a web programming language that was designed to add dynamic features to web pages. In the old days, we only had HTML and that was for making static websites with text and images. JavaScript allows us to make our websites come to life. We can add colors, change text, add or remove new elements to/from our page, and so forth, without having to refresh the page in the browser. This dynamic nature of the web is what makes it possible to develop interactive web applications that react to user's input.

You May Be Interested in jQuery Tutorials Because One of the Following

If this sounds like you, then you will benefit from tutorials throughout this website.

What Makes jQuery Worth Studying?

Web browsers constantly evolve. Each browser (Internet Explorer, Firefox, Chrome, Safari, Opera, etc....) has its own implementation of JavaScript. At the microscopic level some browsers don't have features some other browsers do. This means that the programmer is responsible for making sure his code works in all browsers separately. jQuery to the rescue! jQuery simplifies JavaScript programming. It allows us to write JavaScript code (which is what jQuery essentially is) without having to worry about the program working correctly in different browsers. Write your jQuery code once and it is guaranteed to work most of the time in most popular browsers. This way you don't have to test your JavaScript in different browsers separately. jQuery takes care of that for us.

Using jQuery instead of writing programs in plain JavaScript helps to save time. jQuery has an incredibly simple and intuitive syntax. I think it's what JavaScript was supposed to be when it was being developed, but in some respects it fell short. jQuery patches some of these things here and there, based on years of experience writing JavaScript code and seeing its shortcomings. A programming library is a collection of functions and utilities, much like a swiss army knife for programmers. It's a toolset containing an number of useful functions and simplified ways to do rudimentary JavaScript tasks.

When it comes to working with HTML, jQuery can work directly with an HTML tag (or a set of HTML tags) by selecting them. An HTML selection can be made across multiple tags and hierarchies of tags. Once what you need is selected a function can be applied to that selection. Otherwise we would be writing JavaScript code to handle each case. No longer is there a need for doing that!

Here are just a few basic examples of what you can do with jQuery:

The list can continue past hundreds of items. This is just to get you started.

How to Include jQuery In Your Webpage

How to add jQuery to your website? In order to start using jQuery all you have to do is include it in the source code of the web page. Adding jQuery file to a web page is simple and will enable jQuery for that page only, not the entire site. You need to include jQuery for each web page individually.

To add jQuery to your web page included it using the <SCRIPT> tags between <HEAD> tags in your web page:

<head> <script src = 'jquery-1.7.1.min.js' type = 'text/javascript'></script> </head>

Where "jquery-1.7.1.min.js" is the jQuery library file you downloaded from jQuery.com. You can also specify a relative path such as "js/jquery-1.7.1.min.js" or you can specify the exact path, for example directly located on one of your websites:

http://www.thisisyourwebsite.com/js/jquery-1.7.1.min.js

jQuery library is now included in your web page. Add one of the lines from examples above to your HTML file and you are ready to start writing jQuery code. Where should you enter your jQuery code within your web page? This is covered in the following section.

Where Do You Type jQuery Code?

jQuery is nothing more than JavaScript. In fact, jQuery object is just a JavaScript function that we call over and over again to select HTML elements and do something interesting with them. This means that jQuery code will work only where JavaScript is allowed on a web page.

Anywhere, where you can write JavaScript code, that's where you write jQuery code also. They are considered one and the same by your browser.

To take things further, let's take a look at a proper way of initializing your JavaScript as a web application. Due to the dynamic nature of how a web page loads up in parts, this should be done once all HTML elements are loaded up. Otherwise the CSS selectors may not be able to locate them.

Initializing Your Web Application

To initialize our web app we write code inside "document ready" event. This is done inside SCRIPT tag:

<head> <script type = "text/javascript"> $(document).ready() { /* Initialize your jQuery and JavaScript code here */ } </script> </head>

Writing HTML code to make website layouts is one thing. And you may already be familiar with that. But JavaScript web applications often require an initialization process. This is where you set all of your program's variables default values. If it's a game, this is the place where you reset score to 0, player lives to 3, and reset the game state, etc. If you are a web designer, this is where you reset your jQuery image slider, set it to display the default image and hide other slides for now. In other words, this is your website reset point.

Calling jQuery Commands After jQuery is Included

There are two ways in which we may call a jQuery function.

With regard to the first item, once we select an element or a group of elements, we can now use jQuery functions on that selection (ignoring all the other HTML elements that were not selected). The methods that can be applied to a CSS selection, selected with jQuery, are at the core of how jQuery works. Let's take a look at just a few of them:

$("div").click( function(){ alert("I was clicked."); } );

Attach a click event to selected element(s) and specify what should happen. In this particular case, we make an alert show up when ANY div element is clicked. The "div" selector selects absolutely all DIV elements on your page.

$("div").bind("click", function(){ alert("I was clicked."); } );

Exactly the same thing as above, except using the bind (as in bind event to an element. In jQuery you can often do the same thing in a slightly different way. People on my newsletter come from all kinds of backgrounds and skill levels.

I don't mean to offend the intelligence of those who already understand these concepts. And this is the only way to understand jQuery. It is through understanding JavaScript basics.

The dollar sign ($) represents the main jQuery object, which is a JavaScript function. Parenthesis are used to pass parameters to that object/function. This is the legal JavaScript syntax. A function must be defined before it can be used.

To define a function:

function(parameters) { /* function definition */ };

Defining a function is not enough if we want to do anything with it. To call that function we call it by its name. Notice when we are calling a defined function, the curly brackets are no longer needed, we only need to pass parameters to it:

function(parameters);

The parameters can be passed to a function one by one, separated by comma. Parameters turn into usable variables inside the function. So, how does all of this relate to jQuery? Let's take a look!

The dollar sign $ or jQuery are the names of the same function. They are equal each other:

$ = jQuery = function(parameters) { /* definition of entire jQuery library */ }

If we had something like $("div"), here we first make a call to the $ function, which is the main jQuery object. In JavaScript functions are objects. We can refer to functions as objects interchangeably.

The parameter we are passing to the jQuery function is "div". We use double quotes because we are passing a string of text. We are naming a literal HTML tag using a text-based name (also called a string of text, or simply a string). In programming a string is often referred to a line of text (with or without spaces), in other words a string of characters like a,b,c, etc.

Had we not used the double quotes that would tell jQuery that we are passing a variable called "div". For example, then, our code would look like this:

$(div)

When double quotes are not used, we are no longer passing an argument of type String to the jQuery object! Now it tells JavaScript that there is a variable named div (it must be previously defined elsewhere in our program) and it is not a string of text.

We know that in Javascript variables can be defined as follows using the var keyword:

var tag = "div";

So we just created a variable called "tag" and assigned the string value of "div" to it. It could be anything such as "abc" or "I don't have to see it to believe it." It doesn't matter. We just created a variable containing a string of text.

Now that we have this variable defined, calling the following code:

$(tag);

Without double quotes would be the exact same thing as calling:

$("div");

It's the same thing because that's what the variable tag is defined as - as the literal string "div". It's like they switched places :-) So that's an example of passing a variable to a function.

Had we not defined variable tag as "div" and said $(tag) then JavaScript would give us an error and say that tag is undefined.

jQuery offers us many stand-alone functions that stem from the main jQuery object (they are attached to it) Stand-alone functions do not require elements to be selected.

$.ajax("webpage.html");

This function simply calls the ajax method to dynamically load a web page and return its content as a result (commonly known as function's return value.)

However, CSS plays an even bigger role in writing jQuery code. In fact, selecting HTML elements using CSS selectors is an extraordinarily important function of jQuery. I wish I could talk about everything in one newsletter. I have written two CSS selector tutorials to help further: Website Tutorial - jQuery CSS Selectors Website Tutorial - jQuery CSS Selectors (continued)

How To Make Your Own jQuery Plug-in

Now that we know a few things about jQuery, we can think of some jQuery programs as plug-ins. These are programs that were written by someone else and we can "plug them in" into our own websites. They will work out of the box.

In addition to my email newsletter, there are also original jQuery tutorials on my website. Tutorial below explains how to make plug-ins:

Tutorial 1: jQuery Plugin Development This tutorial assumes basic knowledge of JavaScript and is a bird's eye view on jQuery plug-in development. A jQuery plug-in is a program which is usually written as a JavaScript function which is then attached to the main jQuery object. In JavaScript functions themselves are objects, and objects can be attached to other objects. I don't assume that you know everything about JavaScript (the language jQuery is written in) but you should at least understand functions. If you feel lost check out my book. Don't let your lack of knowledge now discourage you. The later editions of this newsletter will shed some light on JavaScript as well as jQuery. 

Just the weekly tutorials.