Downloaded 12 times
![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/75/How-I-Learned-to-Stop-Worrying-and-Love-jQuery-Jan-2013-16-2048.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/75/How-I-Learned-to-Stop-Worrying-and-Love-jQuery-Jan-2013-19-2048.jpg)
Uploaded byDavid Giard
How I Learned to Stop Worrying and Love jQuery (Jan 2013)
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.
More Related Content
![jQuery in the [Aol.] Enterprise](https://cdn.slidesharecdn.com/ss_thumbnails/jquery-aol-enterprise-101017175311-phpapp01-thumbnail.jpg?width=640&height=640&fit=bounds)
Similar to How I Learned to Stop Worrying and Love jQuery (Jan 2013)
More from David Giard
![Devfest Harare 2025 Slides [GDG Harare] - Combined Slide Deck](https://cdn.slidesharecdn.com/ss_thumbnails/ilovepdfmerged12-251029161756-3b829161-thumbnail.jpg?width=640&height=640&fit=bounds)
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.
- 3.
- 4. JavaScript in yourpage • <script type="text/javascript"> … </script> • <script type="text/javascript“ src=“xxx.js"> </script>
- 5. JavaScript: The GoodParts • Interactive web pages • Fast • Ajax
- 6. JavaScript: The BadParts • 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
- 9.
- 10.
- 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 • Downloadfrom 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){varb=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 <scripttype="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 aset 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)
- 25.
- 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 webservice 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 isextensible! • jQueryUI
- 35.
- 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