Jqueryforbeginnersjqueryconference2009 090914063709 Phpapp02
Download as PPT, PDF2 likes1,733 views
This document summarizes a presentation about beginning jQuery. It introduces jQuery, describing it as a lightweight JavaScript library. It discusses jQuery's history and core team. It also provides overviews of how to set up jQuery, how it works, and its core functionality like selecting elements, manipulating DOM elements, and handling events.
![Introduction Tip Jar is open Tips can be sent via paypal [email_address] *Speaker Note* Pause so audience can write down address](https://image.slidesharecdn.com/jqueryforbeginnersjqueryconference2009-090914063709-phpapp02-090918045339-phpapp01/85/Jqueryforbeginnersjqueryconference2009-090914063709-Phpapp02-3-320.jpg)
![What is jQuery? With JavaScript show a hidden element if (browserType == "gecko" ) document.poppedLayer = eval('document.getElementById(”HiddenDIV")'); else if (browserType == "ie") document.poppedLayer = eval('document.getElementById(”HiddenDIV")'); else document.poppedLayer = eval('document.layers[”HiddenDIV"]'); document.poppedLayer.style.visibility = "visible";](https://image.slidesharecdn.com/jqueryforbeginnersjqueryconference2009-090914063709-phpapp02-090918045339-phpapp01/85/Jqueryforbeginnersjqueryconference2009-090914063709-Phpapp02-17-320.jpg)
![How jQuery Works $("div") $("div#intro h2") $("div.section > p") $("a[href='http://www.jquery.com']") $("ul#nav li:first")](https://image.slidesharecdn.com/jqueryforbeginnersjqueryconference2009-090914063709-phpapp02-090918045339-phpapp01/85/Jqueryforbeginnersjqueryconference2009-090914063709-Phpapp02-58-320.jpg)
![Selectors #id element .class :first :last :not(selector) [attribute=value] ...and many more!](https://image.slidesharecdn.com/jqueryforbeginnersjqueryconference2009-090914063709-phpapp02-090918045339-phpapp01/85/Jqueryforbeginnersjqueryconference2009-090914063709-Phpapp02-63-320.jpg)
Jqueryforbeginnersjqueryconference2009 090914063709 Phpapp02
- 1. Beginning
- 2. Introduction Ralph Whitbeck Senior Web Application Engineer BrandLogic Corporation http://brandlogic.com Blog: http://ralphwhitbeck.com Twitter: RedWolves
- 3. Introduction Tip Jar is open Tips can be sent via paypal [email_address] *Speaker Note* Pause so audience can write down address
- 4. Setting Expectations This begins the first part of a three part beginners track
- 5. Setting Expectations This begins the first part of a three part beginners track Beginning jQuery
- 6. Setting Expectations This begins the first part of a three part beginners track Beginning jQuery Extending jQuery - Understanding plugins
- 7. Setting Expectations This begins the first part of a three part beginners track Beginning jQuery Extending jQuery - Understanding plugins Beginning jQuery UI
- 9. Setting Expectations This talk is for those just starting out with jQuery
- 10. Setting Expectations This talk is for those just starting out with jQuery We'll explore jQuery's history
- 11. Setting Expectations This talk is for those just starting out with jQuery We'll explore jQuery's history Meet the core team
- 12. Setting Expectations This talk is for those just starting out with jQuery We'll explore jQuery's history Meet the core team How jQuery works
- 13. Setting Expectations This talk is for those just starting out with jQuery We'll explore jQuery's history Meet the core team How jQuery works Get jQuery on your page
- 14. Setting Expectations This talk is for those just starting out with jQuery We'll explore jQuery's history Meet the core team How jQuery works Get jQuery on your page Walk through a real-world examples
- 15. What is jQuery?
- 16. What is jQuery? jQuery is JavaScript
- 17. What is jQuery? With JavaScript show a hidden element if (browserType == "gecko" ) document.poppedLayer = eval('document.getElementById(”HiddenDIV")'); else if (browserType == "ie") document.poppedLayer = eval('document.getElementById(”HiddenDIV")'); else document.poppedLayer = eval('document.layers[”HiddenDIV"]'); document.poppedLayer.style.visibility = "visible";
- 18. What is jQuery? Show a hidden div using jQuery $(“#HiddenDIV”).show();
- 21. What is jQuery? jQuery is JavaScript It's a light-weight library (19kb minified and GZIPed)
- 22. What is jQuery? jQuery is JavaScript It's a light-weight library (19kb minified and GZIPed) Easy and fast HTML DOM Selection
- 23. What is jQuery? jQuery is JavaScript It's a light-weight library (19kb minified and GZIPed) Easy and fast HTML DOM Selection Built to work on all "modern" browsers (IE6+, FF 2.0+, Safari 3.0+, Opera 9+, Chrome 1.0+)
- 24. What is jQuery? jQuery is JavaScript It's a light-weight library (19kb minified and GZIPed) Easy and fast HTML DOM Selection Built to work on all modern browsers (IE6+, FF 2.0+, Safari 3.0+, Opera 9+, Chrome 1.0+) It's Open Source
- 25. What can jQuery Produce? High school students from Spotswood High School Jamie Gilar John Cicolella Demo’d http:// www.jamie.strunex.net /homework/channel/
- 27. Benefits to jQuery Well documented (http://docs.jquery.com)
- 28. Benefits to jQuery Well documented (http://docs.jquery.com) Thriving community of developers Blogs Twitter Online Tutorials Books Conferences Classes
- 29. Benefits to jQuery jQuery is Extensible Create/release your own plugins Thousands of plugins available
- 30. Benefits to jQuery jQuery is Extensible Create/release your own plugins Thousands of plugins available jQuery works with other libraries Prototype Mootools
- 31. Who is using jQuery? Google Amazon IBM Microsoft Netflix Twitter Dell, Inc. NBC EA Match MLB ESPN Best Buy
- 32. jQuery's History jQuery was released: January 14, 2006 BarCampNYC
- 33. jQuery's History Versions 1.0 - August 26, 2006
- 34. jQuery's History Versions 1.0 - August 26, 2006 1.1 - January 14, 2007
- 35. jQuery's History Versions 1.0 - August 26, 2006 1.1 - January 14, 2007 1.1.3 - July 5, 2007
- 36. jQuery's History Versions 1.2 - September 10, 2007
- 37. jQuery's History Versions 1.2 - September 10, 2007 jQuery UI released - September 16, 2007
- 38. jQuery's History Versions 1.2 - September 10, 2007 jQuery UI released - September 16, 2007 1.2.6 - May 24, 2008
- 39. jQuery's History Versions Web site redesign - August 28, 2008
- 40. jQuery's History
- 41. jQuery's History Versions Web site redesign - August 28, 2008 1.3 - January 14, 2009
- 42. jQuery's History Versions Web site redesign - August 28, 2008 1.3 - January 14, 2009 1.3.2 - February 20, 2009
- 44. jQuery's Core Team Development John Resig Brandon Aaron Ariel Flesler Jörn Zaefferer
- 45. jQuery's Core Team Evangelism Rey Bango Karl Swedberg Cody Lindley
- 46. jQuery's Core Team jQuery UI Paul Bakaus Richard D. Worth Scott González Todd Parker Many others
- 47. jQuery's Core Team Plugins Yehuda Katz Klaus Hartl Mike Alsup
- 48. jQuery's Core Team Web, Design and Infrastructure Scott Jehl Mike Hostetler Jonathan Sharp
- 50. Setting up jQuery Include jQuery on the page
- 51. Setting up jQuery Include jQuery on the page Download latest from jQuery.com <script src="jquery-1.3.2.min.js" type="text/javascript"></script>
- 52. Setting up jQuery Include jQuery on the page Download latest from jQuery.com <script src="jquery-1.3.2.min.js" type="text/javascript></script> Include the latest from Google AJAX Libraries API <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
- 53. Setting up jQuery Set jQuery to run when the DOM is loaded. $(document).ready(function(){ //put your jQuery code here. });
- 54. How jQuery Works $("div").show();
- 55. How jQuery Works $ Initiate the jQuery Object
- 56. How jQuery Works jQuery("div").show();
- 57. How jQuery Works ("div") Select Elements
- 58. How jQuery Works $("div") $("div#intro h2") $("div.section > p") $("a[href='http://www.jquery.com']") $("ul#nav li:first")
- 59. How jQuery Works .show() Do Something
- 60. How jQuery Works Demo (Demo based on: http://ejohn.org/apps/learn-jquery/ )
- 61. How jQuery is Structured Core Selectors Attributes Traversing Manipulation CSS Events AJAX Effects
- 62. jQuery Core .each() .length() .eq() .get() .index() .data() .removeData() ...and many more!
- 63. Selectors #id element .class :first :last :not(selector) [attribute=value] ...and many more!
- 64. Attributes .removeAttr() .addClass() .hasClass() .removeClass() .toggleClass() .html() .val() ...and many more!
- 65. Traversing .not() .add() .children() .context() .next() .prevAll() .siblings() ...and many more!
- 66. Manipulation .append() .after() .insertAfter() .wrap() .replaceWith() .empty() ...and many more!
- 67. CSS .width() .innerHeight() .height() .outerHeight() .offset() .position() .css() ...and many more!
- 68. Events .ready() .mouseout() .trigger() .hover() .toggle() .blur() .live() ...and many more!
- 69. AJAX .ajax() .load() .getJSON() .getScript() .serialize .get() .post() ...and many more!
- 70. Effects .hide() .show() .fadeTo() .slideToggle() .toggle() .slideUp() .slideDown() ...and many more!
- 71. Putting it all together Real-World Demo (Demo based on: http://ralphwhitbeck.com/2007/11/20/PullingTwitterUpdatesWithJSONAndJQuery.aspx )
- 72. Thank You Speaker rate http://speakerrate.com/talks/1400-beginning-jquery
- 73. Thank You Speaker rate http://speakerrate.com/talks/1400-beginning-jquery