How I Learned to Stop Worrying and Love jQuery (Jan 2013)
•Download as PPTX, PDF•
0 likes•2,821 views
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (20)
Similar to How I Learned to Stop Worrying and Love jQuery (Jan 2013)
Similar to How I Learned to Stop Worrying and Love jQuery (Jan 2013) (20)
More from David Giard
More from David Giard (20)
Recently uploaded
Recently uploaded (20)
How I Learned to Stop Worrying and Love jQuery (Jan 2013)
- 1. How I Learned To Stop Worrying and Love jQuery David Giard, Sogeti USA C# MVP MCTS, MCSD, MCSE, MCDBA DavidGiard.com @DavidGiard
- 2. B E F O R E
- 3. A F T E R
- 4. JavaScript in your page • <script type="text/javascript"> … </script> • <script type="text/javascript“ src=“xxx.js"> </script>
- 5. JavaScript: The Good Parts • Interactive web pages • Fast • Ajax
- 6. JavaScript: The Bad Parts • Cross-browser issues • Cross-platform issues
- 7. JavaScript Frameworks • jQuery jQuery • Prototype • Dojo • Mootools • ExtJs • etc…
- 8. jQuery • JavaScript Abstraction • Cross-Browser • Built-In Functions • Fast • Unobtrusive • Popular • Ships with Visual Studio 2010 and 2012
- 11. jQuery Popularity • Twitter.com • Wikipedia.org • MLB.com • Amazon.com • Bing.com • Microsoft.com • Bit.ly • ESPN.com • Digg.com • Reddit.com • Netflix.com • WordPress.com
- 12. Unobtrusive JavaScript • Obtrusive <a href=“” onclick=“DoSomething();”> Click Me </a> • Unobtrusive <script type="text/javascript"> $(document).ready(function(){ $(“#Link1”).click(function(){ DoSomething(); }); </script> <a href=“” id=“Link1”> Click Me </a>
- 13. Enable jQuery • Download from jQuery.com • <script type="text/javascript" src="scripts/jquery-1.8.3.min.js"></script>
- 14. Content Delivery Network • <script type="text/javascript" src=“http://ajax.microsoft.com/ajax/jquery/jquery-1.8.3.min.js"> </script> • <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"> </script> • <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js "> </script>
- 15. Non-Minified JavaScript /*! * jQuery JavaScript Library v1.8.2 * http://jquery.com/ * * Includes Sizzle.js * http://sizzlejs.com/ * * Copyright 2012 jQuery Foundation and other contributors * Released under the MIT license * http://jquery.org/license * * Date: Thu Sep 20 2012 21:13:05 GMT-0400 (Eastern Daylight Time) */ (function( window, undefined ) { var // A central reference to the root jQuery(document) rootjQuery, // The deferred used on DOM ready
- 16. Minified JavaScript (function(a,b){function G(a){var b=F[a]={};return p.each(a.split(s),function(a,c){b[c]=!0}),b}function J(a,c,d){if(d===b&&a.nodeType===1){var e="data-"+c.replace(I,"- $1").toLowerCase();d=a.getAttribute(e);if(typeof d=="string"){try{d=d==="true"?!0:d==="false"?!1:d==="null"?null:+d+""===d?+d:H.test(d )?p.parseJSON(d):d}catch(f){}p.data(a,c,d)}else d=b}return d}function K(a){var b;for(b in a){if(b==="data"&&p.isEmptyObject(a[b]))continue;if(b!=="toJSON")return!1}return!0}fu nction ba(){return!1}function bb(){return!0}function bh(a){return!a||!a.parentNode||a.parentNode.nodeType===11}function bi(a,b){do a=a[b];while(a&&a.nodeType!==1);return a}function bj(a,b,c){b=b||0;if(p.isFunction(b))return p.grep(a,function(a,d){var e=!!b.call(a,d,a);return e===c});if(b.nodeType)return p.grep(a,function(a,d){return a===b===c});if(typeof b=="string"){var d=p.grep(a,function(a){return a.nodeType===1});if(be.test(b))return p.filter(b,d,!c);b=p.filter(b,d)}return p.grep(a,function(a,d){return p.inArray(a,b)>=0===c})}function bk(a){var b=bl.split("|"),c=a.createDocumentFragment();if(c.createElement)while(b.length)c.creat eElement(b.pop());return c}function bC(a,b){return a.getElementsByTagName(b)[0]||a.appendChild(a.ownerDocument.createElement(b))}f
- 17. Document Object Model (DOM) <html> <head> <title>My Page</title> <script type="text/javascript“ src="http://code.jquery.com/jquery-1.7.1.min.js "> Document </script> </head> <body> Head Body <div> <p> Title a <a href="Page2.htm">link</a> Div This Script Div </p> </div> <div> P UL Colors: <ul> <li>Red</li> A LI LI LI <li>Orange</li> <li>Yellow</li> </ul> </div> </body> </html>
- 18. Getting an Element <script type="text/javaScript"> var id = "Div1"; var myDiv = document.GetElementById(id); </script> … <div id="Div1"> … </div>
- 19. Cross-Browser • Javascript var id = "Div1"; var elm = null; if (document.getElementById) { elm = document.getElementById(id); } else if (document.all) { elm = document.all[id]; } else if (document.layers) { elm = document.layers[id]; } • jQuery var elm = $("#Div1");
- 20. jQuery Syntax • jQuery keyword • Selectors • Events • Functions / Methods
- 21. “jQuery” Keyword • jQuery • $ • Represents the jQuery object • Indicates what follows is jQuery
- 22. Selectors • Returns a set of objects • Call method on each object • Bind event to each object
- 23. CSS Selectors h2 { font-family: "Calibri"; Tag name font-size: 66pt; font-weight: bold; } .FootNote { font-family: "Calibri"; Class name font-size: 18pt; font-weight: bold; } #MyElement { font-family: “Times New Roman"; Element ID font-color: red; } div#MyDiv { font-family: “Arial"; Combine selectors font-size: 48pt; }
- 24. jQuery Selectors • $(selector) • where selector is: Selector Select by… Example "#xxx" Id $("#MyDiv") ".xxx" className $(".MyClass") "xxx" element type $("a") xxx variable name $(document)
- 26. Events $(document).ready(function(){ $("#MyDiv").click(function(){ … }); });
- 27. Methods $(document).ready(function(){ $(“#MyDiv”).click(function(){ $(“a”).attr(“target”, “_blank”); }); });
- 28. Methods $(document).ready(function(){ $(“#MyDiv”).click(function(){ $(“a”).attr(“target”, “_blank”); }); });
- 29. Methods $(function(){ $(“#MyDiv”).click(function(){ $(“a”).attr(“target”, “_blank”); }); });
- 30. Combining Selectors • Containership $(‘selector1 selector2’) Ex: $(‘div a’) • Narrow scope $(‘Selector1Selector2’) Ex: $(‘a#MyLink’)
- 31. Set-based Selectors • $("div:first") • $("div:last") • $("div:even") • $("div:odd")
- 32. Ajax • Call web service from jQuery
- 33. Ajax $.ajax({ url: "CustomerWs.asmx/GetCustomerName", dataType: "text", type: "POST", data: {}, error: function (err) { // Code to run when error returned }, success: function (data) { // Code to run when successfully returned }
- 34. Plug-Ins • jQuery is extensible! • jQueryUI
- 35. jQuery UI
- 36. Help! • docs.jquery.com • api.jquery.com • jqueryui.com/demos
- 37. More resources • http://codylindley.com/jqueryselectors/ • http://www.paulstovell.com/jquerypad
- 38. David Giard • DavidGiard.com • TechnologyAndFriends.com • @DavidGiard.com
Editor's Notes
- Sour