JQUERY

jQuery
JavaScript Library
Tuesday, July 30, 13

jQuery
JavaScript Library
simpliﬁes
JavaScript
programming

jQuery
JavaScript Library
simpliﬁes
JavaScript
programming
easy to learn

jQuery
write
less,
do
more

JavaScript Library
simpliﬁes
JavaScript
programming
easy to learn

J
Q
U
E
R
Y

WHAT
J
Q
U
E
R
Y

WHAT
J
Q
U
E
R
Y
Lightweight Footprint

WHAT
J
Q
U
E
R
Y
Lightweight Footprint
Only 32kB minified and gzipped.

WHAT
J
Q
U
E
R
Y
jQuery is a lightweight, "write less, do more", JavaScript library.

WHAT
J
Q
U
E
R
Y
CSS3 Compliant

WHAT
J
Q
U
E
R
Y
CSS3 Compliant
Supports CSS3 selectors to find elements

WHAT
J
Q
U
E
R
Y
Cross-Browser

WHAT
J
Q
U
E
R
Y
Cross-Browser
IE, Chrome, Firefox, Safari,

WHAT
J
Q
U
E
R
Y
jQuery also simplifies a lot of the complicated things from JavaScript,
like AJAX calls and DOM manipulation.

WHAT
J
Q
U
E
R
Y
jQuery takes a lot of common tasks that require many lines of
JavaScript code to accomplish, and wraps them into methods that you
can call with a single line of code.
jQuery also simplifies a lot of the complicated things from JavaScript,
like AJAX calls and DOM manipulation.

WHAT
J
Q
U
E
R
Y
jQuery library contains the following features:
HTML/DOM manipulation

WHAT
J
Q
U
E
R
Y
CSS manipulation

WHAT
J
Q
U
E
R
Y
CSS manipulation
HTML event methods

WHAT
J
Q
U
E
R
Y
CSS manipulation
HTML event methods
Effects and animations

WHAT
J
Q
U
E
R
Y
CSS manipulation
HTML event methods
AJAX

WHAT
J
Q
U
E
R
Y
CSS manipulation
HTML event methods
AJAX
Utilities

WHY
J
Q
U
E
R
Y

WHY
J
Q
U
E
R
Y
There are a lots of other JavaScript frameworks
out there, but jQuery seems to be the most
popular, and also the most extendable.

WHY
J
Q
U
E
R
Y
Many of the biggest companies on the web use jQuery, such as:

WHY
J
Q
U
E
R
Y
Google

WHY
J
Q
U
E
R
Y
Google
Microsoft

WHY
J
Q
U
E
R
Y
Google
Microsoft
IBM

WHY
J
Q
U
E
R
Y
Google
Microsoft
IBM
Netflix

WHY
J
Q
U
E
R
Y
Google
Microsoft
IBM
Netflix
The jQuery team knows all about cross-browser
issues, and they have written this knowledge into the
jQuery library. jQuery will run exactly the same in all
major browsers, including Internet Explorer 6!
Will jQuery work in all?

J
Q
U
E
R
Y
HTML
CSS
JAVASCRIPT
Before you start studying jQuery, you should have a basic knowledge of:
What You Should Already Know

J
Q
U
E
R
Y
INSTALL
Adding jQuery to Your Web Pages

J
Q
U
E
R
Y
INSTALL
There are several ways to start using jQuery on your web site. You can:
Download the jQuery library from jQuery.com

J
Q
U
E
R
Y
INSTALL
There are two versions of jQuery available for downloading:
• Production version - this is for your live website because it has been minified and compressed
• Development version - this is for testing and development (uncompressed and readable code)
Both versions can be downloaded from jQuery.com.

J
Q
U
E
R
Y
INSTALL
There are two versions of jQuery available for downloading:
• Production version - this is for your live website because it has been minified and compressed
• Development version - this is for testing and development (uncompressed and readable code)
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 (notice that the <script> tag should be inside the <head> section):
<head>
<script src="jquery-1.10.2.min.js"></script>
</head>

J
Q
U
E
R
Y
INSTALL
Include jQuery from a CDN, like Google

J
Q
U
E
R
Y
INSTALL
If you don't want to download and host jQuery yourself,

J
Q
U
E
R
Y
INSTALL
you can include it from a CDN (Content Delivery Network).

J
Q
U
E
R
Y
INSTALL
Both Google and Microsoft host jQuery.

J
Q
U
E
R
Y
INSTALL
To use jQuery from Google or Microsoft, use one of the following:

J
Q
U
E
R
Y
INSTALL
GOOGLE CDN
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/
jquery.min.js">
</script>
</head>

