jQuery
• jQuery is a lightweight, "write less, do more", JavaScript
library.
• The purpose of jQuery is to make it much easier to use
JavaScript on your website.
• 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.
2
jQuery
• The jQuery library contains the following features
• HTML/DOM manipulation
• CSS manipulation
• HTML event methods
• Effects and animations
• AJAX
• Utilities
3
jQuery has been developed with the following principles
• Separation of JavaScript and HTML, which encourages developers
to completely separate JavaScript code from HTML markup.
• Eliminates of cross-browser incompatibilities, so developers does
not need to worry about browser compatibility while writing code
using jQuery library.
• Extensibility, which means new events, elements, and methods
can be easily added in jQuery library and then reused as a plugin.
4
jQuery library
• Download the jQuery library from
[Link]
• Include jQuery from a CDN, like Google
<head>
<script src="[Link]"></script>
</head>
<head>
<script src="[Link]
</head>
5
jQuery
<html>
<head>
<title>The jQuery Example</title>
<script type = "text/javascript" src = "[Link]">
</script>
<script type = "text/javascript">
$(document).ready(function() {
[Link]("Hello, World!");
});
</script>
</head>
<body>
<h1>Hello</h1>
</body>
</html>
6
jQuery Selectors
• jQuery selectors allow to select and manipulate HTML
element(s).
• jQuery selectors are used to "find" (or select) HTML
elements based on their name, id, classes, types,
attributes, values of attributes and much more. It's 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: $().
7
The element Selector
The jQuery element selector selects elements based on the
element name.
Select all <p> elements on a page:
$("p")
Ex:
When a user clicks on a button, all <p> elements will be hidden
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
8
jQuery
Demo - [Link]
9
#id Selector
The jQuery #id selector uses the id attribute of an HTML tag
to find the specific element.
An id should be unique within a page, so use the #id selector
when want to find a single, unique element.
To find an element with a specific id, write a hash character,
followed by the id of the HTML element:
$("#demo")
10
#id Selector
<!DOCTYPE html>
<html>
<head>
<script
src="[Link]
<script>
$(document).ready(function(){
$("button").click(function(){
$("#demo").hide();
});
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p id=“demo">This is another paragraph.</p>
<button>Click me</button>
</body>
</html> 11
.class Selector
The jQuery .class selector finds elements with a specific class.
To find elements with a specific class, write a period
character, followed by the name of the class
$(".test")
12
More Examples of jQuery Selectors
$("*") Selects all elements
$(this) Selects the current HTML element
$("[Link]") Selects all <p> elements with class="intro"
$("p:first") Selects the first <p> element
$("ul li:first") Selects the first <li> element of the first <ul>
$("ul li:first-child") Selects the first <li> element of every <ul>
$("[href]") Selects all elements with an href attribute
$("a[target='_blank']") Selects all <a> elements with a target attribute value equal to "_blank"
$("a[target!='_blank']") Selects all <a> elements with a target attribute value NOT equal to "_blank"
$(":button") Selects all <button> elements and <input> elements of type="button"
$("tr:even") Selects all even <tr> elements
$("tr:odd") Selects all odd <tr> elements 13
jQuery Effects
jQuery enables us to add effects on a web page. jQuery effects can be categorized into fading, sliding,
hiding/showing and animation effects.
14
jQuery hide() and show()
With jQuery, can hide and show HTML elements with the hide() and show() methods
Eg: hide&[Link]
The optional speed parameter specifies the speed of the hiding/showing, and can take the
following values: "slow", "fast", or milliseconds.
$(selector).hide(speed,callback);
hide&[Link]
hide&[Link]
15
jQuery Effects - Fading
jQuery has the following fade methods:
fadeIn()
fadeOut()
Syntax:
fadeToggle()
$(selector).fadeIn(speed,callback);
fadeTo()
[Link]
16
jQuery animate() - Uses Queue Functionality
By default, jQuery comes with queue functionality for animations.
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.
So, if you want to perform different animations after each other, we take advantage of the
queue functionality
[Link]
[Link]
17
jQuery stop() Method
The jQuery stop() method is used to stop an animation or effect before it is finished.
The stop() method works for all jQuery effect functions, including sliding, fading and custom
animations.
Syntax:
$(selector).stop(stopAll,goToEnd);
[Link]
18
jQuery Callback Functions
not finished. This can create errors.
To prevent this, you can create a callback function.
A callback function is executed after the current effect is finished.
Typical syntax: $(selector).hide(speed,callback);
Examples
[Link]
19
jQuery HTML
Set Content - text(), html(), and val()
We will use the same three methods from the previous page to set content:
• 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
• The following example demonstrates how to set content with the jQuery text(), html(),
and val() methods:
[Link]
20
A Callback Function for text(), html(), and val()
All of the three jQuery methods above: text(), html(), and val(), also come with a callback
function. The callback function has two parameters: the index of the current element in the
list of elements selected and the original (old) value. You then return the string you wish to
use as the new value from the function.
[Link]
21
jQuery Events
jQuery events are the actions that can be detected by the web application.
They are used to create dynamic web pages.
An event shows the exact moment when something happens.
• A mouse click
• An HTML form submission
• A web page loading
• A keystroke on the keyboard
• Scrolling of the web page etc
22
jQuery Events
Mouse Events Keyboard Form Events Document
Events Events
click keypress submit load
dblclick keydown change resize
hover keyup select scroll
mousedown blur unload
mouseup focusin ready
23
Syntax for event methods
Most of the DOM events have an equivalent jQuery method. To
assign a click events to all paragraph on a page.
$("p").click(function(){
alert("This paragraph was clicked.");
});
[Link]
24
jQuery mouseenter()
The mouseenter() method adds an event handler function to an HTML
element. This function is executed, when the mouse pointer enters the
HTML element.
When you enter the mouse cursor over the selected element, it triggers the
mouseenter event and once the mouseenter event is occurred, it executes
the mouseenter() method to attach the event handler function to run.
[Link]
25