Mindmajix

jQuery Tutorial

jQuery Tutorial

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

JavaScript is 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-training

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

The jQuery library contains the following core features:

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

jquery-training

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:

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

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 <script> tag which, in general, should be placed inside the <head> section of your HTML file, such as:

<head>

<script src=”jquery-1.10.2.min.js”></script>

</head>

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

Do you wonder why we do not have to specify the type=”text/javascript” inside the <script> tag anymore? In fact, this is no longer required in HTML5. JavaScript is the default scripting language in HTML5 and in all modern browsers!

Alternatives to Downloading

Both Google and Microsoft host jQuery. To use jQuery from Google or Microsoft, use one of the following:

Google CDN:

<head>

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

</script>

</head>

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

Microsoft CDN:

<head>

<script src=”http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.2.min.js”>

</script>

</head>

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.

jQuery Syntax

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-training

jQuery Examples

$(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:

$(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.


0 Responses on jQuery Tutorial"

Leave a Message

Your email address will not be published. Required fields are marked *

Copy Rights Reserved © Mindmajix.com All rights reserved. Disclaimer.
Course Adviser

Fill your details, course adviser will reach you.