jQuery A Javascript Library Hard things made eas ( ier )
description
Transcript of jQuery A Javascript Library Hard things made eas ( ier )
![Page 1: jQuery A Javascript Library Hard things made eas ( ier )](https://reader035.fdocuments.us/reader035/viewer/2022081507/56816402550346895dd5a5c3/html5/thumbnails/1.jpg)
jQueryA Javascript Library
Hard things made eas(ier)
Norman White
![Page 2: jQuery A Javascript Library Hard things made eas ( ier )](https://reader035.fdocuments.us/reader035/viewer/2022081507/56816402550346895dd5a5c3/html5/thumbnails/2.jpg)
jQuery• Javascript Library to do many, many things
that would normally require intricate knowledge of javascript, different browsers, and different devices.
• (Fairly) easy to learn• You should try all the examples on
http://www.w3schools.com/jqueryOr take the code Academy JQuery course.http://www.codeacademy.com
![Page 3: jQuery A Javascript Library Hard things made eas ( ier )](https://reader035.fdocuments.us/reader035/viewer/2022081507/56816402550346895dd5a5c3/html5/thumbnails/3.jpg)
Simple exampleFunction which hides a <p> element when clicked
<html><head><script type="text/javascript" src="jquery.js"></script><script type="text/javascript">$(document).ready(function() { $("p").click(function() { $(this).hide(); }
); }
);</script></head>
<body><p>If you click on me, I will disappear.</p></body>
</html>
![Page 4: jQuery A Javascript Library Hard things made eas ( ier )](https://reader035.fdocuments.us/reader035/viewer/2022081507/56816402550346895dd5a5c3/html5/thumbnails/4.jpg)
jQuery Overview• 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
– jQuery mobile extends jQuery support to mobile devices with additional mobile oriented functionality.
![Page 5: jQuery A Javascript Library Hard things made eas ( ier )](https://reader035.fdocuments.us/reader035/viewer/2022081507/56816402550346895dd5a5c3/html5/thumbnails/5.jpg)
Using jQueryJust include the library
<head><script type="text/javascript" src="jquery.js"></script></head>
![Page 6: jQuery A Javascript Library Hard things made eas ( ier )](https://reader035.fdocuments.us/reader035/viewer/2022081507/56816402550346895dd5a5c3/html5/thumbnails/6.jpg)
Simple jQueryClick button to hide all paragraphs
(note the $, shorthand for jQuery())
<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 and things will be hidden</button></body></html>
![Page 7: jQuery A Javascript Library Hard things made eas ( ier )](https://reader035.fdocuments.us/reader035/viewer/2022081507/56816402550346895dd5a5c3/html5/thumbnails/7.jpg)
jQuery Syntax Examples$ indicates a jQuery statement
(Note CSS Style References)
• $(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".
![Page 8: jQuery A Javascript Library Hard things made eas ( ier )](https://reader035.fdocuments.us/reader035/viewer/2022081507/56816402550346895dd5a5c3/html5/thumbnails/8.jpg)
SyntaxSELECT some HTML Elements and perform some action on them
$(selector).action()
Usually define functions only after the document is finished loading, otherwise elements may not be there.
$(document).ready(function(){
// jQuery functions go here...
});
![Page 9: jQuery A Javascript Library Hard things made eas ( ier )](https://reader035.fdocuments.us/reader035/viewer/2022081507/56816402550346895dd5a5c3/html5/thumbnails/9.jpg)
jQuery Selectors
• jQuery Element Selectors• jQuery uses CSS selectors to select HTML
elements.• $("p") selects all <p> elements.• $("p.intro") selects all <p> elements with
class="intro".• $("p#demo") selects all <p> elements with
id="demo".
![Page 10: jQuery A Javascript Library Hard things made eas ( ier )](https://reader035.fdocuments.us/reader035/viewer/2022081507/56816402550346895dd5a5c3/html5/thumbnails/10.jpg)
• jQuery Attribute Selectors• jQuery uses XPath expressions to select elements with
given attributes.• $("[href]") select all elements with an href attribute.• $("[href='#']") select all elements with an href value
equal to "#".• $("[href!='#']") select all elements with an href attribute
NOT equal to "#".• $("[href$='.jpg']") select all elements with an href
attribute that ends with ".jpg".
![Page 11: jQuery A Javascript Library Hard things made eas ( ier )](https://reader035.fdocuments.us/reader035/viewer/2022081507/56816402550346895dd5a5c3/html5/thumbnails/11.jpg)
CSS Selectors
• jQuery CSS Selectors– jQuery CSS selectors can be used to change CSS
properties for HTML elements.– The following example changes the background-
color of all p elements to yellow:• Example• $("p").css("background-color","yellow");
![Page 12: jQuery A Javascript Library Hard things made eas ( ier )](https://reader035.fdocuments.us/reader035/viewer/2022081507/56816402550346895dd5a5c3/html5/thumbnails/12.jpg)
More ExamplesSyntax Description $(this) Current HTML element $("p") All <p> elements $("p.intro") All <p> elements with class="intro" $("p#intro") All <p> elements with id="intro" $("p#intro:first") The first <p> element with id="intro" $(".intro") All elements with class="intro" $("#intro") The first element with id="intro" $("ul li:first") The first <li> element of the first <ul> $("ul li:first-child") The first <li> element of every <ul> $(“ul li:nth-child(3)” The third <li> element of every <ul>$("[href$='.jpg']") All elements with an href attribute that ends with ".jpg" $("div#intro .head") All elements with class="head" inside a <div>
element with id="intro"
![Page 13: jQuery A Javascript Library Hard things made eas ( ier )](https://reader035.fdocuments.us/reader035/viewer/2022081507/56816402550346895dd5a5c3/html5/thumbnails/13.jpg)
Event Functions<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>
![Page 14: jQuery A Javascript Library Hard things made eas ( ier )](https://reader035.fdocuments.us/reader035/viewer/2022081507/56816402550346895dd5a5c3/html5/thumbnails/14.jpg)
Sample Events• 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.
![Page 15: jQuery A Javascript Library Hard things made eas ( ier )](https://reader035.fdocuments.us/reader035/viewer/2022081507/56816402550346895dd5a5c3/html5/thumbnails/15.jpg)
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.
![Page 16: jQuery A Javascript Library Hard things made eas ( ier )](https://reader035.fdocuments.us/reader035/viewer/2022081507/56816402550346895dd5a5c3/html5/thumbnails/16.jpg)
jQuery Hide and Show
• With jQuery, you can hide and show HTML elements with the hide() and show() methods:
• Example$("#hide").click(function(){
$("p").hide();});
$("#show").click(function(){ $("p").show();});
Note: These can be very useful on mobile devices as a way to conserve space.
![Page 17: jQuery A Javascript Library Hard things made eas ( ier )](https://reader035.fdocuments.us/reader035/viewer/2022081507/56816402550346895dd5a5c3/html5/thumbnails/17.jpg)
Hide and show speed
• $(selector).hide(speed,callback)• $(selector).show(speed,callback)
• $("button").click(function(){ $("p").hide(1000);});
![Page 18: jQuery A Javascript Library Hard things made eas ( ier )](https://reader035.fdocuments.us/reader035/viewer/2022081507/56816402550346895dd5a5c3/html5/thumbnails/18.jpg)
ToggleBetween show and hide
$(selector).toggle(speed,callback)
$("button").click(function(){ $("p").toggle();});
![Page 19: jQuery A Javascript Library Hard things made eas ( ier )](https://reader035.fdocuments.us/reader035/viewer/2022081507/56816402550346895dd5a5c3/html5/thumbnails/19.jpg)
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 (optional) speed parameter can take the following values: "slow", "fast", "normal", or milliseconds.
• The callback parameter is the (optional) name of a function to be executed after the function completes.
![Page 20: jQuery A Javascript Library Hard things made eas ( ier )](https://reader035.fdocuments.us/reader035/viewer/2022081507/56816402550346895dd5a5c3/html5/thumbnails/20.jpg)
Slide Examples
$(".flip").click(function(){ $(".panel").slideDown();});
$(".flip").click(function(){ $(".panel").slideUp()})
$(".flip").click(function(){ $(".panel").slideToggle();});
![Page 21: jQuery A Javascript Library Hard things made eas ( ier )](https://reader035.fdocuments.us/reader035/viewer/2022081507/56816402550346895dd5a5c3/html5/thumbnails/21.jpg)
• <html>• <head>
• <script type="text/javascript" src="jquery.js"></script>• <script type="text/javascript"> • $(document).ready(function(){• $(".flip").click(function(){• $(".panel").slideToggle("slow");• });• });• </script>• • <style type="text/css"> • div.panel,p.flip• {• margin:0px;• padding:5px;• text-align:center;• background:#e5eecc;• border:solid 1px #c3c3c3;• }• div.panel• {• height:120px;• display:none;• }• </style>• </head>• • <body>• • <div class="panel">• <p>Because time is valuable, we deliver quick and easy learning.</p>• <p>At Stern, you can study everything you need to learn, in an accessible and handy format.</p>• </div>• • <p class="flip">Show/Hide Panel</p>• • </body>• </html>
![Page 22: jQuery A Javascript Library Hard things made eas ( ier )](https://reader035.fdocuments.us/reader035/viewer/2022081507/56816402550346895dd5a5c3/html5/thumbnails/22.jpg)
jQuery Fade - fadeIn, fadeOut, fadeTo
• The jQuery fade methods gradually change the opacity for selected elements.
• jQuery has the following fade methods:• $(selector).fadeIn(speed,callback)• $(selector).fadeOut(speed,callback)• $(selector).fadeTo(speed,opacity,callback)• The speed parameter can take the following values: "slow", "fast",
"normal", or milliseconds.• The opacity parameter in the fadeTo() method allows fading to a
given opacity.• The callback parameter is the name of a function to be executed
after the function completes.
![Page 23: jQuery A Javascript Library Hard things made eas ( ier )](https://reader035.fdocuments.us/reader035/viewer/2022081507/56816402550346895dd5a5c3/html5/thumbnails/23.jpg)
Custom Animations• The syntax of jQuery's method for making custom animations
is: • $(selector).animate({params},[duration],[easing],[callback]) • The key parameter is params. It defines the CSS properties
that will be animated. Many properties can be animated at the same time:
animate({width:"70%",opacity:0.4,marginLeft:"0.6in",fontSize:"3em"});
• The second parameter is duration. It specifies the speed of the animation. Possible values are "fast", "slow", "normal", or milliseconds.
![Page 24: jQuery A Javascript Library Hard things made eas ( ier )](https://reader035.fdocuments.us/reader035/viewer/2022081507/56816402550346895dd5a5c3/html5/thumbnails/24.jpg)
Animation Example
<script type="text/javascript"> $(document).ready(function(){
$("button").click(function(){ $("div").animate({height:300},"slow"); $("div").animate({width:300},"slow"); $("div").animate({height:100},"slow"); $("div").animate({width:100},"slow"); });});</script>
![Page 25: jQuery A Javascript Library Hard things made eas ( ier )](https://reader035.fdocuments.us/reader035/viewer/2022081507/56816402550346895dd5a5c3/html5/thumbnails/25.jpg)
<script type="text/javascript"> $(document).ready(function(){$("button").click(function(){$("div").animate({left:"100px"},"slow");$("div").animate({fontSize:"3em"},"slow"); });});</script>
![Page 26: jQuery A Javascript Library Hard things made eas ( ier )](https://reader035.fdocuments.us/reader035/viewer/2022081507/56816402550346895dd5a5c3/html5/thumbnails/26.jpg)
Callback FunctionsFunction called after action is completed
$("p").hide(1000,function(){ alert("The paragraph is now hidden");});
Instead of
$("p").hide(1000);alert("The paragraph is now hidden");
In 2nd example the alert will show before the paragraph is hidden, since the alert happens immediately and the hide takes 1 second. Calling the alert from a callback function ensures that it won’t happen until the paragraph is hidden.
![Page 27: jQuery A Javascript Library Hard things made eas ( ier )](https://reader035.fdocuments.us/reader035/viewer/2022081507/56816402550346895dd5a5c3/html5/thumbnails/27.jpg)
Changing HTML Content
$(selector).html(content)The html() method changes the contents
(innerHTML) of matching HTML elements.
$("p").html(“Stern is the best");
Will change all html within a <p> tag to “Stern is the best”
![Page 28: jQuery A Javascript Library Hard things made eas ( ier )](https://reader035.fdocuments.us/reader035/viewer/2022081507/56816402550346895dd5a5c3/html5/thumbnails/28.jpg)
Example<html><head><script type="text/javascript" src="jquery.js"></script><script type="text/javascript">$(document).ready(function(){ $("button").click(function(){ $("p").html(“Stern is the best"); });});</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>
Wait for document to load
Add a button to change All “p” elements to “Stern is the best”
When clicked.
![Page 29: jQuery A Javascript Library Hard things made eas ( ier )](https://reader035.fdocuments.us/reader035/viewer/2022081507/56816402550346895dd5a5c3/html5/thumbnails/29.jpg)
Can also append or prepend content
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.
![Page 30: jQuery A Javascript Library Hard things made eas ( ier )](https://reader035.fdocuments.us/reader035/viewer/2022081507/56816402550346895dd5a5c3/html5/thumbnails/30.jpg)
After and Before
$(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.
![Page 31: jQuery A Javascript Library Hard things made eas ( ier )](https://reader035.fdocuments.us/reader035/viewer/2022081507/56816402550346895dd5a5c3/html5/thumbnails/31.jpg)
Many, Many HTML functions
Look at full reference
![Page 32: jQuery A Javascript Library Hard things made eas ( ier )](https://reader035.fdocuments.us/reader035/viewer/2022081507/56816402550346895dd5a5c3/html5/thumbnails/32.jpg)
CSS MethodsMethod Description
addClass() Adds one or more classes to selected elements css() Sets or returns one or more style properties for selected elements hasClass() Checks if any of the selected elements have a specified class height() Sets or returns the height of selected elements offset() S ets or returns the position (relative to the document) for selected elements offsetParent() Returns the first parent element that is positioned position() Returns the position (relative to the parent element) of the first selected element removeClass() Removes one or more classes from selected elements scrollLeft() Sets or returns the horizontal position of the scrollbar for the selected elements scrollTop() Sets or returns the vertical position of the scrollbar for the selected elements toggleClass() Toggles between adding/removing one or more classes from selected elements width() Sets or returns the width of selected elements
![Page 33: jQuery A Javascript Library Hard things made eas ( ier )](https://reader035.fdocuments.us/reader035/viewer/2022081507/56816402550346895dd5a5c3/html5/thumbnails/33.jpg)
AJAX• A limitation of early versions of the http protocol, was that
interaction with the server was only through the submission of a form, or clicking on a link to load a new page (or frame).
• To solve this, a new http request type was added that allows asynchronous requests to the server, so that javascript could issue requests for data from a server without refreshing the page. It was called XMLhttpRequest, since the data would be returned as an XML object, which could then be manipulated locally by Javascript and used to dynamically change the current html page.
• jQuery has made using AJAX much easier.
![Page 34: jQuery A Javascript Library Hard things made eas ( ier )](https://reader035.fdocuments.us/reader035/viewer/2022081507/56816402550346895dd5a5c3/html5/thumbnails/34.jpg)
jQuery AJAXAsynchronous Javascript and XML
AJAXAllows javascript to dynamically communicate with a server without
reloading the page.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. And you can load remote data directly into selected HTML elements of
your web page!This is the magic that allows for web pages to dynamically change parts
of their content instead of having to reload the whole page. No more click submit and wait for new page.
Example: Google Earth, Google mapsMore map tiles are loaded in the background while you look at part of
the map, so that when you move, the next area is already loaded.
![Page 35: jQuery A Javascript Library Hard things made eas ( ier )](https://reader035.fdocuments.us/reader035/viewer/2022081507/56816402550346895dd5a5c3/html5/thumbnails/35.jpg)
jQuery load method
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. The data is put in the data object, and the callback function is called when the data is loaded.
![Page 36: jQuery A Javascript Library Hard things made eas ( ier )](https://reader035.fdocuments.us/reader035/viewer/2022081507/56816402550346895dd5a5c3/html5/thumbnails/36.jpg)
jQuery load<html><head><script type="text/javascript" src="jquery.js"></script><script type="text/javascript">$(document).ready(function(){ $("button").click(function(){ $("div").load('test1.txt'); });});</script></head><body>
<div><h2>Let AJAX change this text</h2></div><button>Change Content</button>
</body></html>
Load ‘test1.txt’ from sameDirectory as the web page
And replace div contentWith contents of “test1.txt”
![Page 37: jQuery A Javascript Library Hard things made eas ( ier )](https://reader035.fdocuments.us/reader035/viewer/2022081507/56816402550346895dd5a5c3/html5/thumbnails/37.jpg)
jQuery AJAX
Many functions to move data back and forth between the server and PARTS of the web page.
Very powerful
Need these features to provide good user experience on mobile devices
![Page 38: jQuery A Javascript Library Hard things made eas ( ier )](https://reader035.fdocuments.us/reader035/viewer/2022081507/56816402550346895dd5a5c3/html5/thumbnails/38.jpg)
Conclusion• jQuery provides a wide range of functionality that
makes very advanced capabilities available to developers who know a little javascript, html and css.
• jQuery mobile extends those capabilities for mobile devices by adding a set of mobile features– Makes it easy(?) to develop cross platform mobile apps
that are fairly sophisticated without using the SDK tools for the mobile device.
– jQuery mobile uses Phonegap to access mobile device capabilities like geolocation, cameras, accelerometer, etc.
– jQuery mobile includes capabilities to use AJAX to move data between the mobile device and a remote server.
– But next we do server-side scripting.
![Page 39: jQuery A Javascript Library Hard things made eas ( ier )](https://reader035.fdocuments.us/reader035/viewer/2022081507/56816402550346895dd5a5c3/html5/thumbnails/39.jpg)
QUESTIONS?