jQuery Jay Urbain, Ph.D. Credits: h8p://jquery.com/ - - PowerPoint PPT Presentation
jQuery Jay Urbain, Ph.D. Credits: h8p://jquery.com/ h8p://api.jquery.com/ h8p://jquery.bassistance.de/jquery-geAng-started.html, Jrn Zaefferer
1
Credits: ¡ h8p://jquery.com/ ¡ h8p://api.jquery.com/ ¡ h8p://jquery.bassistance.de/jquery-‑geAng-‑started.html, ¡Jörn ¡Zaefferer ¡ h8p://www.mkyong.com/jquery/jquery-‑form-‑selectors-‑example/ ¡ Chaffer, ¡Jonathan ¡(2011-‑09-‑23). ¡Learning ¡jQuery, ¡Third ¡EdiTon ¡ http://www.w3schools.com ¡ ¡
2
3
4
5
6
1. Download ¡a ¡copy ¡of ¡jQuery: ¡h8p://jquery.com/download/ ¡ – Compressed ¡and ¡uncompressed ¡copies ¡are ¡available. ¡ ¡ – Uncompressed ¡file ¡is ¡best ¡used ¡during ¡development ¡or ¡debugging. ¡
– The ¡compressed ¡file ¡saves ¡bandwidth ¡and ¡improves ¡performance ¡in ¡
compressed ¡file. ¡Not ¡required ¡for ¡running ¡jQuery. ¡ – You ¡can ¡also ¡access ¡via ¡a ¡CDN. ¡Here’s ¡Google’s, ¡there ¡are ¡many: ¡ – <script ¡src="h8ps://ajax.googleapis.com/ajax/libs/jquery/3.2.1/ jquery.min.js"></script> ¡ – jquery-‑3.2.1.min.js ¡– ¡compressed ¡ – jquery-‑3.2.1.js ¡– ¡release ¡version ¡(can ¡read ¡this) ¡ 2. Add ¡reference: ¡<script ¡src=“jquery-‑3.2.1.js"></script> ¡ – Customary ¡to ¡use ¡<script ¡src=“jquery.js"></script> ¡and ¡relabel ¡w/ ¡new ¡
7
Note: show jquery-3.2.1.js
<!DOCTYPE html> <html> <head> <title>Your title</title> </head> <body> <!-- Your html goes here --> <!-- Finally, include jQuery, then your own .js files and code --> <script src="jquery-3.2.1.js"></script> <script src="myJavascript.js"></script> <script> // your remaining code goes here </script> </body> </html>
8
9
10
11
jq1.html
12
hellojQuery.html Load jQuery lib Add events as soon as the document element Is ready jQuery alternative ready syntax: $(function(){ // jQuery methods go here... }); E.g.: $(alert("hello jQuery"));
13
14
$("h1").fadeOut().fadeIn();
15
16
<!DOCTYPE ¡html> ¡
<html> ¡ <head> ¡ ¡ ¡ ¡ ¡<script ¡src="jquery-‑3.1.1.js”></script> ¡ ¡ ¡ ¡ ¡<script> ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡$(document).ready(funcTon(){ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡$("#hide").click(funcTon(){ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡$("p").hide(); ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡}); ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡$("#show").click(funcTon(){ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡$("p").show(); ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡}); ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡}); ¡ ¡ ¡ ¡ ¡</script> ¡ </head> ¡ <body> ¡ <p>If ¡you ¡click ¡on ¡the ¡"Hide" ¡bu8on, ¡I ¡will ¡disappear.</p> ¡ <bu8on ¡id="hide">Hide</bu8on> ¡ <bu8on ¡id="show">Show</bu8on> ¡ </body> ¡ </html> ¡
17
jQuerySelectorHide.html Anonymous functions Add onclick event handler $(“p”) – select all <p> elements on a page:
¡ <script> ¡ $(document).ready(funcTon(){ ¡ ¡ ¡$("bu8on").click(funcTon(){ ¡ ¡ ¡ ¡ ¡$("#test").hide(); ¡ ¡ ¡}); ¡ }); ¡ </script> ¡ ¡ <body> ¡ <h2>This ¡is ¡a ¡heading</h2> ¡ <p>This ¡is ¡a ¡paragraph.</p> ¡ <p ¡id="test">This ¡is ¡another ¡paragraph.</p> ¡ <bu8on>Click ¡me</bu8on> ¡ </body> ¡
18
<script> ¡ $(document).ready(funcTon(){ ¡ ¡ ¡$("bu8on").click(funcTon(){ ¡ ¡ ¡ ¡ ¡$(".test").hide(); ¡ ¡ ¡}); ¡ }); ¡ </script> ¡ ¡ <body> ¡ <h2 ¡class="test">This ¡is ¡a ¡heading</h2> ¡ <p ¡class="test">This ¡is ¡a ¡paragraph.</p> ¡ <p>This ¡is ¡another ¡paragraph.</p> ¡ <bu8on>Click ¡me</bu8on> ¡ </body> ¡
19
20
– moving ¡a ¡mouse ¡over ¡an ¡element ¡ – selecTng ¡a ¡radio ¡bu8on ¡ – clicking ¡on ¡an ¡element ¡
21
¡<script> ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡$(document).ready(funcTon(){ ¡ ¡// ¡ready ¡event ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡$("bu8on").click(funcTon(){ ¡ ¡ ¡// ¡click ¡event ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡$("p").hide(); ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡}); ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡$("#p1").mouseenter(funcTon(){// ¡mouse ¡enter ¡event ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡alert("You ¡entered ¡p1!"); ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡}); ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡$("#p1").mouseup(funcTon(){// ¡mouse ¡up ¡event ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡alert("Mouse ¡up ¡over ¡p1!"); ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡}); ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡$("#p1").hover(funcTon(){// ¡hover ¡event ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡alert("You ¡entered ¡p1!"); ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡}, ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡funcTon(){ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡alert("Bye! ¡You ¡now ¡leave ¡p1!"); ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡}); ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡}); ¡ ¡ ¡ ¡ ¡</script> ¡
22
Useful events:
Syntax: ¡
¡ $("#hide").click(funcTon(){ ¡ ¡ ¡$("p").hide(); ¡ }); ¡ ¡ $("#show").click(funcTon(){ ¡ ¡ ¡$("p").show(1000); ¡ }); ¡
23
jQueryHideAndShow.html – Note: modify times // callback at end, needs to be in function
Syntax: ¡toggle ¡between ¡the ¡hide() ¡ and ¡show() ¡ ¡
$("bu8on").click(funcTon(){ ¡ ¡ ¡$("p").toggle(); ¡ }); ¡ ¡ ¡
24
<!DOCTYPE html> <html> <head> <script src="jquery.js"> </script> <script> $(document).ready(function(){ $("button").click(function(){ $("p").toggle(); }); }); </script> </head> <body> <p>This is a paragraph.</p> <button>Toggle between hide() and show()</button> </body> </html>
25
¡ Syntax: ¡
$("bu8on").click(funcTon(){ ¡ ¡ ¡$("#div1").fadeIn(); ¡ ¡ ¡$("#div2").fadeIn("slow"); ¡ ¡ ¡ ¡$("#div3").fadeIn(3000); ¡ }); ¡ ¡ ¡
26
jQueryFade.html
¡ Syntax: ¡
¡ $("#flip").click(funcTon(){ ¡ ¡ ¡$("#panel").slideDown(); ¡ }); ¡ ¡
27
Create ¡custom ¡animaOons ¡ ¡ Syntax: ¡toggle ¡between ¡the ¡hide() ¡and ¡show() ¡ ¡
¡<script> ¡
¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡$(document).ready(funcTon(){ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡$("bu8on").click(funcTon(){ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡$("div").animate({ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡les:'250px’, ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡opacity:'0.5’, ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡height:'150px’, ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡width:'150px’ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡}, ¡5000, ¡funcTon() ¡{alert("done")} ¡); ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡}); ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡}); ¡ ¡ ¡ ¡ ¡</script> ¡
28
jQueryAnimate.html
Using relative values: var $square = $("#square"); function bounce() { $square.animate({ top: "+=10" }, 300, function() { $square.animate({ top: "-=10" }, 300, function() { bounce(); }) }); } $(document).ready(function(){ bounce(); });
Also: continuousAnimationJQ.html
Stop ¡an ¡animaTon ¡or ¡effect ¡before ¡it ¡is ¡finished ¡ Stop ¡syntax: ¡ ¡
$(selector).stop(stopAll,goToEnd); ¡ ¡ // ¡gotToEnd ¡true/false ¡complete ¡animaTon ¡or ¡stop. ¡Default ¡is ¡false. ¡ Chaining: ¡browsers ¡do ¡not ¡have ¡to ¡find ¡the ¡same ¡element(s) ¡more ¡than ¡once. ¡
¡
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
screen.css starterkit.html
48
49
50
51
52
jQuery ¡Base ¡
%2Fmw%2Findex.php%3FTtle%3DCore%26redirect%3Dno ¡ jQuery ¡Selectors ¡
%2Fdocs.jquery.com%2Fmw%2Findex.php%3FTtle%3DSelectors%26redirect %3Dno ¡ ¡ jQuery ¡Events ¡
%2Fmw%2Findex.php%3FTtle%3DEvents%26redirect%3Dno ¡
h8p://docs.jquery.com/DOM/Traversing/Selectors ¡
53