This tutorial gives you an overview and talks about the fundamentals of jQuery.
What is jQuery?
jQuery is a programming language you can use to create cool web applications. It’s free, powerful, relatively easy to set up and learn, and it has extensions and plugins available to do almost anything you could imagine. You can get started quickly, and you won’t outgrow it later when you get really good at it.
The most basic concept you need to grasp is that a web page is just a bunch of text, organized in a certain way, which is displayed by a browser. The browser reads this text and builds a model of the page in memory called the ‘document object model’. jQuery lets you manipulate the document object model (also commonly known as the ‘DOM’).
jQuery templates separate structure and data, making the application easier to code, test, and maintain as shown below.
The jQuery library contains the following core features:
- HTML/DOM manipulation
- CSS manipulation
- HTML event methods
- Effects and animations
In addition, jQuery also has plugins that can likely solve any problem you are facing.
What jQuery is NOT
You have to use jQuery for what it is good for. As we have described it, jQuery is a language used for manipulating web pages after they have been sent to the browser. Because it only works with the HTML in the browser, we call this a client scripting tool. ‘Client’ is just a fancy word meaning ‘browser’ in this context but we mention it because it is an industry term.
jQuery is not a server scripting language. A server scripting language is one that runs on the web server, and manipulates the HTML before it is sent to the browser. A good example of a server scripting language is PHP.
A client scripting language (such as jQuery) manipulates HTML after it has been sent to the browser.
A server scripting language (such as PHP) manipulates HTML before it has been sent to the browser.
Adding jQuery to Your Web Pages
There are two ways to start using jQuery on your web site. You can:
- Download the jQuery library from jQuery.com or,
- Include jQuery from a CDN, such as Google
There are two versions of jQuery available for downloading: the production version and the development version. The production version is for your live website because it has been minified and compressed. The production version is fast, but virtually incomprehensible to humans. The development version is intended only for testing and development. The development version is uncompressed and consists of human-readable code. But of course, it’s slower to load. Both versions can be downloaded from jQuery.com.
Tip: Place the downloaded file in the same directory as the pages where you wish to use it.
Alternatives to Downloading
Both Google and Microsoft host jQuery. To use jQuery from Google or Microsoft, use one of the following:
If you look at the Google URL above you’ll see that the version of jQuery is specified in the URL (1.10.2). If you would like to simply use the latest version of jQuery, you can either remove a number from the end of the version string (for example 1.10), then Google will return the latest version available in the 1.10 series (1.10.0, 1.10.1, etc.), or you can take it up to the whole number (1), and Google will return the latest version available in the 1 series (from 1.1.0 to 1.10.2).
Using a hosted version of jQuery from Google or Microsoft offers some serious advantages to hosting it yourself. Many users will have already downloaded jQuery from Google or Microsoft when visiting a different site. As a result, they won’t need to download it again because their browser will already have it stored locally. This leads to faster loading time of your site. Also, most CDN’s will make sure that when a user requests a file it will be served from the server closest to them, which may well be closer (and more importantly faster) than your server.
Unless you have a compelling reason to host jQuery yourself, you should use a CDN (Content Delivery Network).
Installing for a Web Site
If you want to make your application you want to be available to everybody via the Internet, you’ll need to install your application onto a publicly accessible server. Typically that means finding a hosting provider.
Basic jQuery Syntax
With jQuery you select (query) HTML elements and perform “actions” on them.
The jQuery syntax is designed for selecting HTML elements and then performing some action on them.
The basic syntax is: $(selector).action()
- The $ sign means ‘what follows is jQuery’
- The (selector) is used to find (or select) a subset of HTML elements
- The action defines what will happen to the selected elements.
Here’s a picture that points out each element:
$(this).hide() – hides the current element.
$(“p”).hide() – hides all <p> elements.
$(“.test”).hide() – hides all elements with class=”sitb-test”.
$(“#test”).hide() – hides the element with id=”test”.
JQuery uses CSS syntax to select elements. You will learn more about the selector syntax in the jquery training and in the upcoming advanced jquery tutorial.
The Document Ready Event
You might have noticed that all jQuery methods in our examples, are inside a document ready event:
// jQuery methods go here…
This is to prevent any jQuery code from running before the document is finished loading (i.e., before it is ready).
Here are some examples of actions that can fail if methods are run before the document is fully loaded:
- Trying to hide an element that is not created yet
- Trying to get the size of an image that is not loaded yet
Tip: The jQuery team has also created an even shorter method for the document ready event:
// jQuery methods go here…
Use the syntax you prefer. We think that the document ready event is easier to understand when reading the code.