J
Q
U
E
R
Y
INSTALL
GOOGLE CDN
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/
jquery.min.js">
</script>
</head>
MICROSOFT CDN
<head>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.2.min.js">
</script>
</head>

J
Q
U
E
R
Y
SYNTAX

J
Q
U
E
R
Y
SYNTAX
jQuery syntax is tailor made for selecting HTML elements and
performing some action on the element(s).

J
Q
U
E
R
Y
SYNTAX
Basic syntax is:

J
Q
U
E
R
Y
SYNTAX
Basic syntax is: (selector).action()$

J
Q
U
E
R
Y
SYNTAX
Basic syntax is:
$ sign to define/access jQuery
(selector).action()$

J
Q
U
E
R
Y
SYNTAX
Basic syntax is:
(selector) to "query (or find)" HTML elements

J
Q
U
E
R
Y
SYNTAX
Basic syntax is:
jQuery action() to be performed on the element(s)
(selector) to "query (or find)" HTML elements

J
Q
U
E
R
Y
SYNTAX
Basic syntax is:
(selector) to "query (or find)" HTML elements$(this).hide() - hides the current element.
$("p").hide() - hides all <p> elements.
$(".test").hide() - hides all elements with class="test".
$("#test").hide() - hides the element with id="test".
EXAMPLES

J
Q
U
E
R
Y
SYNTAX
Document Ready Event
prevent any jQuery code from running before the
document is finished loading (is ready).
$(document).ready(function(){
// jQuery methods go here...
});
Basic syntax is:
EXAMPLES

J
Q
U
E
R
Y
SYNTAX
Document Ready Event
prevent any jQuery code from running before the
document is finished loading (is ready).
// jQuery methods go here...
});
Basic syntax is:
EXAMPLES
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.
Document ready event is easier to understand when reading the code.

J
Q
U
E
R
Y
SELECTORS

J
Q
U
E
R
Y
SELECTORS allows you to select and manipulate HTML element(s).

J
Q
U
E
R
Y
used to "find" (or select) HTML elements based on their id, classes, types, attributes,

J
Q
U
E
R
Y
values of attributes and much more.

J
Q
U
E
R
Y
based on the existing CSS Selectors, and in addition, it has some own custom selectors.

J
Q
U
E
R
Y
All selectors in jQuery start with the dollar sign and parentheses: $().

J
Q
U
E
R
Y
SELECTORS

J
Q
U
E
R
Y
SELECTORS
EXAMPLE:

J
Q
U
E
R
Y
SELECTORS
When a user clicks on a button, selected elements will be hidden:
EXAMPLE:

J
Q
U
E
R
Y
SELECTORS
#ID SELECTOR
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$("button").click(function(){
$("#test").hide();
});
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p id="test">This is another paragraph.</p>
<button>Click me</button>
</body>
</html>
allows you to select and manipulate HTML element(s).
SELECTORS
EXAMPLE:

J
Q
U
E
R
Y
SELECTORS
#ID SELECTOR
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$("#test").hide();
});
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p id="test">This is another paragraph.</p>
<button>Click me</button>
</body>
</html>
allows you to select and manipulate HTML element(s).
EXAMPLE:

J
Q
U
E
R
Y
EVENTS

J
Q
U
E
R
Y
EVENTS All the different visitor's actions that a web page can respond to are called events.
Presents the precise moment when something happens.
The term "fires" is often used with events. Example: "The keypress event fires the moment
you press a key".

J
Q
U
E
R
Y
you press a key".
Here are some common DOM events:

J
Q
U
E
R
Y
you press a key".
jQuery Syntax For Event Methods

J
Q
U
E
R
Y
you press a key".
To assign a click event to all paragraphs on a page, you can do this:

J
Q
U
E
R
Y
you press a key".
$("p").click();

J
Q
U
E
R
Y
you press a key".
$("p").click();
The next step is to define what should happen when the event
fires. You must pass a function to the event:

J
Q
U
E
R
Y
you press a key".
$("p").click();
The next step is to define what should happen when the event
fires. You must pass a function to the event:
$("p").click(function(){
// action goes here!!
});

J
Q
U
E
R
Y
EVENTS
Commonly Used jQuery Event Methods

J
Q
U
E
R
Y
EVENTS
click()

J
Q
U
E
R
Y
EVENTS
click()
attaches an event handler function to an
HTML element. The function is executed
when the user clicks on the HTML element.

J
Q
U
E
R
Y
EVENTS
click()
$(this).hide();
});

J
Q
U
E
R
Y
EVENTS
click()
$(this).hide();
});
mouseenter()

