Jquery

1

Girish Srivastava
girish092.ch@gmail.com

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 !

A Little Bit About jQuery
What is jQuery?
•jQuery is an Open-Source JavaScript framework that simplifies crossbrowser 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 jQuery
Why 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
 Events
 Effects and animations
 Ajax
 Extensibility through plug-ins
 Cross-browser support

13

Who Uses jQuery?

docs.jquery.com/Sites_Using_jQuery
15

JQuery versus Dojo versus YUI

16

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

18

jQuery vs MooTools
Library Size

jQuery Core
55.9K

MooTools Core
64.3K

Features
License
DOM Utilites

MIT & GPL
yes

MIT
yes

Animation
Event Handling

yes
yes

yes
yes

CSS3 Selectors
Ajax

yes (a subset)
yes

yes (a subset)
yes

Native Extensions (excluding about a dozen for Array,
Element)
Object, and String

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

Inheritance

Provided with Class
constructor

19

Not supported directly with
jQuery

The Mottos Say It All
If you go to the jQuery site, here's what it says at the top of the page:

o jQuery 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:

o MooTools 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

Historical trend
 This diagram shows the historical trend in the percentage of websites using JQuery.

22

position
 This diagram shows the market positions in terms of popularity and traffic of the 5 most

popular JavaScript libraries.

23

What is the DOM?

Document Object Model
(DOM): noun
Blah blah blah long definition
that makes little sense….
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(){

});

26

// insert sweet, sweet jQuery code here…

And What If I Don't Wanna, Huh?
1 of 3 things will happen:
1.

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

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



27

*(has yet to be fully verified)

The Magic $() function

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

Create HTML elements on the fly


$(window).width()

Manipulate existing DOM elements


$(“div”).hide();
$(“div”, $(“p”)).hide();
Selects document elements
(more in a moment…)

$(function(){…});
Fired when the document is ready for programming.
Better use the full syntax:
$(document).ready(function(){…});

Loading jQuery
In 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 Bottom
Problem:
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 Syntax
The 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 jQuery
A (selector) to "query (or find)" HTML elements
A jQuery action() to be performed on the
element(s)

35

Three Major Concepts of jQuery

The $() function

Get > Act

Chainability

All Selector

$(“*”)

// find everything

Selectors return a pseudo-array of jQuery elements

Basic Selectors
By Tag:

$(“div”)
// <div>Hello jQuery</div>

By ID:

$(“#usr”)
// <span id=“usr”>John</span>

By Class:

$(“.menu”)
// <ul class=“menu”>Home</ul>

Yes, jQuery implements CSS Selectors!

And BOOM! Goes The Dynamite.
jsbin.com/ecayo3/18#slide19

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>

40

Break It Down Now!

$(function(){// = $(document).ready(function(){

$

});
41

("p")

.addClass("isCool");

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>
jsbin.com/ecayo3/18#slide22

jQuery:

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

Before:

<p>

After:

<p class="sophisticated">

43

This <p> Has No Class At All!
jQuery:

$("p").removeClass("sophisticated");

Before:

<p class="sophisticated">

After:

<p class="">

44

<div> Hide and Seek
jQuery:

$("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")




47

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

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 jQuery
Two versions of jQuery are available for downloading: one minified

and one uncompressed (for debugging or reading).
Both versions can be downloaded from
 http://docs.jquery.com/Downloading_jQuery#Download_jQuery

50

Alternatives to Downloading
If 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.c
om/ajax/libs/jquery/1.4.2/jq
uery.min.js"></script>
</head>

51

Microsoft

<head>
<script
type="text/javascript"
src="http://ajax.microsoft.c
om/ajax/jquery/jquery1.4.2.min.js"></script>
</head>

Questions?
http://www.jquerymagic.com/
52

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 References
John Resig's introduction slides
jQuery 1.4 Cheat Sheet
jQuery API
jQuery Forums
YAYquery Podcast (explicit)
http://docs.jquery.com/How_

jQuery_Works
DEMOS:
jsbin.com/ecayo3/18
55

I Like Plugins!
Show Us More!

56

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

Jquery

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (6)

Similar to Jquery

Similar to Jquery (20)

More from Girish Srivastava

More from Girish Srivastava (9)

Recently uploaded

Recently uploaded (20)

Jquery

Editor's Notes