ConfidentialIntroduction to jQueryHunter WuNov. 30, 2007
ConfidentialTable of Contents• About jQuery• Finding Elements• Performing Actions• A Concept of Using jQuery• Appendix
About jQuery
ConfidentialjQuery• Released on Jan. 2006• Focus on DOM Traversal• Built in support for Events, Ajax, and Animations• Succ...
ConfidentialTrends• 2007 Ajaxian.com Reader Survey ResultsSurvey Result of 2006
Finding Elements
ConfidentialTraditional Waysdocument.getElementById(txt1)document.getElementsByTagName(input)document.forms[form1].element...
ConfidentialComparisonNative Function jQueryGet anelementvar txt1 = document.getElementById("txt1");var txt1 = $("#txt1");...
ConfidentialCSS SelectorsCSS Selectors Effected Element(s) jQuery Syntax#mainTb {…} id="mainTb" $("#mainTb") matches a si...
ConfidentialMore Selector Examples$("#orderedlist > li")(Hierarchy) Selects all child lis of the element with theid order...
ConfidentialMore Selector Examples$("#orderedlist > li")(Hierarchy) Selects all child lis of the element with theid order...
ConfidentialMore Selector Examples$("#orderedlist > li")(Hierarchy) Selects all child lis of the element with theid order...
Peforming Actions
ConfidentialBasic Effects$("img[src*=yimg.com]").hide(); Hides each of the matched elements if they are shown.$("img[src*...
ConfidentialChainability (The Magic of jQuery)• Chainable Functions:$("img[src*=yimg.com]").fadeOut().fadeIn().fadeOut().f...
A Concept of Using jQuery
ConfidentialRuten UI Toolbox• Users are not familiar with Image Processing• Providing online, easy-to-use APIs for them• E...
ConfidentialRuten UI Toolbox (cont.)• For Users• Add filter names to the class attribute, and it’s set.<img src="..." clas...
Appendix
ConfidentialThe Author of jQuery• John Resig• Work for Mozilla Corp.• The author of the book "Pro JavaScript Techniques"• ...
ConfidentialUsing jQuery with Other Libraries• Loading the other library before jQuery<script src="prototype.js"></script>...
Any Questions?
以下是備而不用
ConfidentialMore Features of jQuery• Namespacing (only one global variable: jQuery)• Implementations of Object-Orented Des...
ConfidentialLaunching Code on Document Ready• Limitations of window.onload• Can not be used twice in one page• The Javascr...
Upcoming SlideShare
Loading in …5
×

Introduction.to.j query

195 views

Published on

  • Be the first to comment

  • Be the first to like this

Introduction.to.j query

  1. 1. ConfidentialIntroduction to jQueryHunter WuNov. 30, 2007
  2. 2. ConfidentialTable of Contents• About jQuery• Finding Elements• Performing Actions• A Concept of Using jQuery• Appendix
  3. 3. About jQuery
  4. 4. ConfidentialjQuery• Released on Jan. 2006• Focus on DOM Traversal• Built in support for Events, Ajax, and Animations• Succinct code, small file size• Extensible via a plugin architecture• Dual licensed under the MIT and GPL licensesFind somethingPerform actionsagainst on it
  5. 5. ConfidentialTrends• 2007 Ajaxian.com Reader Survey ResultsSurvey Result of 2006
  6. 6. Finding Elements
  7. 7. ConfidentialTraditional Waysdocument.getElementById(txt1)document.getElementsByTagName(input)document.forms[form1].elements[txt1]document.images[img1]document.form1.txt1document.form1.img1document.img1form1.txt1document.all.txt1document.all[txt1]document.layers[div1]window.form1document.forms[form1].elements[img1]
  8. 8. ConfidentialComparisonNative Function jQueryGet anelementvar txt1 = document.getElementById("txt1");var txt1 = $("#txt1");Return [Element] [jQuery Object]Get value var t2 = txt1.value; var t2 = txt1.val();Set value txt1.value = "hello"; txt1.val("hello");
  9. 9. ConfidentialCSS SelectorsCSS Selectors Effected Element(s) jQuery Syntax#mainTb {…} id="mainTb" $("#mainTb") matches a single element with the given id.bk13 {…} class="bk13" $(".bk13") matches all elements with the given classinput {…} <input …> $("input") matches all elements with the given tag
  10. 10. ConfidentialMore Selector Examples$("#orderedlist > li")(Hierarchy) Selects all child lis of the element with theid orderedlist.$("#orderedlist li:last")(Basic Filters) Selects the last child li of the elementwith the id orderedlist.
  11. 11. ConfidentialMore Selector Examples$("#orderedlist > li")(Hierarchy) Selects all child lis of the element with theid orderedlist.$("#orderedlist li:last")(Basic Filters) Selects the last child li of the elementwith the id orderedlist.$("img[src*=yimg.com]")
  12. 12. ConfidentialMore Selector Examples$("#orderedlist > li")(Hierarchy) Selects all child lis of the element with theid orderedlist.$("#orderedlist li:last")(Basic Filters) Selects the last child li of the elementwith the id orderedlist.$("img[src*=yimg.com]")(Attribute Filters) Selects all image elements that havethe src attribute and it contants a certain value.Full documentation of selectors:http://docs.jquery.com/Selectors
  13. 13. Peforming Actions
  14. 14. ConfidentialBasic Effects$("img[src*=yimg.com]").hide(); Hides each of the matched elements if they are shown.$("img[src*=yimg.com]").fadeOut();       //fade out$("img[src*=yimg.com]").fadeIn();        //fade in$("img[src*=yimg.com]").fadeOut();$("img[src*=yimg.com]").fadeIn();$("img[src*=yimg.com]").fadeOut(slow); //fade out slowly Apply fade-out/fade-in several times to each of thematched elements.
  15. 15. ConfidentialChainability (The Magic of jQuery)• Chainable Functions:$("img[src*=yimg.com]").fadeOut().fadeIn().fadeOut().fadeIn().fadeOut(slow);• Another Example:$("img[src*=yimg.com]").attr("src", "http://www.ruten.com.tw/img/userbanner.gif").attr("border", "0").removeAttr("height").removeAttr("width").wrap("<a href="" +$("a[href*=/user/index.php?sid=]:first").attr("href") +""></a>");
  16. 16. A Concept of Using jQuery
  17. 17. ConfidentialRuten UI Toolbox• Users are not familiar with Image Processing• Providing online, easy-to-use APIs for them• Effects may look like:
  18. 18. ConfidentialRuten UI Toolbox (cont.)• For Users• Add filter names to the class attribute, and it’s set.<img src="..." class="glossy reflex">• For Developers• One line to rule them all./* a pseudo code */$("img[class*=corner]").addEffect("corner").end().find("img[class*=edges]").addEffect("edges").end().find("img[class*=filmed]").addEffect("filmed").end().find("img[class*=glossy]").addEffect("glossy").end().find("img[class*=reflex]").addEffect("reflex");
  19. 19. Appendix
  20. 20. ConfidentialThe Author of jQuery• John Resig• Work for Mozilla Corp.• The author of the book "Pro JavaScript Techniques"• The speaker of "Building a JavaScript Library" on GoogleTech Talk作者: Resig, John出版社: Apress初版日: 2006-12-11商品條碼: 9781590597279ISBN 條碼:1590597273資料提供:
  21. 21. ConfidentialUsing jQuery with Other Libraries• Loading the other library before jQuery<script src="prototype.js"></script><script src="jquery.js"></script>• Overriding the $-functionjQuery.noConflict();var theTable = jQuery("#mainTb");• Using another shortcut for jQueryvar $j = jQuery.noConflict();var theTable = $j("#mainTb");
  22. 22. Any Questions?
  23. 23. 以下是備而不用
  24. 24. ConfidentialMore Features of jQuery• Namespacing (only one global variable: jQuery)• Implementations of Object-Orented Design• Unobtrusive scripting
  25. 25. ConfidentialLaunching Code on Document Ready• Limitations of window.onload• Can not be used twice in one page• The Javascript code isnt run until all images are finisheddownloading• Solution from jQuery$(document).ready(function(){// Your code here});

×