J
Q
U
E
R
Y
EVENTS
click()
$(this).hide();
});
function is executed when the mouse
pointer enters the HTML element:
mouseenter()

J
Q
U
E
R
Y
EVENTS
click()
$(this).hide();
});
$("#p1").mouseenter(function(){
alert("You entered p1!");
});
mouseenter()

J
Q
U
E
R
Y
EVENTS
click()
$(this).hide();
});
});
mouseenter()
mousedown()

J
Q
U
E
R
Y
EVENTS
click()
$(this).hide();
});
});
mouseenter()
function is executed, when the left mouse
button is pressed down, while the mouse is
over the HTML element:
mousedown()

J
Q
U
E
R
Y
EVENTS
click()
$(this).hide();
});
});
mouseenter()
button is pressed down, while the mouse is
over the HTML element:
$("#p1").mousedown(function(){
alert("Mouse down over p1!");
});
mousedown()

J
Q
U
E
R
Y
EVENTS
mouseup()

J
Q
U
E
R
Y
EVENTS
mouseup()
button is released, while the mouse is over
the HTML element:

J
Q
U
E
R
Y
EVENTS
mouseup()
the HTML element:
$("#p1").mouseup(function(){
alert("Mouse up over p1!");
});

J
Q
U
E
R
Y
EVENTS
mouseup()
the HTML element:
});
hover()

J
Q
U
E
R
Y
EVENTS
mouseup()
the HTML element:
});
first function is executed when the mouse
enters the HTML element, and the second
leaves the HTML element:
hover()

J
Q
U
E
R
Y
EVENTS
mouseup()
the HTML element:
});
$("#p1").hover(function(){
},
function(){
alert("Bye! You now leave p1!");
});
hover()

J
Q
U
E
R
Y
EVENTS
mouseup()
the HTML element:
});
},
function(){
});
hover()
dblclick()

J
Q
U
E
R
Y
EVENTS
mouseup()
the HTML element:
});
},
function(){
});
hover()
function is executed when the user double-
clicks on the HTML element:
dblclick()

J
Q
U
E
R
Y
EVENTS
mouseup()
the HTML element:
});
},
function(){
});
hover()
function is executed when the user double-
clicks on the HTML element:
$("p").dblclick(function(){
$(this).hide();
});
dblclick()

J
Q
U
E
R
Y
EFFECTS

J
Q
U
E
R
Y
EFFECTS
HIDE AND SHOW

J
Q
U
E
R
Y
EFFECTS
SYNTAX:
HIDE AND SHOW

J
Q
U
E
R
Y
EFFECTS
SYNTAX:
HIDE AND SHOW
$(selector).hide(speed,callback);
$(selector).show(speed,callback);
optional speed parameter specifies the speed of the hiding/showing, and can take
the following values: "slow", "fast", or milliseconds.
optional callback parameter is a function to be executed after the hide() or
show() method completes

J
Q
U
E
R
Y
EFFECTS
SYNTAX:
HIDE AND SHOW
TOGGLE

J
Q
U
E
R
Y
EFFECTS
SYNTAX:
HIDE AND SHOW
TOGGLE
SYNTAX:

J
Q
U
E
R
Y
EFFECTS
SYNTAX:
HIDE AND SHOW
TOGGLE
SYNTAX:
$(selector).toggle(speed,callback);

J
Q
U
E
R
Y
EFFECTS
SYNTAX:
HIDE AND SHOW
TOGGLE
SYNTAX:
optional speed parameter can take the following values: "slow", "fast", or milliseconds.

J
Q
U
E
R
Y
EFFECTS
SYNTAX:
HIDE AND SHOW
TOGGLE
SYNTAX:
optional speed parameter can take the following values: "slow", "fast", or milliseconds.
optional callback parameter is a function to be executed after toggle()
completes.

J
Q
U
E
R
Y
EFFECTS
FADING

J
Q
U
E
R
Y
EFFECTS
FADING
fadeIn()

J
Q
U
E
R
Y
EFFECTS
SYNTAX:
FADING
$(selector).fadeIn(speed,callback);
fadeIn()

J
Q
U
E
R
Y
EFFECTS
SYNTAX:
FADING
fadeIn()
fadeOut()

J
Q
U
E
R
Y
EFFECTS
SYNTAX:
FADING
fadeIn()
SYNTAX: $(selector).fadeOut(speed,callback);
fadeOut()

J
Q
U
E
R
Y
EFFECTS
SYNTAX:
FADING
fadeIn()
fadeOut()
fadeToggle()

J
Q
U
E
R
Y
EFFECTS
SYNTAX:
FADING
fadeIn()
fadeOut()
SYNTAX: $(selector).fadeToggle(speed,callback);
fadeToggle()

