jQuery is a JavaScript Library.
jQuery greatly simplifies JavaScript
programming.
jQuery is easy to learn.
What
is jQuery?
jQuery is a library of JavaScript
Functions.
jQuery is a lightweight "write less,
do more" JavaScript library.
The
jQuery library contains the following features:
HTML element selections
HTML element manipulation
CSS manipulation
HTML event functions
JavaScript Effects and animations
HTML DOM traversal and modification
AJAX
Utilities
Adding the jQuery Library to Your Pages
The jQuery library is stored as a single
JavaScript file, containing all the jQuery methods.
It can be added to a web page with the
following mark-up:
<head>
<script type="text/javascript"
src="jquery.js"></script>
</head>
The following example demonstrates the
jQuery hide() method, hiding all <p> elements in an HTML document.
<!DOCTYPE html>
<html><head><script
type="text/javascript" src="jquery.js"></script>
<script
type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another
paragraph.</p>
<button>Click me</button>
</body>
</html>
jQuery
Syntax Examples
$(this).hide()
Demonstrates the jQuery hide() method, hiding
the current HTML element.
$("#test").hide()
Demonstrates the jQuery hide() method, hiding
the element with id="test".
$("p").hide()
Demonstrates the jQuery hide() method,
hiding all <p> elements.
$(".test").hide()
Demonstrates the jQuery hide() method,
hiding all elements with class="test".
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)
Examples:
$(this).hide() - hides current element.
$("p").hide() - hides all
paragraphs.
$("p.test").hide() - hides all
paragraphs with class="test".
$("#test").hide() - hides the
element with id="test".
The
Document Ready Function
You might have noticed that all jQuery
methods, in our examples, are inside a document.ready() function:
$(document).ready(function(){
//
jQuery functions go here...
});
jQuery
Selectors
jQuery selectors are one of the most
important parts of the jQuery library.
jQuery selectors allow you to select and
manipulate HTML elements as a group or as a single element.
jQuery selectors are required at every step
while using jQuery. Selectors allow you to get the exact element/attribute you
want from your HTML document.
jQuery supports the existing CSS Selectors,
and in addition, it has some own custom selectors.
All type of selectors in jQuery, start with
the dollar sign and parentheses: $().
Examples
of jQuery Selectors
$("*") selects all elements.
$("p") selects all <p>
elements.
$("p.intro") selects all
<p> elements with class="intro".
$("p#intro") selects the first
<p> elements with id="intro".
$(":animated") selects all
elements that are currently animated.
$(":button") selects all
<button> elements and <input> elements of type="button".
$(":even") selects even elements.
$(":odd") selects odd elements.
Some More Examples
$(this):Selects the current HTML element
$("p#intro:first"):Selects the
first <p> element with id="intro"
$(".intro"):Selects all elements
with class="intro"
$("#intro"):Selects the first
element with id="intro"
$("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
$("[href$='.jpg']"):Selects all
elements with an href attribute that ends with ".jpg"
$("[href='#']"):Selects all
elements with an href value equal to "#"
$("[href!='#']"):Selects all
elements with an href value NOT equal to "#"
$("div#intro .head"):Selects all
elements with class="head" inside a <div> element with
id="intro"
jQuery
Event Functions
The jQuery event handling methods are core
functions in jQuery.
Event handlers are methods that are called
when "something happens" in HTML. The term "triggered (or
"fired") by an event" is often used.
It is common to put jQuery code into event
handler methods in the <head> section:
<!DOCTYPE html>
<html>
<head><script
type="text/javascript" src="jquery.js"></script>
<script
type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another
paragraph.</p>
<button>Click me</button>
</body>
</html>
In the example above, a function is called
when the click event for the button is triggered:
$("button").click(function()
{..some code... } )
The method hides all <p> elements:
$("p").hide();
jQuery
Name Conflicts
jQuery uses the $ sign as a shortcut for
jQuery.
Some other JavaScript libraries also use
the dollar sign for their functions.
The jQuery noConflict() method specifies a custom name (like jq), instead of
using the dollar sign.
jQuery
Events
Here
are some examples of event methods in jQuery:
Event Method Description
$(document).ready(function)
:Binds a function to the ready event of a document(when
the document is finished loading)
$(selector).click(function):Triggers, or binds a function to the click event of selected
elements
$(selector).dblclick(function):Triggers, or binds a function to the double click event of selected
elements
$(selector).focus(function):Triggers, or binds a function to the focus event of selected
elements
$(selector).mouseover(function):Triggers, or binds a function to the mouseover event of selected
elements
jQuery
Effects
Examples
jQuery hide()
Demonstrates a simple jQuery hide() method.
jQuery hide()
Another hide() demonstration. How to hide
parts of text.
jQuery slideToggle()
Demonstrates a simple slide panel effect.
jQuery fadeTo()
Demonstrates a simple jQuery fadeTo()
method.
jQuery animate()
Demonstrates a simple jQuery animate()
method.
jQuery
Hide and Show
jQuery Hide and Show
With jQuery, you can hide and show HTML elements
with the hide() and show() methods:
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});
Both hide() and show() can take the two
optional parameters: speed and callback.
Syntax:
$(selector).hide(speed,callback)
$(selector).show(speed,callback)
The speed parameter specifies the speed of
the hiding/showing, and can take the following values: "slow",
"fast", "normal", or milliseconds:
$("button").click(function(){
$("p").hide(1000);
});
The
jQuery toggle() method toggles the visibility of HTML elements using the show()
or hide() methods.
Shown elements are hidden and hidden
elements are shown.
Syntax:
$(selector).toggle(speed,callback)
The speed parameter can take the following
values: "slow", "fast", "normal", or
milliseconds.
$("button").click(function(){
$("p").toggle();
});
jQuery
Slide - slideDown, slideUp, slideToggle
The jQuery slide methods gradually change
the height for selected elements.
jQuery has the following slide methods:
$(selector).slideDown(speed,callback)
$(selector).slideUp(speed,callback)
$(selector).slideToggle(speed,callback)
The speed parameter can take the following
values: "slow", "fast", "normal", or
milliseconds.
The callback parameter is the name of a
function to be executed after the function completes.
EX:
$(".flip").click(function(){
$(".panel").slideUp()
})
$(".flip").click(function(){
$(".panel").slideToggle();
});
jQuery
Callback Functions
A callback function is executed after the
current animation is 100% finished.
jQuery Callback Functions
JavaScript statements are executed line by
line. However, with animations, the next line of code can be run even though
the animation is not finished. This can create errors.
To prevent this, you can create a callback
function.
A callback function is executed after the
current animation (effect) is finished.
jQuery
Callback Example
Typical syntax:
$(selector).hide(speed,callback)
The callback parameter is a function to be
executed after the hide effect is completed:
Example
with Callback
$("p").hide(1000,function(){
alert("The paragraph is now hidden");
});
Without a callback parameter, the alert box
is displayed before the hide effect is completed:
$("p").hide(1000);
alert("The paragraph is now
hidden");
jQuery
HTML Manipulation
jQuery contains powerful methods
(functions) for changing and manipulating HTML elements and attributes.
Changing
HTML Content
$(selector).html(content)
The html() method changes the contents
(innerHTML) of matching HTML elements.
EX:
$("p").html("W3Schools");
Adding
HTML content
$(selector).append(content)
The append() method appends content to the
inside of matching HTML elements.
$(selector).prepend(content)
The prepend() method "prepends"
content to the inside of matching HTML
elements.
EX:
$("p").append("
W3Schools");
EX:
$(selector).after(content)
The after() method inserts HTML content
after all matching elements.
$(selector).before(content)
The before() method inserts HTML content
before all matching elements.
EX:
$("p").after(" W3Schools.");
jQuery
css() Method
jQuery has one important method for CSS
manipulation: css()
The css() method has three different
syntaxes, to perform different tasks.
css(name) - Return CSS property value
css(name,value) - Set CSS property and
value
css({properties}) - Set multiple CSS
properties and values
Return
CSS Property
Use css(name) to return the specified CSS
property value of the FIRST matched element:
$(this).css("background-color");
Set
CSS Property and Value
Use css(name,value) to set the specified
CSS property for ALL matched elements:
$("p").css("background-color","yellow");
Set
Multiple CSS Property/Value Pairs
Use css({properties}) to set one or more
CSS property/value pairs for the selected elements:
$("p").css({"background-color":"yellow","font-size":"200%"});
jQuery
height() and width() Methods
jQuery has two important methods for size
manipulation.
height()
width()
Size
Manipulation Examples
The height() method sets the height of all
matching elements:
EX:
$("#div1").height("200px");
The width() method sets the width of all
matching elements:
$("#div2").width("300px");
jQuery
AJAX
jQuery has a rich library of methods
(functions) for AJAX development.
What is AJAX?
AJAX = Asynchronous JavaScript and XML.
AJAX is a technique for creating fast and
dynamic web pages.
AJAX allows web pages to be updated
asynchronously by exchanging small amounts of data with the server behind the
scenes. This means that it is possible to update parts of a web page, without
reloading the whole page.
AJAX
and jQuery
jQuery provides a rich set of methods for
AJAX web development.
With jQuery AJAX, you can request TXT,
HTML, XML or JSON data from a remote server using both HTTP Get and HTTP Post.
The jQuery load() method is a simple (but very powerful) AJAX function. It has
the following syntax:
$(selector).load(url,data,callback)
Use the selector to define the HTML
element(s) to change, and the url parameter to specify a web address for your
data.
