jquery (meshu)
DESCRIPTION
MeshU (May 2008).TRANSCRIPT
![Page 1: jQuery (MeshU)](https://reader034.vdocuments.mx/reader034/viewer/2022052619/5558bdc7d8b42a7e298b51c5/html5/thumbnails/1.jpg)
Building Interactive Prototypes with jQuery
MeshU - May 2008John Resig (ejohn.org)
![Page 2: jQuery (MeshU)](https://reader034.vdocuments.mx/reader034/viewer/2022052619/5558bdc7d8b42a7e298b51c5/html5/thumbnails/2.jpg)
What is jQuery?✦ An open source JavaScript library that
simplifies the interaction between HTML and JavaScript.
![Page 3: jQuery (MeshU)](https://reader034.vdocuments.mx/reader034/viewer/2022052619/5558bdc7d8b42a7e298b51c5/html5/thumbnails/3.jpg)
Ideal for Prototyping✦ Completely unobtrusive✦ Uses CSS to layer functionality✦ Easy to separate behavior✦ Quick, terse, syntax
![Page 4: jQuery (MeshU)](https://reader034.vdocuments.mx/reader034/viewer/2022052619/5558bdc7d8b42a7e298b51c5/html5/thumbnails/4.jpg)
The Focus of jQuery
Find Some Elements
$(“div”).addClass(“special”);Do something with them{ {
jQuery Object
![Page 5: jQuery (MeshU)](https://reader034.vdocuments.mx/reader034/viewer/2022052619/5558bdc7d8b42a7e298b51c5/html5/thumbnails/5.jpg)
The jQuery Object✦ Commonly named ‘$’✦ Also named ‘jQuery’✦ Completely valid:
✦ jQuery(“div”).addClass(“special”);
![Page 6: jQuery (MeshU)](https://reader034.vdocuments.mx/reader034/viewer/2022052619/5558bdc7d8b42a7e298b51c5/html5/thumbnails/6.jpg)
Find Some Elements...✦ Full CSS Selector 1-3 Support✦ Better CSS Selector support than most
browsers
![Page 7: jQuery (MeshU)](https://reader034.vdocuments.mx/reader034/viewer/2022052619/5558bdc7d8b42a7e298b51c5/html5/thumbnails/7.jpg)
$(“div”)<div id=”body”> <h2>Some Header</h2> <div class=”contents”> <p>...</p> <p>...</p> </div></div>
![Page 8: jQuery (MeshU)](https://reader034.vdocuments.mx/reader034/viewer/2022052619/5558bdc7d8b42a7e298b51c5/html5/thumbnails/8.jpg)
$(“#body”)<div id=”body”> <h2>Some Header</h2> <div class=”contents”> <p>...</p> <p>...</p> </div></div>
![Page 9: jQuery (MeshU)](https://reader034.vdocuments.mx/reader034/viewer/2022052619/5558bdc7d8b42a7e298b51c5/html5/thumbnails/9.jpg)
$(“div#body”)<div id=”body”> <h2>Some Header</h2> <div class=”contents”> <p>...</p> <p>...</p> </div></div>
![Page 10: jQuery (MeshU)](https://reader034.vdocuments.mx/reader034/viewer/2022052619/5558bdc7d8b42a7e298b51c5/html5/thumbnails/10.jpg)
$(“div.contents p”)<div id=”body”> <h2>Some Header</h2> <div class=”contents”> <p>...</p> <p>...</p> </div></div>
![Page 11: jQuery (MeshU)](https://reader034.vdocuments.mx/reader034/viewer/2022052619/5558bdc7d8b42a7e298b51c5/html5/thumbnails/11.jpg)
$(“div > div”)<div id=”body”> <h2>Some Header</h2> <div class=”contents”> <p>...</p> <p>...</p> </div></div>
![Page 12: jQuery (MeshU)](https://reader034.vdocuments.mx/reader034/viewer/2022052619/5558bdc7d8b42a7e298b51c5/html5/thumbnails/12.jpg)
$(“div:has(div)”)<div id=”body”> <h2>Some Header</h2> <div class=”contents”> <p>...</p> <p>...</p> </div></div>
![Page 13: jQuery (MeshU)](https://reader034.vdocuments.mx/reader034/viewer/2022052619/5558bdc7d8b42a7e298b51c5/html5/thumbnails/13.jpg)
✦ DOM Manipulation (append, prepend, remove)
✦ Events (click, hover, toggle)
✦ Effects (hide, show, slideDown, fadeOut)
✦ AJAX (load, get, post)
Do something with them
![Page 14: jQuery (MeshU)](https://reader034.vdocuments.mx/reader034/viewer/2022052619/5558bdc7d8b42a7e298b51c5/html5/thumbnails/14.jpg)
DOM Manipulation✦ $(“a[target=_blank]”)
.append(“ (Opens in New Window)”);✦ $(“#body”).css({
border: “1px solid green”, height: “40px”});
![Page 15: jQuery (MeshU)](https://reader034.vdocuments.mx/reader034/viewer/2022052619/5558bdc7d8b42a7e298b51c5/html5/thumbnails/15.jpg)
Events✦ $(“form”).submit(function(){
if ( $(“input#name”).val() == “” ) $(“span.help”).show();});
✦ $(“a#open”).click(function(){ $(“#menu”).show(); return false;});
![Page 16: jQuery (MeshU)](https://reader034.vdocuments.mx/reader034/viewer/2022052619/5558bdc7d8b42a7e298b51c5/html5/thumbnails/16.jpg)
Animations✦ $(“#menu”).slideDown(“slow”);✦ Individual properties:$(“div”).animate({ fontWeight: “2em”, width: “+=20%”, color: “green” // via plugin});
✦ Callbacks:$(“div”).hide(500, function(){ // $(this) is an individual <div> element $(this).show(500);});
![Page 17: jQuery (MeshU)](https://reader034.vdocuments.mx/reader034/viewer/2022052619/5558bdc7d8b42a7e298b51c5/html5/thumbnails/17.jpg)
Ajax✦ $(“#asdf”).load(“sample.html”);
✦ Before:<div id=”body”></div>
✦ After:<div id=”body”><h1>Hello, world!</h1></div>
✦ $.getJSON(“test.json”, function(js){ for ( var name in js ) $(“ul”).append(“<li>” + name + “</li>”);});
![Page 18: jQuery (MeshU)](https://reader034.vdocuments.mx/reader034/viewer/2022052619/5558bdc7d8b42a7e298b51c5/html5/thumbnails/18.jpg)
Ajax (cont.)✦ $(“#body”).load(“sample.html div > h1”);
✦ Before:<div id=”body”></div>
✦ After:<div id=”body”><h1>Hello, world!</h1></div>
![Page 19: jQuery (MeshU)](https://reader034.vdocuments.mx/reader034/viewer/2022052619/5558bdc7d8b42a7e298b51c5/html5/thumbnails/19.jpg)
✦ You can have multiple actions against a single set of elements
✦ $(“div”).hide();
✦ $(“div”).hide().css(“color”,”blue”);
✦ $(“div”).hide().css(“color”,”blue”).slideDown();
Chaining
![Page 20: jQuery (MeshU)](https://reader034.vdocuments.mx/reader034/viewer/2022052619/5558bdc7d8b42a7e298b51c5/html5/thumbnails/20.jpg)
Chaining (cont.)✦ var ul = $(“ul.open”); // ul, ul, ul
ul.children(“li”) // li, li, li .addClass(“open”)
ul.find(“a”) // a, a, a .click(function(){ $(this).next().toggle(); return false; })
![Page 21: jQuery (MeshU)](https://reader034.vdocuments.mx/reader034/viewer/2022052619/5558bdc7d8b42a7e298b51c5/html5/thumbnails/21.jpg)
✦ Fully documented✦ Great community✦ Tons of plugins✦ Small size (15kb)✦ Everything works in IE 6+, Firefox,
Safari 2+, and Opera 9+
Why jQuery?
![Page 22: jQuery (MeshU)](https://reader034.vdocuments.mx/reader034/viewer/2022052619/5558bdc7d8b42a7e298b51c5/html5/thumbnails/22.jpg)
Graduation✦ Ideal for Prototyping✦ Perfect for application development✦ Designers and Developers agree!
![Page 23: jQuery (MeshU)](https://reader034.vdocuments.mx/reader034/viewer/2022052619/5558bdc7d8b42a7e298b51c5/html5/thumbnails/23.jpg)
Accordion Menuhttp://jquery.com/files/apple/
http://jquery.com/files/apple/done.html
![Page 24: jQuery (MeshU)](https://reader034.vdocuments.mx/reader034/viewer/2022052619/5558bdc7d8b42a7e298b51c5/html5/thumbnails/24.jpg)
jQuery Plugins✦ Extend the jQuery system✦ Add on extra methods:$(“div”).hideRemove();
✦ Trivial to implement:jQuery.fn.hideRemove = function(speed){ return this.hide(speed, function(){ jQuery(this).remove(); });};
![Page 25: jQuery (MeshU)](https://reader034.vdocuments.mx/reader034/viewer/2022052619/5558bdc7d8b42a7e298b51c5/html5/thumbnails/25.jpg)
Plugins✦ Drag and Drop✦ Sortables✦ Modal Dialogs✦ Tabbed Navigation✦ Sortable Tables✦ And hundreds more...
![Page 26: jQuery (MeshU)](https://reader034.vdocuments.mx/reader034/viewer/2022052619/5558bdc7d8b42a7e298b51c5/html5/thumbnails/26.jpg)
Todo Listhttp://jquery.com/files/todo/
http://jquery.com/files/todo/done.php
![Page 27: jQuery (MeshU)](https://reader034.vdocuments.mx/reader034/viewer/2022052619/5558bdc7d8b42a7e298b51c5/html5/thumbnails/27.jpg)
Social Networkinghttp://jquery.com/files/social/
http://jquery.com/files/social/done.php
![Page 28: jQuery (MeshU)](https://reader034.vdocuments.mx/reader034/viewer/2022052619/5558bdc7d8b42a7e298b51c5/html5/thumbnails/28.jpg)
jQuery UI✦ Full set of themed widgets and
components✦ Drop in and have it “just work”✦ Themed to match your layout✦ Easy to prototype with, easy to use in the final product
![Page 29: jQuery (MeshU)](https://reader034.vdocuments.mx/reader034/viewer/2022052619/5558bdc7d8b42a7e298b51c5/html5/thumbnails/29.jpg)
UI Components✦ Drag & Drop✦ Resize✦ Tabs✦ Slider✦ Table Sorting✦ Modal Dialog✦ etc.
![Page 30: jQuery (MeshU)](https://reader034.vdocuments.mx/reader034/viewer/2022052619/5558bdc7d8b42a7e298b51c5/html5/thumbnails/30.jpg)
Who uses jQuery?✦ Google✦ IBM✦ NBC✦ Amazon✦ Wordpress✦ Digg✦ many others...
![Page 31: jQuery (MeshU)](https://reader034.vdocuments.mx/reader034/viewer/2022052619/5558bdc7d8b42a7e298b51c5/html5/thumbnails/31.jpg)
✦ Very active mailing list✦ 100+ Posts/Day✦ 6000+ Members
✦ Technorati: Dozens of blog posts per day
Community
![Page 32: jQuery (MeshU)](https://reader034.vdocuments.mx/reader034/viewer/2022052619/5558bdc7d8b42a7e298b51c5/html5/thumbnails/32.jpg)
Books✦ 3 Books Released:
✦ Learning jQuery (Packt)✦ jQuery Reference (Packt)✦ jQuery in Action (Manning)
![Page 33: jQuery (MeshU)](https://reader034.vdocuments.mx/reader034/viewer/2022052619/5558bdc7d8b42a7e298b51c5/html5/thumbnails/33.jpg)
Random✦ New Logo✦ and New Web Site✦ Coming Soon!
![Page 34: jQuery (MeshU)](https://reader034.vdocuments.mx/reader034/viewer/2022052619/5558bdc7d8b42a7e298b51c5/html5/thumbnails/34.jpg)
Summary✦ Perfect for rapid-prototyping and
deployable development.✦ Provides plenty of drop in UI code.
![Page 35: jQuery (MeshU)](https://reader034.vdocuments.mx/reader034/viewer/2022052619/5558bdc7d8b42a7e298b51c5/html5/thumbnails/35.jpg)
jquery.comdocs.jquery.com - jquery.com/plugins
More:ui.jquery.com
visualjquery.comlearningjquery.com