J
Q
U
E
R
Y
EFFECTS
SYNTAX:
FADING
fadeIn()
fadeOut()
fadeToggle()
fadeTo()

J
Q
U
E
R
Y
EFFECTS
SYNTAX:
FADING
optional speed parameter specifies the duration of the effect. It can
take the following values: "slow", "fast", or milliseconds.
optional required opacity parameter in the fadeTo() method
specifies fading to a given opacity (value between 0 and 1).
fadeIn()
fadeOut()
fadeToggle()
SYNTAX: $(selector).fadeOut(speed,opacity,callback);
fadeTo()

J
Q
U
E
R
Y
EFFECTS
SYNTAX:
FADING
fadeIn()
fadeOut()
fadeToggle()
fadeTo()
optional callback parameter is a function to be executed after the
function completes.

J
Q
U
E
R
Y
EFFECTS
SYNTAX:
FADING
fadeIn()
fadeOut()
fadeToggle()
fadeTo()
function completes.
SLIDE

J
Q
U
E
R
Y
EFFECTS
SYNTAX:
FADING
fadeIn()
fadeOut()
fadeToggle()
fadeTo()
function completes.
SLIDE
slideDown()

J
Q
U
E
R
Y
EFFECTS
SYNTAX:
FADING
fadeIn()
fadeOut()
fadeToggle()
fadeTo()
function completes.
SLIDE
SYNTAX: $(selector).slideDown(speed,callback);
slideDown()

J
Q
U
E
R
Y
EFFECTS
SYNTAX:
FADING
fadeIn()
fadeOut()
fadeToggle()
fadeTo()
function completes.
SLIDE
slideDown()
slideUp()

J
Q
U
E
R
Y
EFFECTS
SYNTAX:
FADING
fadeIn()
fadeOut()
fadeToggle()
fadeTo()
function completes.
SLIDE
slideDown()
SYNTAX: $(selector).slideUp(speed,callback);
slideUp()

J
Q
U
E
R
Y
EFFECTS
SYNTAX:
FADING
fadeIn()
fadeOut()
fadeToggle()
fadeTo()
function completes.
SLIDE
slideDown()
slideUp()
SlideToggle()

J
Q
U
E
R
Y
EFFECTS
SYNTAX:
FADING
fadeIn()
fadeOut()
fadeToggle()
fadeTo()
function completes.
SLIDE
slideDown()
slideUp()
SYNTAX: $(selector).slideToggle(speed,callback);
SlideToggle()

J
Q
U
E
R
Y
EFFECTS
ANIMATIONS

J
Q
U
E
R
Y
EFFECTS
SYNTAX:
ANIMATIONS
$(selector).animate({params},speed,callback);
required params parameter defines the CSS properties to be
animated.
optional speed parameter specifies the duration of the effect. It
can take the following values: "slow", "fast", or milliseconds.

J
Q
U
E
R
Y
EFFECTS
SYNTAX:
ANIMATIONS
animated.
animation completes.

J
Q
U
E
R
Y
EFFECTS
SYNTAX:
ANIMATIONS
animated.
EXAMPLES:
$("div").animate({left:'250px'});
});

J
Q
U
E
R
Y
EFFECTS
SYNTAX:
ANIMATIONS
animated.
EXAMPLES:
});
$("div").animate({
left:'250px',
opacity:'0.5',
height:'150px',
width:'150px'
});
});

J
Q
U
E
R
Y
EFFECTS
SYNTAX:
ANIMATIONS
animated.
$("div").animate({
left:'250px',
height:'+=150px',
width:'+=150px'
});
});
animate() - Using Relative Values
EXAMPLES:
});
$("div").animate({
left:'250px',
opacity:'0.5',
height:'150px',
width:'150px'
});
});

J
Q
U
E
R
Y
EFFECTS
SYNTAX:
ANIMATIONS
animated.
$("div").animate({
left:'250px',
height:'+=150px',
width:'+=150px'
});
});
EXAMPLES:
});
$("div").animate({
left:'250px',
opacity:'0.5',
height:'150px',
width:'150px'
});
});
animate() - Using Pre-defined Values
$("div").animate({
height:'toggle'
});
});

J
Q
U
E
R
Y
EFFECTS
SYNTAX:
ANIMATIONS
animated.
$("div").animate({
left:'250px',
height:'+=150px',
width:'+=150px'
});
});
EXAMPLES:
});
$("div").animate({
left:'250px',
opacity:'0.5',
height:'150px',
width:'150px'
});
});
$("div").animate({
height:'toggle'
});
});
animate() - Using Queue Functionality
var div=$("div");
div.animate({height:'300px',opacity:'0.4'},"slow");
div.animate({width:'300px',opacity:'0.8'},"slow");
});

