jQuery ¡ ¡ Jay ¡Urbain, ¡Ph.D. ¡ 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 ¡ ht tp://www.w3schools.com ¡ ¡ 1
How ¡do ¡you ¡comfort ¡a ¡JavaScript ¡bug? ¡ ¡ 2
How ¡do ¡you ¡comfort ¡a ¡JavaScript ¡bug? ¡ ¡ You ¡console ¡it. ¡ 3
What ¡is ¡jQuery? ¡ jQuery : ¡General-‑purpose ¡abstracTon ¡layer ¡for ¡common ¡web ¡ scripTng. ¡ • JavaScript ¡Library. ¡ • Simplifies ¡JavaScript ¡programming. ¡ • Easy ¡to ¡learn ¡– ¡once ¡you ¡have ¡HTML/DOM, ¡CSS, ¡& ¡JS ¡knowledge. ¡ • AlternaTves: ¡ Angular, ¡React ¡– ¡not ¡mutually ¡exclusive, ¡more ¡ later. ¡ 4
Why ¡use ¡jQuery? ¡ • jQuery ¡makes ¡it ¡easier ¡to ¡use ¡JavaScript ¡on ¡your ¡website: ¡ – HTML/DOM ¡manipulaTon ¡ – CSS ¡manipulaTon ¡ – HTML ¡event ¡handling ¡ – Effects ¡and ¡animaTons ¡ – AJAX ¡ ¡ – UTliTes ¡ ¡ • Also ¡provides: ¡ – Enhancements ¡to ¡basic ¡JavaScript ¡constructs. ¡ – Browser/pla7orm ¡independence! ¡ 5
Why ¡does ¡jQuery ¡work ¡well? ¡ • Open ¡source. ¡API: ¡h8p://api.jquery.com ¡ • Maintains ¡a ¡wide ¡range ¡of ¡features, ¡relaTvely ¡compact ¡(~87kB). ¡ • Leverages ¡user’s ¡knowledge ¡of ¡CSS ¡selectors. ¡ • Supports ¡extensions ¡ ¡(plugins) ¡-‑ ¡avoids ¡feature ¡creep. ¡ • Works ¡with ¡sets ¡– ¡ implied ¡itera0on . ¡ ¡ • Allows ¡mulTple ¡acTons ¡in ¡one ¡line ¡– ¡ chaining ¡ ¡a().b().c() ¡ ¡ 6
Using ¡jQuery ¡ 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. ¡ • Also ¡great ¡code ¡examples ¡for ¡learning ¡JavaScript. ¡ – The ¡compressed ¡file ¡saves ¡bandwidth ¡and ¡improves ¡performance ¡in ¡ producTon. ¡ ¡ • You ¡can ¡also ¡download ¡a ¡ sourcemap ¡file ¡for ¡use ¡when ¡debugging ¡with ¡a ¡ 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> ¡ Note: show jquery-3.2.1.js – 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 ¡ – versions. ¡ 7
Referencing ¡jQuery ¡(~10k ¡lines) ¡at ¡the ¡end ¡of ¡your ¡html ¡ document ¡allows ¡the ¡rest ¡of ¡your ¡page ¡to ¡load ¡a ¡li8le ¡faster ¡ <!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
jQuery ¡philosophy ¡ • Focus ¡on ¡the ¡interacTon ¡between ¡JavaScript ¡and ¡HTML/DOM ¡ ¡ • (Almost) ¡every ¡operaTon ¡boils ¡down ¡to: ¡ – Find ¡DOM ¡element ¡ – Do ¡something ¡to ¡it ¡ 9
jQuery ¡Syntax ¡ Basic ¡syntax ¡is: ¡ $( selector ). ac)on () ¡ • A ¡ $ ¡is ¡reference ¡to ¡jQuery ¡ • A ¡( selector ) ¡to ¡"query ¡(or ¡find)" ¡HTML ¡elements. ¡ • A ¡jQuery ¡ ac)on () ¡ to ¡be ¡performed ¡on ¡the ¡element(s) ¡ Examples: ¡ • $(this).hide() ¡-‑ ¡hides ¡the ¡current ¡element. ¡ • $("p").hide() ¡-‑ ¡hides ¡all ¡<p> ¡elements. ¡ • $(".test").hide() ¡-‑ ¡hides ¡all ¡elements ¡with ¡class="test". ¡ • $("#test").hide() ¡-‑ ¡hides ¡the ¡element ¡with ¡id="test". ¡ 10
Regular ¡JavaScript ¡( no ¡jQuery ) ¡ • Typical ¡to ¡wrap ¡JavaScript ¡in ¡an ¡ onload ¡funcTon ¡to ¡ensure ¡that ¡JS ¡ code ¡runs ¡ a,er ¡the ¡browser ¡finishes ¡loading ¡the ¡document. ¡ jq1.html 11
Hello ¡jQuery ¡ 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")); hellojQuery.html 12
$(document).ready ¡vs ¡$(window).load ¡ • $(window).load ¡executes ¡aser ¡your ¡pages ¡loads, ¡including ¡any ¡ images ¡your ¡page ¡may ¡display. ¡ ¡ • Browsers ¡load ¡images ¡on ¡separate ¡threads, ¡since ¡image ¡ loading ¡can ¡take ¡a ¡ long ¡Tme. ¡ • $(document).ready ¡executes ¡as ¡soon ¡as ¡the ¡browser ¡ completes ¡DOM ¡creaTon, ¡which ¡occurs ¡( typically ) ¡before ¡all ¡of ¡ the ¡images ¡are ¡loaded. ¡ • Your ¡jQuery ¡script ¡can ¡thus ¡start ¡execuTng ¡more ¡quickly ¡aser ¡ a ¡user ¡browses ¡to ¡your ¡page. ¡ ¡ 13
What ¡is ¡that ¡$ ¡about? ¡ Almost ¡everything ¡starts ¡with ¡a ¡call ¡to ¡the ¡jQuery() ¡selector ¡funcTon. ¡ • Since ¡it’s ¡called ¡so ¡osen, ¡the ¡$ ¡global ¡variable ¡is ¡defined ¡as ¡an ¡ alias ¡to ¡the ¡funcTon: ¡ //alias to jQuery function window.jQuery = window.$ = jQuery; • Thus ¡you ¡could ¡write ¡either: ¡ $(“#p2”).html = “hello se2840”; Or jQuery(“#p2”).html = “hello se2840”; 14
Method ¡chaining ¡ $("h1").fadeOut().fadeIn(); fadeIn () ¡executes ¡aser ¡ fadeOut () ¡completes. ¡ ¡ fadeOut() ¡and ¡fadeIn() ¡are ¡placed ¡in ¡jQuery’s ¡animaTon ¡queue, ¡ which ¡processes ¡acTons ¡in ¡sequence. ¡ ¡ ¡ ¡ 15
$( ¡selector ¡) ¡ selector ¡ can ¡be ¡one ¡of ¡the ¡following: ¡ – A ¡CSS ¡selector ¡expression ¡ ¡ – A ¡string ¡of ¡HTML ¡ ¡ – A ¡JavaScript ¡object ¡ 16
<!DOCTYPE ¡html> ¡ <html> ¡ Element ¡selector ¡ <head> ¡ ¡ ¡ ¡ ¡<script ¡src="jquery-‑3.1.1.js”></script> ¡ ¡ ¡ ¡ ¡<script> ¡ $(“p”) – select all <p> elements on a page: ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡$(document).ready(funcTon(){ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡$("#hide").click(funcTon(){ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡$("p").hide(); ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡}); ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡$("#show").click(funcTon(){ ¡ Anonymous functions ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡$("p").show(); ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡}); ¡ Add onclick event handler ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡}); ¡ ¡ ¡ ¡ ¡</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> ¡ jQuerySelectorHide.html 17
#id ¡Selector ¡ • The ¡jQuery ¡#id ¡selector ¡uses ¡the ¡id ¡a8ribute ¡of ¡an ¡HTML ¡tag ¡to ¡find ¡ the ¡specific ¡element. ¡ ¡ <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
Recommend
More recommend
