jquery

Girish Srivastavagirish092.ch@gmail.com

1

Objective In this tutorial, we will learn everything about the jQuery. After

completing the tutorial you will be able to understand about jQuery.

This jQuery tutorial covers: Introduction to jQuery Features of jQuery Comparison between different tool kits Jquery Selectors

2

What’s the problem with JavaScript?

JavaScript was a initially

introduced in Netscape 2.0B3

in Dec 1995,

LiveScript, Jscript, however, it’s

official name is

ECMAScript

JavaScript is a C-family, world’s

worst named, extremely

powerful language (not a

script), totally unrelated to

Java

JavaScript is a weakly typed,

classless, prototype based OO

language, that can also be

used outside the browser. It is

not a browser DOM.

The world’s most

misunderstood

programming language.

(Douglas Crockford)

Browser DOM really sucks, and

this is where jQuery comes to

rescue.

This session is about improving your Quality

of Life !

Introduction to jQuery

A Little Bit About jQueryWhat is jQuery?•jQuery is an Open-Source JavaScript framework that simplifies cross-browser client side scripting.

• Animations

• DOM manipulation

• AJAX

• Extensibility through plugins

•jQuery was created by John Resig and released

01/06

•Most current release is 1.7.2 (3/19/12)

11

A Little Bit About jQueryWhy should you use it?

•Easy to learn! It uses CSS syntax for selection

•Its tiny 71KB (24KB, minified and Gzipped)

•Documented api.jquery.com & Supported forum.jquery.com

•Cross browser compatibility: IE 6+, FF 2+

•It is the most used JavaScript library on the web

today• 39% of all sites that use JavaScript use jQuery.

trends.builtwith.com/javascript/JQuery <- See, I'm not a liar..

12

Features Of Jquery. jQuery includes the following features:

DOM element selections using the cross-browser open source selector engine Sizzle, a spin-off out of the jQuery project

DOM traversal and modification (including support for CSS 1-3)DOM manipulation based on CSS selectors that uses node

elements name and node elements attributes (id and class) as criteria to build selectors

EventsEffects and animationsAjaxExtensibility through plug-insCross-browser support

13

All Other Frameworks

14

Who Uses jQuery?

docs.jquery.com/Sites_Using_jQuery

15

JQuery versus Dojo versus YUI

16

17

18

When we compare these 3 libraries/frameworks, I found the following  which was quite useful.http://selectors.turnwheel.com/slickspeed.php

jQuery vs MooTools

jQuery Core MooTools Core

Library Size 55.9K 64.3K

Features

License MIT & GPL MIT

DOM Utilites yes yes

Animation yes yes

Event Handling yes yes

CSS3 Selectors yes (a subset) yes (a subset)

Ajax yes yes

Native Extensions (excluding Element)

about a dozen for Array, Object, and String

about six dozen for Array, Object, String, Function, and Number

Inheritance Not supported directly with jQuery

Provided with Class constructor

19

The Mottos Say It AllIf you go to the jQuery site, here's what it says at the top

of the page:ojQuery is a fast and concise JavaScript Library

that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.

...and if you go to MooTools, this is what you'll find:oMooTools is a compact, modular, Object-

Oriented JavaScript framework designed for the intermediate to advanced JavaScript developer. It allows you to write powerful, flexible, and cross-browser code with its elegant, well documented, and coherent API.20

21

Historical trend This diagram shows the historical trend in the percentage of

websites using JQuery.

22

JavaScript libraries market position This diagram shows the market positions in terms of popularity

and traffic of the 5 most popular JavaScript libraries. 

23

Document Object Model (DOM): nounBlah blah blah long

definition that makes little sense….

What is the DOM?

24

What Is The DOM?Long story short, the DOM is your html

document code. From the <!DOCTYPE> to the </html>

The DOM is loaded top to bottom, so include your scripts at the bottom of the page for best performance.

The DOM is "ready" when everything on the page has loaded.

• Stylesheets• JavaScripts• Images

25

Wait!! In order to make sure that jQuery can find the

element you asked it for, your browser needs to have loaded it (the DOM needs to be ready).

Q. How can I be sure my code runs at DOM ready?

A. Wrap all your jQuery code with the document ready function:

$(document).ready(function(){ // insert sweet, sweet jQuery code here…

});26

And What If I Don't Wanna, Huh?

1. Code doesn't work, throws an error (90%)

2. Code works… this page load, next page load see #1. (~9%)3. Code opens a worm hole that transports your page back to 1990 revolutionizing the

