How I Learned to stop worrying and love jQuery

1. How I LearnedTo Stop Worryingand Love jQuery David Giard, Sogeti USA C# MVP MCTS, MCSD, MCSE, MCDBA DavidGiard.com

2. JavaScript Dynamic language Client-side (usually) Interact with DOM

3. JavaScript in your page <script type="text/javascript"> …</script> <script type="text/javascript“src=“xxx.js"> </script>

4. JavaScript: The Good Parts Interactive web pages Fast Ajax

5. JavaScript: The Bad Parts Cross-browser issues Cross-platform issues

6. JavaScript Frameworks jQuery Prototype Dojo Mootools ExtJs etc… jQuery

7. jQuery JavaScript Abstraction Cross-Browser Built-In Functions Fast Unobtrusive Popular Ships with Visual Studio 2010

8. jQuery Popularity Source: http://royal.pingdom.com

9. jQuery Popularity Source: http://royal.pingdom.com

10. 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

11. Obtrusive<a href=“” onclick=“DoSomething();”> Click Me</a> Unobtrusive<script type="text/javascript">$(document).ready(function(){ $(“#MyLink”).click(function(){ DoSomething(); }); </script> <a href=“” id=“Link1”> Click Me </a> Unobtrusive JavaScript

12. Enable jQuery Download from jQuery.com <script type="text/javascript" src="jquery-1.6.1.min.js"></script>

13. Content Delivery Network <script type="text/javascript" src=“http://ajax.microsoft.com/ajax/jquery/jquery-1.6.1.min.js"></script> <script type="text/javascript" src=“http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> <script type="text/javascript" src=“http://code.jquery.com/jquery-1.6.1.min.js "></script>

14. Cross-Browser Javascript varelm = 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 = $(“#id”);

15. jQuery Syntax jQuery keyword Selectors Events Functions / Methods

16. “jQuery” Keyword jQuery $ Represents the jQueryobject Indicates what follows is jQuery

17. Selectors Returns a set of objects Call method on each object Bind event to each object

18. CSS Selectors Tag name h2 { font-family: "Calibri"; font-size: 66pt; font-weight: bold;} .FootNote { font-family: "Calibri"; font-size: 18pt; font-weight: bold;} #MyElement { font-family: “Times New Roman";font-color: red;} Div#MyDiv{ font-family: “Arial";font-size: 48pt;} Class name Element ID Combine selectors

19. jQuery Selectors $(selector) where selector is:

20. (document).ready $(document).ready(function(){ … });

21. Events $(document).ready(function(){ $(“#MyDiv”).click(function(){ … }); });

22. Methods $(document).ready(function(){ $(“#MyDiv”).click(function(){ $(“a”).attr(“target”, “_blank”); }); });

23. Combining Selectors Containership$(‘selector1’ ‘selector2’)Ex: $(‘div a’) Narrow scope$(‘Selector1Selector2’)Ex: $(‘a#MyLink’) Filter$(selector1).filter(selector2)Ex: $(‘#MyDiv’).filter(‘#MyLink’)

24. Set-based Selectors $(‘div:first') $(‘div:last') $(‘div:even') $(‘div:odd')

25. Ajax Call web service from jQuery

26. Plug-Ins jQuery is extensible! jQueryUI

27. jQuery UI

28. Help! docs.jquery.com api.jquery.com jqueryui.com/demos

29. David Giard DavidGiard.com TechnologyAndFriends.com DavidGiard@DavidGiard.com

30. Telerik Telerik.com