13. WHAT
J
Q
U
E
R
Y
jQuery is a lightweight, "write less, do more", JavaScript library.
CSS3 Compliant
Tuesday, July 30, 13
14. WHAT
J
Q
U
E
R
Y
jQuery is a lightweight, "write less, do more", JavaScript library.
CSS3 Compliant
Supports CSS3 selectors to find elements
Tuesday, July 30, 13
16. WHAT
J
Q
U
E
R
Y
jQuery is a lightweight, "write less, do more", JavaScript library.
Cross-Browser
Tuesday, July 30, 13
17. WHAT
J
Q
U
E
R
Y
jQuery is a lightweight, "write less, do more", JavaScript library.
Cross-Browser
IE, Chrome, Firefox, Safari,
Tuesday, July 30, 13
19. WHAT
J
Q
U
E
R
Y
jQuery is a lightweight, "write less, do more", JavaScript library.
jQuery also simplifies a lot of the complicated things from JavaScript,
like AJAX calls and DOM manipulation.
Tuesday, July 30, 13
20. WHAT
J
Q
U
E
R
Y
jQuery is a lightweight, "write less, do more", JavaScript library.
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.
Tuesday, July 30, 13
25. WHAT
J
Q
U
E
R
Y
jQuery library contains the following features:
HTML/DOM manipulation
CSS manipulation
HTML event methods
Effects and animations
Tuesday, July 30, 13
26. WHAT
J
Q
U
E
R
Y
jQuery library contains the following features:
HTML/DOM manipulation
CSS manipulation
HTML event methods
Effects and animations
AJAX
Tuesday, July 30, 13
27. WHAT
J
Q
U
E
R
Y
jQuery library contains the following features:
HTML/DOM manipulation
CSS manipulation
HTML event methods
Effects and animations
AJAX
Utilities
Tuesday, July 30, 13
30. 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.
Tuesday, July 30, 13
31. WHY
J
Q
U
E
R
Y
Many of the biggest companies on the web use jQuery, such as:
There are a lots of other JavaScript frameworks
out there, but jQuery seems to be the most
popular, and also the most extendable.
Tuesday, July 30, 13
32. WHY
J
Q
U
E
R
Y
Many of the biggest companies on the web use jQuery, such as:
Google
There are a lots of other JavaScript frameworks
out there, but jQuery seems to be the most
popular, and also the most extendable.
Tuesday, July 30, 13
33. WHY
J
Q
U
E
R
Y
Many of the biggest companies on the web use jQuery, such as:
Google
Microsoft
There are a lots of other JavaScript frameworks
out there, but jQuery seems to be the most
popular, and also the most extendable.
Tuesday, July 30, 13
34. WHY
J
Q
U
E
R
Y
Many of the biggest companies on the web use jQuery, such as:
Google
Microsoft
IBM
There are a lots of other JavaScript frameworks
out there, but jQuery seems to be the most
popular, and also the most extendable.
Tuesday, July 30, 13
35. WHY
J
Q
U
E
R
Y
Many of the biggest companies on the web use jQuery, such as:
Google
Microsoft
IBM
Netflix
There are a lots of other JavaScript frameworks
out there, but jQuery seems to be the most
popular, and also the most extendable.
Tuesday, July 30, 13
36. WHY
J
Q
U
E
R
Y
Many of the biggest companies on the web use jQuery, such as:
Google
Microsoft
IBM
Netflix
There are a lots of other JavaScript frameworks
out there, but jQuery seems to be the most
popular, and also the most extendable.
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?
Tuesday, July 30, 13
40. J
Q
U
E
R
Y
INSTALL
Adding jQuery to Your Web Pages
There are several ways to start using jQuery on your web site. You can:
Download the jQuery library from jQuery.com
Tuesday, July 30, 13
41. J
Q
U
E
R
Y
INSTALL
Adding jQuery to Your Web Pages
There are several ways to start using jQuery on your web site. You can:
Download the jQuery library from jQuery.com
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.
Tuesday, July 30, 13
42. J
Q
U
E
R
Y
INSTALL
Adding jQuery to Your Web Pages
There are several ways to start using jQuery on your web site. You can:
Download the jQuery library from jQuery.com
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>
Tuesday, July 30, 13
45. J
Q
U
E
R
Y
INSTALL
Include jQuery from a CDN, like Google
If you don't want to download and host jQuery yourself,
Adding jQuery to Your Web Pages
Tuesday, July 30, 13
46. J
Q
U
E
R
Y
INSTALL
Include jQuery from a CDN, like Google
If you don't want to download and host jQuery yourself,
you can include it from a CDN (Content Delivery Network).
Adding jQuery to Your Web Pages
Tuesday, July 30, 13
47. J
Q
U
E
R
Y
INSTALL
Include jQuery from a CDN, like Google
If you don't want to download and host jQuery yourself,
you can include it from a CDN (Content Delivery Network).
Both Google and Microsoft host jQuery.
Adding jQuery to Your Web Pages
Tuesday, July 30, 13
48. J
Q
U
E
R
Y
INSTALL
Include jQuery from a CDN, like Google
If you don't want to download and host jQuery yourself,
you can include it from a CDN (Content Delivery Network).
Both Google and Microsoft host jQuery.
To use jQuery from Google or Microsoft, use one of the following:
Adding jQuery to Your Web Pages
Tuesday, July 30, 13
49. J
Q
U
E
R
Y
INSTALL
Include jQuery from a CDN, like Google
If you don't want to download and host jQuery yourself,
you can include it from a CDN (Content Delivery Network).
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>
Adding jQuery to Your Web Pages
Tuesday, July 30, 13
50. J
Q
U
E
R
Y
INSTALL
Include jQuery from a CDN, like Google
If you don't want to download and host jQuery yourself,
you can include it from a CDN (Content Delivery Network).
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>
MICROSOFT CDN
<head>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.2.min.js">
</script>
</head>
Adding jQuery to Your Web Pages
Tuesday, July 30, 13
53. J
Q
U
E
R
Y
SYNTAX
jQuery syntax is tailor made for selecting HTML elements and
performing some action on the element(s).
Tuesday, July 30, 13
54. J
Q
U
E
R
Y
SYNTAX
jQuery syntax is tailor made for selecting HTML elements and
performing some action on the element(s).
Basic syntax is:
Tuesday, July 30, 13
55. J
Q
U
E
R
Y
SYNTAX
jQuery syntax is tailor made for selecting HTML elements and
performing some action on the element(s).
Basic syntax is: (selector).action()$
Tuesday, July 30, 13
56. J
Q
U
E
R
Y
SYNTAX
jQuery syntax is tailor made for selecting HTML elements and
performing some action on the element(s).
Basic syntax is:
$ sign to define/access jQuery
(selector).action()$
Tuesday, July 30, 13
57. J
Q
U
E
R
Y
SYNTAX
jQuery syntax is tailor made for selecting HTML elements and
performing some action on the element(s).
Basic syntax is:
$ sign to define/access jQuery
(selector) to "query (or find)" HTML elements
(selector).action()$
Tuesday, July 30, 13
58. J
Q
U
E
R
Y
SYNTAX
jQuery syntax is tailor made for selecting HTML elements and
performing some action on the element(s).
Basic syntax is:
jQuery action() to be performed on the element(s)
$ sign to define/access jQuery
(selector) to "query (or find)" HTML elements
(selector).action()$
Tuesday, July 30, 13
59. J
Q
U
E
R
Y
SYNTAX
jQuery syntax is tailor made for selecting HTML elements and
performing some action on the element(s).
Basic syntax is:
jQuery action() to be performed on the element(s)
$ sign to define/access jQuery
(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
(selector).action()$
Tuesday, July 30, 13
60. J
Q
U
E
R
Y
SYNTAX
Document Ready Event
jQuery syntax is tailor made for selecting HTML elements and
performing some action on the element(s).
prevent any jQuery code from running before the
document is finished loading (is ready).
$(document).ready(function(){
// jQuery methods go here...
});
Basic syntax is:
jQuery action() to be performed on the element(s)
$ sign to define/access jQuery
(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
(selector).action()$
Tuesday, July 30, 13
61. J
Q
U
E
R
Y
SYNTAX
Document Ready Event
jQuery syntax is tailor made for selecting HTML elements and
performing some action on the element(s).
prevent any jQuery code from running before the
document is finished loading (is ready).
$(document).ready(function(){
// jQuery methods go here...
});
Basic syntax is:
jQuery action() to be performed on the element(s)
$ sign to define/access jQuery
(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
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.
(selector).action()$
Tuesday, July 30, 13
65. J
Q
U
E
R
Y
SELECTORS allows you to select and manipulate HTML element(s).
used to "find" (or select) HTML elements based on their id, classes, types, attributes,
Tuesday, July 30, 13
66. J
Q
U
E
R
Y
SELECTORS allows you to select and manipulate HTML element(s).
used to "find" (or select) HTML elements based on their id, classes, types, attributes,
values of attributes and much more.
Tuesday, July 30, 13
67. J
Q
U
E
R
Y
SELECTORS allows you to select and manipulate HTML element(s).
used to "find" (or select) HTML elements based on their id, classes, types, attributes,
values of attributes and much more.
based on the existing CSS Selectors, and in addition, it has some own custom selectors.
Tuesday, July 30, 13
68. J
Q
U
E
R
Y
SELECTORS allows you to select and manipulate HTML element(s).
used to "find" (or select) HTML elements based on their id, classes, types, attributes,
values of attributes and much more.
based on the existing CSS Selectors, and in addition, it has some own custom selectors.
All selectors in jQuery start with the dollar sign and parentheses: $().
Tuesday, July 30, 13
69. J
Q
U
E
R
Y
SELECTORS allows you to select and manipulate HTML element(s).
used to "find" (or select) HTML elements based on their id, classes, types, attributes,
values of attributes and much more.
based on the existing CSS Selectors, and in addition, it has some own custom selectors.
All selectors in jQuery start with the dollar sign and parentheses: $().
SELECTORS
Tuesday, July 30, 13
70. J
Q
U
E
R
Y
SELECTORS allows you to select and manipulate HTML element(s).
used to "find" (or select) HTML elements based on their id, classes, types, attributes,
values of attributes and much more.
based on the existing CSS Selectors, and in addition, it has some own custom selectors.
All selectors in jQuery start with the dollar sign and parentheses: $().
SELECTORS
EXAMPLE:
Tuesday, July 30, 13
71. J
Q
U
E
R
Y
SELECTORS allows you to select and manipulate HTML element(s).
used to "find" (or select) HTML elements based on their id, classes, types, attributes,
values of attributes and much more.
based on the existing CSS Selectors, and in addition, it has some own custom selectors.
All selectors in jQuery start with the dollar sign and parentheses: $().
SELECTORS
When a user clicks on a button, selected elements will be hidden:
EXAMPLE:
Tuesday, July 30, 13
72. 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>
$(document).ready(function(){
$("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).
used to "find" (or select) HTML elements based on their id, classes, types, attributes,
values of attributes and much more.
based on the existing CSS Selectors, and in addition, it has some own custom selectors.
All selectors in jQuery start with the dollar sign and parentheses: $().
SELECTORS
When a user clicks on a button, selected elements will be hidden:
EXAMPLE:
Tuesday, July 30, 13
73. 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>
$(document).ready(function(){
$("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).
used to "find" (or select) HTML elements based on their id, classes, types, attributes,
values of attributes and much more.
based on the existing CSS Selectors, and in addition, it has some own custom selectors.
All selectors in jQuery start with the dollar sign and parentheses: $().
When a user clicks on a button, selected elements will be hidden:
EXAMPLE:
Tuesday, July 30, 13
74. 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>
$(document).ready(function(){
$("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).
used to "find" (or select) HTML elements based on their id, classes, types, attributes,
values of attributes and much more.
based on the existing CSS Selectors, and in addition, it has some own custom selectors.
All selectors in jQuery start with the dollar sign and parentheses: $().
When a user clicks on a button, selected elements will be hidden:
EXAMPLE:
Tuesday, July 30, 13
75. 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>
$(document).ready(function(){
$("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).
used to "find" (or select) HTML elements based on their id, classes, types, attributes,
values of attributes and much more.
based on the existing CSS Selectors, and in addition, it has some own custom selectors.
All selectors in jQuery start with the dollar sign and parentheses: $().
When a user clicks on a button, selected elements will be hidden:
EXAMPLE:
Tuesday, July 30, 13
78. 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".
Tuesday, July 30, 13
79. 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".
Here are some common DOM events:
Tuesday, July 30, 13
80. 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".
jQuery Syntax For Event Methods
Here are some common DOM events:
Tuesday, July 30, 13
81. 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".
jQuery Syntax For Event Methods
Here are some common DOM events:
To assign a click event to all paragraphs on a page, you can do this:
Tuesday, July 30, 13
82. 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".
jQuery Syntax For Event Methods
Here are some common DOM events:
To assign a click event to all paragraphs on a page, you can do this:
$("p").click();
Tuesday, July 30, 13
83. 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".
jQuery Syntax For Event Methods
Here are some common DOM events:
To assign a click event to all paragraphs on a page, you can do this:
$("p").click();
The next step is to define what should happen when the event
fires. You must pass a function to the event:
Tuesday, July 30, 13
84. 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".
jQuery Syntax For Event Methods
Here are some common DOM events:
To assign a click event to all paragraphs on a page, you can do this:
$("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!!
});
Tuesday, July 30, 13
88. J
Q
U
E
R
Y
EVENTS
Commonly Used jQuery Event Methods
click()
attaches an event handler function to an
HTML element. The function is executed
when the user clicks on the HTML element.
Tuesday, July 30, 13
89. J
Q
U
E
R
Y
EVENTS
Commonly Used jQuery Event Methods
click()
attaches an event handler function to an
HTML element. The function is executed
when the user clicks on the HTML element.
$("p").click(function(){
$(this).hide();
});
Tuesday, July 30, 13
90. J
Q
U
E
R
Y
EVENTS
Commonly Used jQuery Event Methods
click()
attaches an event handler function to an
HTML element. The function is executed
when the user clicks on the HTML element.
$("p").click(function(){
$(this).hide();
});
mouseenter()
Tuesday, July 30, 13
91. J
Q
U
E
R
Y
EVENTS
Commonly Used jQuery Event Methods
click()
attaches an event handler function to an
HTML element. The function is executed
when the user clicks on the HTML element.
$("p").click(function(){
$(this).hide();
});
function is executed when the mouse
pointer enters the HTML element:
mouseenter()
Tuesday, July 30, 13
92. J
Q
U
E
R
Y
EVENTS
Commonly Used jQuery Event Methods
click()
attaches an event handler function to an
HTML element. The function is executed
when the user clicks on the HTML element.
$("p").click(function(){
$(this).hide();
});
function is executed when the mouse
pointer enters the HTML element:
$("#p1").mouseenter(function(){
alert("You entered p1!");
});
mouseenter()
Tuesday, July 30, 13
93. J
Q
U
E
R
Y
EVENTS
Commonly Used jQuery Event Methods
click()
attaches an event handler function to an
HTML element. The function is executed
when the user clicks on the HTML element.
$("p").click(function(){
$(this).hide();
});
function is executed when the mouse
pointer enters the HTML element:
$("#p1").mouseenter(function(){
alert("You entered p1!");
});
mouseenter()
mousedown()
Tuesday, July 30, 13
94. J
Q
U
E
R
Y
EVENTS
Commonly Used jQuery Event Methods
click()
attaches an event handler function to an
HTML element. The function is executed
when the user clicks on the HTML element.
$("p").click(function(){
$(this).hide();
});
function is executed when the mouse
pointer enters the HTML element:
$("#p1").mouseenter(function(){
alert("You entered p1!");
});
mouseenter()
function is executed, when the left mouse
button is pressed down, while the mouse is
over the HTML element:
mousedown()
Tuesday, July 30, 13
95. J
Q
U
E
R
Y
EVENTS
Commonly Used jQuery Event Methods
click()
attaches an event handler function to an
HTML element. The function is executed
when the user clicks on the HTML element.
$("p").click(function(){
$(this).hide();
});
function is executed when the mouse
pointer enters the HTML element:
$("#p1").mouseenter(function(){
alert("You entered p1!");
});
mouseenter()
function is executed, when the left mouse
button is pressed down, while the mouse is
over the HTML element:
$("#p1").mousedown(function(){
alert("Mouse down over p1!");
});
mousedown()
Tuesday, July 30, 13
98. J
Q
U
E
R
Y
EVENTS
Commonly Used jQuery Event Methods
mouseup()
function is executed, when the left mouse
button is released, while the mouse is over
the HTML element:
Tuesday, July 30, 13
99. J
Q
U
E
R
Y
EVENTS
Commonly Used jQuery Event Methods
mouseup()
function is executed, when the left mouse
button is released, while the mouse is over
the HTML element:
$("#p1").mouseup(function(){
alert("Mouse up over p1!");
});
Tuesday, July 30, 13
100. J
Q
U
E
R
Y
EVENTS
Commonly Used jQuery Event Methods
mouseup()
function is executed, when the left mouse
button is released, while the mouse is over
the HTML element:
$("#p1").mouseup(function(){
alert("Mouse up over p1!");
});
hover()
Tuesday, July 30, 13
101. J
Q
U
E
R
Y
EVENTS
Commonly Used jQuery Event Methods
mouseup()
function is executed, when the left mouse
button is released, while the mouse is over
the HTML element:
$("#p1").mouseup(function(){
alert("Mouse up over p1!");
});
first function is executed when the mouse
enters the HTML element, and the second
function is executed when the mouse
leaves the HTML element:
hover()
Tuesday, July 30, 13
102. J
Q
U
E
R
Y
EVENTS
Commonly Used jQuery Event Methods
mouseup()
function is executed, when the left mouse
button is released, while the mouse is over
the HTML element:
$("#p1").mouseup(function(){
alert("Mouse up over p1!");
});
first function is executed when the mouse
enters the HTML element, and the second
function is executed when the mouse
leaves the HTML element:
$("#p1").hover(function(){
alert("You entered p1!");
},
function(){
alert("Bye! You now leave p1!");
});
hover()
Tuesday, July 30, 13
103. J
Q
U
E
R
Y
EVENTS
Commonly Used jQuery Event Methods
mouseup()
function is executed, when the left mouse
button is released, while the mouse is over
the HTML element:
$("#p1").mouseup(function(){
alert("Mouse up over p1!");
});
first function is executed when the mouse
enters the HTML element, and the second
function is executed when the mouse
leaves the HTML element:
$("#p1").hover(function(){
alert("You entered p1!");
},
function(){
alert("Bye! You now leave p1!");
});
hover()
Tuesday, July 30, 13
104. J
Q
U
E
R
Y
EVENTS
Commonly Used jQuery Event Methods
mouseup()
function is executed, when the left mouse
button is released, while the mouse is over
the HTML element:
$("#p1").mouseup(function(){
alert("Mouse up over p1!");
});
first function is executed when the mouse
enters the HTML element, and the second
function is executed when the mouse
leaves the HTML element:
$("#p1").hover(function(){
alert("You entered p1!");
},
function(){
alert("Bye! You now leave p1!");
});
hover()
Tuesday, July 30, 13
105. J
Q
U
E
R
Y
EVENTS
Commonly Used jQuery Event Methods
mouseup()
function is executed, when the left mouse
button is released, while the mouse is over
the HTML element:
$("#p1").mouseup(function(){
alert("Mouse up over p1!");
});
first function is executed when the mouse
enters the HTML element, and the second
function is executed when the mouse
leaves the HTML element:
$("#p1").hover(function(){
alert("You entered p1!");
},
function(){
alert("Bye! You now leave p1!");
});
hover()
dblclick()
Tuesday, July 30, 13
106. J
Q
U
E
R
Y
EVENTS
Commonly Used jQuery Event Methods
mouseup()
function is executed, when the left mouse
button is released, while the mouse is over
the HTML element:
$("#p1").mouseup(function(){
alert("Mouse up over p1!");
});
first function is executed when the mouse
enters the HTML element, and the second
function is executed when the mouse
leaves the HTML element:
$("#p1").hover(function(){
alert("You entered p1!");
},
function(){
alert("Bye! You now leave p1!");
});
hover()
function is executed when the user double-
clicks on the HTML element:
dblclick()
Tuesday, July 30, 13
107. J
Q
U
E
R
Y
EVENTS
Commonly Used jQuery Event Methods
mouseup()
function is executed, when the left mouse
button is released, while the mouse is over
the HTML element:
$("#p1").mouseup(function(){
alert("Mouse up over p1!");
});
first function is executed when the mouse
enters the HTML element, and the second
function is executed when the mouse
leaves the HTML element:
$("#p1").hover(function(){
alert("You entered p1!");
},
function(){
alert("Bye! You now leave p1!");
});
hover()
function is executed when the user double-
clicks on the HTML element:
$("p").dblclick(function(){
$(this).hide();
});
dblclick()
Tuesday, July 30, 13
108. J
Q
U
E
R
Y
EVENTS
Commonly Used jQuery Event Methods
mouseup()
function is executed, when the left mouse
button is released, while the mouse is over
the HTML element:
$("#p1").mouseup(function(){
alert("Mouse up over p1!");
});
first function is executed when the mouse
enters the HTML element, and the second
function is executed when the mouse
leaves the HTML element:
$("#p1").hover(function(){
alert("You entered p1!");
},
function(){
alert("Bye! You now leave p1!");
});
hover()
function is executed when the user double-
clicks on the HTML element:
$("p").dblclick(function(){
$(this).hide();
});
dblclick()
Tuesday, July 30, 13
109. J
Q
U
E
R
Y
EVENTS
Commonly Used jQuery Event Methods
mouseup()
function is executed, when the left mouse
button is released, while the mouse is over
the HTML element:
$("#p1").mouseup(function(){
alert("Mouse up over p1!");
});
first function is executed when the mouse
enters the HTML element, and the second
function is executed when the mouse
leaves the HTML element:
$("#p1").hover(function(){
alert("You entered p1!");
},
function(){
alert("Bye! You now leave p1!");
});
hover()
function is executed when the user double-
clicks on the HTML element:
$("p").dblclick(function(){
$(this).hide();
});
dblclick()
Tuesday, July 30, 13
118. 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
TOGGLE
SYNTAX:
$(selector).toggle(speed,callback);
optional speed parameter can take the following values: "slow", "fast", or milliseconds.
Tuesday, July 30, 13
119. 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
TOGGLE
SYNTAX:
$(selector).toggle(speed,callback);
optional speed parameter can take the following values: "slow", "fast", or milliseconds.
optional callback parameter is a function to be executed after toggle()
completes.
Tuesday, July 30, 13
129. J
Q
U
E
R
Y
EFFECTS
SYNTAX:
FADING
$(selector).fadeIn(speed,callback);
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()
SYNTAX: $(selector).fadeOut(speed,callback);
fadeOut()
SYNTAX: $(selector).fadeToggle(speed,callback);
fadeToggle()
SYNTAX: $(selector).fadeOut(speed,opacity,callback);
fadeTo()
Tuesday, July 30, 13
130. J
Q
U
E
R
Y
EFFECTS
SYNTAX:
FADING
$(selector).fadeIn(speed,callback);
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()
SYNTAX: $(selector).fadeOut(speed,callback);
fadeOut()
SYNTAX: $(selector).fadeToggle(speed,callback);
fadeToggle()
SYNTAX: $(selector).fadeOut(speed,opacity,callback);
fadeTo()
optional callback parameter is a function to be executed after the
function completes.
Tuesday, July 30, 13
131. J
Q
U
E
R
Y
EFFECTS
SYNTAX:
FADING
$(selector).fadeIn(speed,callback);
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()
SYNTAX: $(selector).fadeOut(speed,callback);
fadeOut()
SYNTAX: $(selector).fadeToggle(speed,callback);
fadeToggle()
SYNTAX: $(selector).fadeOut(speed,opacity,callback);
fadeTo()
optional callback parameter is a function to be executed after the
function completes.
SLIDE
Tuesday, July 30, 13
132. J
Q
U
E
R
Y
EFFECTS
SYNTAX:
FADING
$(selector).fadeIn(speed,callback);
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()
SYNTAX: $(selector).fadeOut(speed,callback);
fadeOut()
SYNTAX: $(selector).fadeToggle(speed,callback);
fadeToggle()
SYNTAX: $(selector).fadeOut(speed,opacity,callback);
fadeTo()
optional callback parameter is a function to be executed after the
function completes.
SLIDE
slideDown()
Tuesday, July 30, 13
133. J
Q
U
E
R
Y
EFFECTS
SYNTAX:
FADING
$(selector).fadeIn(speed,callback);
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()
SYNTAX: $(selector).fadeOut(speed,callback);
fadeOut()
SYNTAX: $(selector).fadeToggle(speed,callback);
fadeToggle()
SYNTAX: $(selector).fadeOut(speed,opacity,callback);
fadeTo()
optional callback parameter is a function to be executed after the
function completes.
SLIDE
SYNTAX: $(selector).slideDown(speed,callback);
slideDown()
Tuesday, July 30, 13
134. J
Q
U
E
R
Y
EFFECTS
SYNTAX:
FADING
$(selector).fadeIn(speed,callback);
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()
SYNTAX: $(selector).fadeOut(speed,callback);
fadeOut()
SYNTAX: $(selector).fadeToggle(speed,callback);
fadeToggle()
SYNTAX: $(selector).fadeOut(speed,opacity,callback);
fadeTo()
optional callback parameter is a function to be executed after the
function completes.
SLIDE
SYNTAX: $(selector).slideDown(speed,callback);
slideDown()
slideUp()
Tuesday, July 30, 13
135. J
Q
U
E
R
Y
EFFECTS
SYNTAX:
FADING
$(selector).fadeIn(speed,callback);
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()
SYNTAX: $(selector).fadeOut(speed,callback);
fadeOut()
SYNTAX: $(selector).fadeToggle(speed,callback);
fadeToggle()
SYNTAX: $(selector).fadeOut(speed,opacity,callback);
fadeTo()
optional callback parameter is a function to be executed after the
function completes.
SLIDE
SYNTAX: $(selector).slideDown(speed,callback);
slideDown()
SYNTAX: $(selector).slideUp(speed,callback);
slideUp()
Tuesday, July 30, 13
136. J
Q
U
E
R
Y
EFFECTS
SYNTAX:
FADING
$(selector).fadeIn(speed,callback);
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()
SYNTAX: $(selector).fadeOut(speed,callback);
fadeOut()
SYNTAX: $(selector).fadeToggle(speed,callback);
fadeToggle()
SYNTAX: $(selector).fadeOut(speed,opacity,callback);
fadeTo()
optional callback parameter is a function to be executed after the
function completes.
SLIDE
SYNTAX: $(selector).slideDown(speed,callback);
slideDown()
SYNTAX: $(selector).slideUp(speed,callback);
slideUp()
SlideToggle()
Tuesday, July 30, 13
137. J
Q
U
E
R
Y
EFFECTS
SYNTAX:
FADING
$(selector).fadeIn(speed,callback);
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()
SYNTAX: $(selector).fadeOut(speed,callback);
fadeOut()
SYNTAX: $(selector).fadeToggle(speed,callback);
fadeToggle()
SYNTAX: $(selector).fadeOut(speed,opacity,callback);
fadeTo()
optional callback parameter is a function to be executed after the
function completes.
SLIDE
SYNTAX: $(selector).slideDown(speed,callback);
slideDown()
SYNTAX: $(selector).slideUp(speed,callback);
slideUp()
SYNTAX: $(selector).slideToggle(speed,callback);
SlideToggle()
Tuesday, July 30, 13
142. 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.
optional callback parameter is a function to be executed after the
animation completes.
EXAMPLES:
$("button").click(function(){
$("div").animate({left:'250px'});
});
Tuesday, July 30, 13
143. 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.
optional callback parameter is a function to be executed after the
animation completes.
EXAMPLES:
$("button").click(function(){
$("div").animate({left:'250px'});
});
$("button").click(function(){
$("div").animate({
left:'250px',
opacity:'0.5',
height:'150px',
width:'150px'
});
});
Tuesday, July 30, 13
144. 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.
optional callback parameter is a function to be executed after the
animation completes.
EXAMPLES:
$("button").click(function(){
$("div").animate({left:'250px'});
});
$("button").click(function(){
$("div").animate({
left:'250px',
opacity:'0.5',
height:'150px',
width:'150px'
});
});
Tuesday, July 30, 13
145. 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.
optional callback parameter is a function to be executed after the
animation completes.
$("button").click(function(){
$("div").animate({
left:'250px',
height:'+=150px',
width:'+=150px'
});
});
animate() - Using Relative Values
EXAMPLES:
$("button").click(function(){
$("div").animate({left:'250px'});
});
$("button").click(function(){
$("div").animate({
left:'250px',
opacity:'0.5',
height:'150px',
width:'150px'
});
});
Tuesday, July 30, 13
146. 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.
optional callback parameter is a function to be executed after the
animation completes.
$("button").click(function(){
$("div").animate({
left:'250px',
height:'+=150px',
width:'+=150px'
});
});
animate() - Using Relative Values
EXAMPLES:
$("button").click(function(){
$("div").animate({left:'250px'});
});
$("button").click(function(){
$("div").animate({
left:'250px',
opacity:'0.5',
height:'150px',
width:'150px'
});
});
animate() - Using Pre-defined Values
$("button").click(function(){
$("div").animate({
height:'toggle'
});
});
Tuesday, July 30, 13
147. 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.
optional callback parameter is a function to be executed after the
animation completes.
$("button").click(function(){
$("div").animate({
left:'250px',
height:'+=150px',
width:'+=150px'
});
});
animate() - Using Relative Values
EXAMPLES:
$("button").click(function(){
$("div").animate({left:'250px'});
});
$("button").click(function(){
$("div").animate({
left:'250px',
opacity:'0.5',
height:'150px',
width:'150px'
});
});
animate() - Using Pre-defined Values
$("button").click(function(){
$("div").animate({
height:'toggle'
});
});
animate() - Using Queue Functionality
$("button").click(function(){
var div=$("div");
div.animate({height:'300px',opacity:'0.4'},"slow");
div.animate({width:'300px',opacity:'0.8'},"slow");
div.animate({height:'100px',opacity:'0.4'},"slow");
div.animate({width:'100px',opacity:'0.8'},"slow");
});
Tuesday, July 30, 13
148. 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.
optional callback parameter is a function to be executed after the
animation completes.
$("button").click(function(){
$("div").animate({
left:'250px',
height:'+=150px',
width:'+=150px'
});
});
animate() - Using Relative Values
EXAMPLES:
$("button").click(function(){
$("div").animate({left:'250px'});
});
$("button").click(function(){
$("div").animate({
left:'250px',
opacity:'0.5',
height:'150px',
width:'150px'
});
});
animate() - Using Pre-defined Values
$("button").click(function(){
$("div").animate({
height:'toggle'
});
});
animate() - Using Queue Functionality
$("button").click(function(){
var div=$("div");
div.animate({height:'300px',opacity:'0.4'},"slow");
div.animate({width:'300px',opacity:'0.8'},"slow");
div.animate({height:'100px',opacity:'0.4'},"slow");
div.animate({width:'100px',opacity:'0.8'},"slow");
});
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.
Tuesday, July 30, 13
149. 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.
optional callback parameter is a function to be executed after the
animation completes.
$("button").click(function(){
$("div").animate({
left:'250px',
height:'+=150px',
width:'+=150px'
});
});
animate() - Using Relative Values
EXAMPLES:
$("button").click(function(){
$("div").animate({left:'250px'});
});
$("button").click(function(){
$("div").animate({
left:'250px',
opacity:'0.5',
height:'150px',
width:'150px'
});
});
animate() - Using Pre-defined Values
$("button").click(function(){
$("div").animate({
height:'toggle'
});
});
animate() - Using Queue Functionality
$("button").click(function(){
var div=$("div");
div.animate({height:'300px',opacity:'0.4'},"slow");
div.animate({width:'300px',opacity:'0.8'},"slow");
div.animate({height:'100px',opacity:'0.4'},"slow");
div.animate({width:'100px',opacity:'0.8'},"slow");
});
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.
stop()
Tuesday, July 30, 13
150. 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.
optional callback parameter is a function to be executed after the
animation completes.
$("button").click(function(){
$("div").animate({
left:'250px',
height:'+=150px',
width:'+=150px'
});
});
animate() - Using Relative Values
EXAMPLES:
$("button").click(function(){
$("div").animate({left:'250px'});
});
$("button").click(function(){
$("div").animate({
left:'250px',
opacity:'0.5',
height:'150px',
width:'150px'
});
});
animate() - Using Pre-defined Values
$("button").click(function(){
$("div").animate({
height:'toggle'
});
});
animate() - Using Queue Functionality
$("button").click(function(){
var div=$("div");
div.animate({height:'300px',opacity:'0.4'},"slow");
div.animate({width:'300px',opacity:'0.8'},"slow");
div.animate({height:'100px',opacity:'0.4'},"slow");
div.animate({width:'100px',opacity:'0.8'},"slow");
});
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.
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.
Tuesday, July 30, 13
153. J
Q
U
E
R
Y
EFFECTS
CHAINING
Chaining allows us to run multiple jQuery methods (on the same element) within a
single statement.
EXAMPLES:
$("#p1").css("color","red").slideUp(2000).slideDown(2000);
Tuesday, July 30, 13
154. J
Q
U
E
R
Y
EFFECTS
CHAINING
Chaining allows us to run multiple jQuery methods (on the same element) within a
single statement.
EXAMPLES:
$("#p1").css("color","red").slideUp(2000).slideDown(2000);
OR
$("#p1").css("color","red")
.slideUp(2000)
.slideDown(2000);
Tuesday, July 30, 13
155. J
Q
U
E
R
Y
EFFECTS
CHAINING
Chaining allows us to run multiple jQuery methods (on the same element) within a
single statement.
EXAMPLES:
$("#p1").css("color","red").slideUp(2000).slideDown(2000);
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.
Tuesday, July 30, 13
159. 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
Tuesday, July 30, 13
160. J
Q
U
E
R
Y
HTML
GET
EXAMPLES:
$("#btn1").click(function(){
alert("Text: " + $("#test").text());
});
$("#btn2").click(function(){
alert("HTML: " + $("#test").html());
});
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
Tuesday, July 30, 13
161. J
Q
U
E
R
Y
HTML
GET
EXAMPLES:
$("#btn1").click(function(){
alert("Text: " + $("#test").text());
});
$("#btn2").click(function(){
alert("HTML: " + $("#test").html());
});
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
Get Attributes - attr()
$("button").click(function(){
alert($("#w3s").attr("href"));
});
Tuesday, July 30, 13
162. J
Q
U
E
R
Y
HTML
GET
EXAMPLES:
$("#btn1").click(function(){
alert("Text: " + $("#test").text());
});
$("#btn2").click(function(){
alert("HTML: " + $("#test").html());
});
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
Get Attributes - attr()
$("button").click(function(){
alert($("#w3s").attr("href"));
});
SET
Tuesday, July 30, 13
163. J
Q
U
E
R
Y
HTML
GET
EXAMPLES:
$("#btn1").click(function(){
alert("Text: " + $("#test").text());
});
$("#btn2").click(function(){
alert("HTML: " + $("#test").html());
});
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
Get Attributes - attr()
$("button").click(function(){
alert($("#w3s").attr("href"));
});
SET
$("#btn1").click(function(){
$("#test1").text("Hello world!");
});
$("#btn2").click(function(){
$("#test2").html("<b>Hello world!</b>");
});
$("#btn3").click(function(){
$("#test3").val("Dolly Duck");
});
Tuesday, July 30, 13