Web as we know it. While seemingly great, it also creates a paradox and destroys the universe. * (<1%)

*(has yet to be fully verified)

1 of 3 things will happen:

27

jQuery Core Concepts

Create HTML elements on the fly

var el = $(“<div/>”)

The Magic $() function

Manipulate existing DOM elements

$(window).width()

The Magic $() function

Selects document elements(more in a moment…)

$(“div”).hide();

$(“div”, $(“p”)).hide();

The Magic $() function

$(document).ready(function(){…});

Fired when the document is ready for programming.

Better use the full syntax:

$(function(){…});

The Magic $() function

Loading jQueryIn order to use jQuery you need to load

it.You can include it locally on your own server:

<script src="/js/jquery.js">

Or use one of the CDN's made available:ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js

ajax.microsoft.com/ajax/jquery/jquery-1.4.2.js

CDN's are Gzipped and minified

33

Load Scripts At The BottomProblem:When scripts are downloading they block everything else in almost all browsers!

Solution:Best practice: Load your scripts at the bottom of your page so they don't interrupt page content downloads.

34

jQuery SyntaxThe jQuery syntax is tailor made for selecting HTML elements and perform some action on the element(s).

Basic syntax is: $(selector).action()A dollar sign to define jQueryA (selector) to "query (or find)" HTML elements

A jQuery action() to be performed on the element(s)

35

Get > Act

Chainability

The $() function

Three Major Concepts of jQuery

jQuery Selectors

$(“*”) // find everything

All Selector

Selectors return a pseudo-array of jQuery elements

$(“div”)

// <div>Hello jQuery</div>

Basic Selectors

Yes, jQuery implements CSS Selectors!

$(“#usr”)

// <span id=“usr”>John</span>

$(“.menu”)

// <ul class=“menu”>Home</ul>

By Tag:

By ID:

By Class:

And BOOM! Goes The Dynamite.

And BOOM! Goes The Dynamite.Html:

<p>Hello World! I'm Eric</p>Script:

$(function(){

$("p").addClass("isCool");//keep telling yourself that..

});

Resulting html:

<p class="isCool">Hello World! I'm Eric</p>

jsbin.com/ecayo3/18#slide19

40

Break It Down Now!$(function(){// = $(document).ready(function(){

});

$ ("p") .addClass("isCool");

41

All Your Basic Selectors Are Belong To Us

Uses the same syntax you use to style elements in CSS!

api.jquery.com/category/selectors/

42

Get Classy <p>Get Classy <p>

jQuery:$("p").addClass("sophisticated");

Before:<p>

After:<p class="sophisticated">

jsbin.com/ecayo3/18#slide22

43

This <p> Has No Class At All! jQuery:$("p").removeClass("sophisticated");

Before:<p class="sophisticated">

After:<p class="">

44

<div> Hide and SeekjQuery:$("div").show();

Before:<div style="display:none;">

After:<div style="display:block;">

45

I’m Not Lame, Am I?jQuery:$("#eric").text("Is Cool");

Before:<p id="eric">Is Lame</p>

After:<p id="eric">Is Cool</p>

46

You Can Chain Most Methods Together

$("p")

.addClass("sophisticated") .text("Hello World!") .show();

47

Some of Basic Methods

api.jquery.com/

48

A Simple Example: <html>

<head><script type="text/javascript" src="jquery.js"></script><script type="text/javascript">$(document).ready(function(){$("p").click(function(){$(this).hide();});});</script></head><body><p>If you click on me, I will disappear.</p></body></html>

49

Downloading jQueryTwo versions of jQuery are available for

downloading: one minified and one uncompressed (for debugging or reading).

Both versions can be downloaded fromhttp://docs.jquery.com/

Downloading_jQuery#Download_jQuery

50

Alternatives to DownloadingIf you don't want to store the jQuery library on your own computer, you can use the hosted jQuery library from Google or Microsoft.

Google<head>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script></head>

Microsoft<head>

<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js"></script></head>

51

Questions?

52

http://www.jquerymagic.com/

PluginsPlugins

53

Viva Variety!“If you want to create an animation, effect

or UI component, chances are pretty good that someone has done your work for you already.”

plugins.jquery.com

54

Great ReferencesJohn Resig's introduction slidesjQuery 1.4 Cheat SheetjQuery APIjQuery ForumsYAYquery Podcast (explicit)http://docs.jquery.com/How_

jQuery_Works

DEMOS:jsbin.com/ecayo3/18

55

I Like Plugins!Show Us More!

56

57

For any queries mail: girish092.ch@gmail.com