jQuery Tutorial

In this jQuery tutorial, gives you an overview and talks about the fundamentals of jQuery.

jQuery Tutorial - Table of Contents

• What is jQuery?
• What is JavaScript?
• jQuery Features
• Adding jQuery to webpages
• Installing for a Website
• jQuery Examples
• jQuery vs Javascript

If you want to enrich your career and become a professional in jQuery, then enroll in "jQuery Training". This course will help you to achieve excellence in this domain.

jQuery Tutorial For Beginners

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 is a lightweight JavaScript library with the tagline of “write less, do more”. So what does that mean, exactly?

To understand what it means, it helps to have an idea of what jQuery is intended to help you do. If you didn’t have jQuery (or any other framework like Dojo, which is also very cool) then the way you would make things happen in the browser is to use a language called JavaScript.

What is JavaScript?

JavaScript is a programming language that is built into all modern web browsers so that client-side scripts can interact with the user, control the browser, communicate with the server in the background, and alter the document content and formatting that is displayed. JavaScript is a full-featured programming language and, as such, it can be rather complicated.

jQuery templates separate structure and data, making the application easier to code, test, and maintain as shown below:

jQuery vs Javascript

jQuery is written in JavaScript. In fact, jQuery is a lot of JavaScript all in one place– hence the phrase ‘library’. It’s like a library full of JavaScript code. The purpose of jQuery is to make it easier for you to use JavaScript in your web pages. jQuery takes many of the common tasks that would otherwise require lots of lines of JavaScript code and turns them into methods that you can call with a single line of code. But of course, when your “one line” of code is executed, what really happens inside the browser is that all the code in the jQuery library is executed in its place. That’s what jQuery saves you from — writing all the JavaScript that is ‘under the hood’.

jQuery is a language that converts your one line of simple code into dozens and possibly even hundreds of lines of complex JavaScript code. It does this automatically and nearly instantaneously. In fact, that is the whole point of jQuery.

jQuery simplifies a lot of the complicated things from JavaScript, like AJAX calls and DOM manipulation.

jQuery Features

The jQuery library contains the following core features:

• HTML/DOM manipulation
• CSS manipulation
• HTML event methods
• Effects and animations
• AJAX
• Utilities.

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 website. You can:

1. Download the jQuery library from jQuery.com or
2. Include jQuery from a CDN, such as Google.

1. Downloading jQuery

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.

The jQuery library is a single JavaScript file, and you reference it with the HTML.

Tip: Place the downloaded file in the same directory as the pages where you wish to use it.

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).

2. Microsoft CDN

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 the 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 Website

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:

jQuery Examples

$(this).hide()          –      hides the current element.

$(“p”).hide()           –      hides all 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.

Learn Top jQuery Interview Questions and Answers that help you grab high-paying jobs

The Document Ready Event

You might have noticed that all jQuery methods in our examples are inside a document-ready event:

$(document).ready(function(){

// 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).

It is good practice to wait for the document to be fully loaded and ready before working with it. This also allows you to have your JavaScript code before the body of your document, in the head section.

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:

$(function(){

// jQuery methods go here…

});

Use the syntax you prefer. We think that the document-ready event is easier to understand when reading the code.

Explore jQuery Sample Resumes! Download & Edit, Get Noticed by Top Employers!