1. 1
Girish Srivastava
girish092.ch@gmail.com

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

3. What’s the problem
? with JavaScript

4. JavaScript was a initially introduced in
Netscape 2.0B3 in Dec 1995,
LiveScript, Jscript, however, it’s official
name is
ECMAScript

5. JavaScript is a C-family, world’s worst
named, extremely powerful language (not
a script), totally unrelated to Java

6. JavaScript is a weakly typed, classless,
prototype based OO language, that can
also be used outside the browser. It is not
a browser DOM.

7. The world’s most misunderstood
programming language.
(Douglas Crockford)

8. Browser DOM really sucks, and this is
where jQuery comes to rescue.

9. This session is about improving
your Quality of Life !

10. Introduction to jQuery

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

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

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

14. All Other Frameworks
14

15. Who Uses jQuery?
docs.jquery.com/Sites_Using_jQuery
15

16. JQuery versus Dojo versus YUI
16

17. 17

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

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

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

21. 21

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

23. position
 This diagram shows the market positions in terms of popularity and traffic of the 5 most
popular JavaScript libraries.
23

24. What is the DOM?
Document Object Model
(DOM): noun
Blah blah blah long definition
that makes little sense….
24

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

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

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

28. jQuery Core Concepts

29. The Magic $() function
var el = $(“<div/>”)
Create HTML elements on the fly

30. The Magic $() function
$(window).width()
Manipulate existing DOM elements

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

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

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

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

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

36. Three Major Concepts of jQuery
The $() function
Get > Act
Chainability

37. jQuery Selectors

38. All Selector
$(“*”)
// find everything
Selectors return a pseudo-array of jQuery elements

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

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

41. Break It Down Now!
$(function(){// = $(document).ready(function(){
$
});
41
("p")
.addClass("isCool");

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

43. Get Classy <p>
jsbin.com/ecayo3/18#slide22
jQuery:
$("p").addClass("sophisticated");
Before:
<p>
After:
<p class="sophisticated">
43

44. This <p> Has No Class At All!
jQuery:
$("p").removeClass("sophisticated");
Before:
<p class="sophisticated">
After:
<p class="">
44

45. <div> Hide and Seek
jQuery:
$("div").show();
Before:
<div style="display:none;">
After:
<div style="display:block;">
45

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

47. You Can Chain Most Methods Together
$("p")



47
.addClass("sophisticated")
.text("Hello World!")
.show();

48. Some of Basic Methods
api.jquery.com/
48

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

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

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

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

53. Plugins
53

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

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

56. I Like Plugins!
Show Us More!
56

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