How I Learned to Stop Worrying and Love jQuery (Jan 2013)
Download as PPTX, PDF0 likes2,824 views
The document discusses how jQuery can be used to simplify JavaScript programming. It introduces jQuery, explaining that it provides cross-browser compatibility and built-in functions to make JavaScript coding easier. It also discusses how jQuery is widely used on popular websites and how to include jQuery in a web page.
![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](https://image.slidesharecdn.com/jquery-130123064112-phpapp02/85/How-I-Learned-to-Stop-Worrying-and-Love-jQuery-Jan-2013-16-320.jpg)
![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");](https://image.slidesharecdn.com/jquery-130123064112-phpapp02/85/How-I-Learned-to-Stop-Worrying-and-Love-jQuery-Jan-2013-19-320.jpg)
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
- #10: Sour