J
Q
U
E
R
Y
EFFECTS
SYNTAX:
ANIMATIONS
animated.
$("div").animate({
left:'250px',
height:'+=150px',
width:'+=150px'
});
});
EXAMPLES:
});
$("div").animate({
left:'250px',
opacity:'0.5',
height:'150px',
width:'150px'
});
});
$("div").animate({
height:'toggle'
});
});
var div=$("div");
});
This means that if you write multiple
animate() calls after each other, jQuery
creates an "internal" queue with these
method calls. Then it runs the animate
calls ONE by ONE.

J
Q
U
E
R
Y
EFFECTS
SYNTAX:
ANIMATIONS
animated.
$("div").animate({
left:'250px',
height:'+=150px',
width:'+=150px'
});
});
EXAMPLES:
});
$("div").animate({
left:'250px',
opacity:'0.5',
height:'150px',
width:'150px'
});
});
$("div").animate({
height:'toggle'
});
});
var div=$("div");
});
calls ONE by ONE.
stop()

J
Q
U
E
R
Y
EFFECTS
SYNTAX:
ANIMATIONS
animated.
$("div").animate({
left:'250px',
height:'+=150px',
width:'+=150px'
});
});
EXAMPLES:
});
$("div").animate({
left:'250px',
opacity:'0.5',
height:'150px',
width:'150px'
});
});
$("div").animate({
height:'toggle'
});
});
var div=$("div");
});
calls ONE by ONE.
stop()
SYNTAX:
$(selector).stop(stopAll,goToEnd);
The optional stopAll parameter specifies whether also the animation
queue should be cleared or not. Default is false, which means that only
the active animation will be stopped, allowing any queued animations to
be performed afterwards.
The optional goToEnd parameter specifies whether or not to complete the
current animation immediately. Default is false.

J
Q
U
E
R
Y
EFFECTS
CHAINING
Chaining allows us to run multiple jQuery methods (on the same element) within a
single statement.

J
Q
U
E
R
Y
EFFECTS
CHAINING
single statement.
EXAMPLES:
$("#p1").css("color","red").slideUp(2000).slideDown(2000);

J
Q
U
E
R
Y
EFFECTS
CHAINING
single statement.
EXAMPLES:
OR
$("#p1").css("color","red")
.slideUp(2000)
.slideDown(2000);

J
Q
U
E
R
Y
EFFECTS
CHAINING
single statement.
EXAMPLES:
OR
$("#p1").css("color","red")
.slideUp(2000)
.slideDown(2000);
Tip: This way, browsers do not have to find the same
element(s) more than once.

J
Q
U
E
R
Y
HTML

J
Q
U
E
R
Y
HTML
GET

J
Q
U
E
R
Y
HTML
GET
Three simple, but useful, jQuery methods for DOM manipulation are:
• text() - Sets or returns the text content of selected elements
• html() - Sets or returns the content of selected elements (including HTML
markup)
• val() - Sets or returns the value of form fields

J
Q
U
E
R
Y
HTML
GET
EXAMPLES:
$("#btn1").click(function(){
alert("Text: " + $("#test").text());
});
alert("HTML: " + $("#test").html());
});
markup)

J
Q
U
E
R
Y
HTML
GET
EXAMPLES:
});
});
markup)
Get Attributes - attr()
alert($("#w3s").attr("href"));
});

J
Q
U
E
R
Y
HTML
GET
EXAMPLES:
});
});
markup)
});
SET

J
Q
U
E
R
Y
HTML
GET
EXAMPLES:
});
});
markup)
});
SET
$("#test1").text("Hello world!");
});
$("#test2").html("<b>Hello world!</b>");
});
$("#test3").val("Dolly Duck");
});

J
Q
U
E
R
Y
HTML
REMOVE

J
Q
U
E
R
Y
HTML
REMOVE
remove() - Removes the selected element (and its child elements)

J
Q
U
E
R
Y
HTML
REMOVE
EXAMPLE $("#div1").remove();

J
Q
U
E
R
Y
HTML
REMOVE
EMPTY

J
Q
U
E
R
Y
HTML
REMOVE
EMPTY
empty() - Removes the child elements from the selected element

SOURCES:
• www.w3schools.com/jquery
• www.jquery.com

created by:
Eunice Tanamor

JQUERY

Recommandé

Recommandé

Contenu connexe

Similaire à JQUERY

Similaire à JQUERY (20)

Dernier

Dernier (20)

JQUERY