jQuery
Javascript Query Language
What is jQuery?
• jQuery is a popular Javascript framework
specialized for changing web page documents
on the fly
– create impressive animations and interactions
– simple to understand and easy to use
– cross-browser compatibility
jQuery versions
• jQuery, at its core, is a Javascript library designed for DOM
manipulation
– The DOM is a tree structure representation of all the elements of a
web-page, and jQuery makes finding, selecting, and manipulating
these DOM elements simple and convenient
• jQuery Mobile is a version of the core, that is a touch-optimized
HTML5 UI framework. It is designed to make responsive web sites
and apps that are accessible on all smartphone, tablet and desktop
devices
• jQuery UI is a version of the core, that is a widget and interaction
library built on top of the jQuery JavaScript Library - used to build
highly interactive web applications (drag, drop, datepicker, slider,
tabs, etc.) jqueryui.com.
What do we mean by DOM?
HTML
HEAD
BODY
TITLE
“My Pets”
DIV
P
“This is a
picture of my
pet”
UL
IMG
LI
LI
LI
Dog
Cat
Fish
Where do you get it?
• Requires jQuery library
– Download at www.jQuery.com
– Refer to it in your page
<script src=scripts/jquery-1.5.2.min.js></script>
-OR– Refer to one of the online versions
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js">
</script>
How does it work?
• Takes advantage of CSS selectors
How jQuery interacts with elements
• CSS selectors
• TAGS
– H1 { text-align: left;}
• CLASSES
– .my_class {
position:absolute;}
• ID’s
– #my_id { color:#0033ff; }
• jQuery selectors
• TAGS
– $(“h1”).hide();
• CLASSES
– $(“.my_class”).slideUp();
• ID’s
– $(“#my_id”).fadeOut();
jQuery selectors
jQuery using the #id selector
jQuery using the .class selector
jQuery actions
jQuery Animation effect functions
•
•
•
•
•
•
•
•
•
slideUp()
slideDown()
slideToggle(speed – slow/fast)
fadeIn(speed in ms)
fadeout
fadeTo
fadeToggle
Hide
show
EXAMPLES
Launching code when document is ready
window.onload = function()
{
alert(“the page is loaded”);
}
– Problem
• code isn't run until all content is downloaded
•
jQuery checks the document and waits until it's ready to be manipulated
$(document).ready(function()
{
alert(“the page is loaded”);
}
);
Assigning an action when page loads
• Let’s say you have an <a> element in your
page with an id of “buynow” and you want to
assign a click handler to the click event on that
element :
jQuery makes it easy to control the
DOM
•To change the HTML INSIDE of 5 paragraphs on the page,
you would code
for (i=0;i<5;i++)
{
document.getElementByTagName(“p”)[i].innerHTML = “change text”;
}
• With jQuery:
$(“p”).html(“change text”);
Last Example
<script>
$(document).ready(function()
{
$(“button”).click(function()
{
$(“h1”).hide(“slow”);
$(“h2”).show(“fast”);
$(“img”).slideup();
}
}
</script>