here is my presentation on Intro to jQuery to the NYS forum's Webmasters Guild

1. Eric.Steinborn@dcjs.state.ny.us

2. Poll

3. Just Thought you should know

4. Eric Steinborn IT2P @ NYS Division of Criminal Justice Services since 2006 15+ years experience with web technologies Work in a group of 3 Maintain our intranet (DCJSnet) Help with internet and extranet sites A few things I'm awesome at are: CSS, JavaScript, Interactivity, Prog Enhancement, UX, SEO, Accessibility I do what I love -> I love my job!

6. Animations

7. DOM manipulation

8. AJAX

9. Extensibility through plugins

10. jQuery was created by John Resig and released 01/06

11. Most current release is 1.4.2 (2/19/10)A Little Bit About jQuery

13. Its tiny 71KB (24KB, minified and Gzipped)

14. Documentedapi.jquery.com & Supported forum.jquery.com

15. Cross browser compatibility: IE 6+, FF 2+

16. It is the most used JavaScript library on the web today

17. 39% of all sites that use JavaScript use jQuery.

18. trends.builtwith.com/javascript/JQuery <- See, I'm not a liar..A Little Bit About jQuery

19. I <3 The jQuery Community

21. PWNS All Other Frameworks

22. Who Uses jQuery? docs.jquery.com/Sites_Using_jQuery

23. Who Uses jQuery In NY?

24. What is the DOM? Document Object Model (DOM): noun Blah blahblah long definition that makes little sense….

26. JavaScripts

28. And What If I Don't Wanna, Huh? 1 of 3 things will happen: Code doesn't work, throws an error (90%) Code works… this page load, next page load see #1. (~9%) Code opens a worm hole that transports your page back to 1990 revolutionizing the Web as we know it. While seemingly great, it also creates a paradox and destroys the universe. * (<1%) *(has yet to be fully verified)

29. We get it Eric, you're a geek…Get to the jQuery already! Your about ta get a wedgie NERD!* *spelling intentional

30. Loading jQuery In order to use jQuery you need to load it. You can include it locally on your own server: <script src="/js/jquery.js"> Or use one of the CDN's made available: ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js ajax.microsoft.com/ajax/jquery/jquery-1.4.2.js CDN's are Gzipped and minified

31. Load Scripts At The Bottom Problem: When scripts are downloading they block everything else in almost all browsers! Solution: Best practice: Load your scripts at the bottom of your page so they don't interrupt page content downloads.

32. And BOOM! Goes The Dynamite. jsbin.com/ecayo3/18#slide19 Html: <p>Hello World! I'm Eric</p> Script: $(function(){ $("p").addClass("isCool"); //keep telling yourself that.. }); Resulting html: <p class="isCool">Hello World! I'm Eric</p>

33. Break It Down Now! $ ("p") .addClass("isCool"); Grabs a DOM element using a CSS selector. Built in method that adds a class to the jQuery Collection $(function(){// = $(document).ready(function(){ Initiates the jQuery function Selector is in quotes. Class is in quotes. Creates a jQuery “Collection” $ = jQuery ends with a semicolon. <p> });

34. All Your Basic Selectors Are Belong To Us Uses the same syntax you use to style elements in CSS! api.jquery.com/category/selectors/

35. Get Classy <p> jQuery: $("p").addClass("sophisticated"); Before: <p> After: <p class="sophisticated"> jsbin.com/ecayo3/18#slide22

36. This <p> Has No Class At All! jQuery: $("p").removeClass("sophisticated"); Before: <p class="sophisticated"> After: <p class=""> jsbin.com/ecayo3/18#slide22

37. <div> Hide and Seek jQuery: $("div").show(); Before: <div style="display:none;"> After: <div style="display:block;"> jsbin.com/ecayo3/18#slide24

38. I’m Not Lame, Am I? jQuery: $("#eric").text("Is Cool"); Before: <p id="eric">Is Lame</p> After: <p id="eric">Is Cool</p> jsbin.com/ecayo3/18#slide25

39. You Can Chain Most Methods Together $("p") .addClass("sophisticated") .text("Hello World!") .show(); jsbin.com/ecayo3/18#slide26

40. Click Events Are Awesome! $("#eric").click(function(){ $(this).text("Is Cool"); // this = #eric alert("Take that High School!"); }); $("#eric").click(function(event){ $(this).text("Is Cool"); // this = #eric alert("Take that High School!"); event.preventDefault(); //Prevents default action }); jsbin.com/ecayo3/18#slide27

41. Some of Basic Methods api.jquery.com/

42. Getters and Setters

43. Dual Purpose Methods

44. Use jQuery To Get <p>Eric</p>

45. Use jQuery To Set <p>Eric</p>

46. Questions?

47. Plugins

48. Viva Variety! “If you want to create an animation, effect or UI component, chances are pretty good that someone has done your work for you already.” -Eric Steinborn 2010 plugins.jquery.com

49. I Will Be Covering These Plugins

50. That's Just Typical.. Download the plugin from its site. Depending on the plugin you can have 1 or more files to install. Copy the plugin, and any of its dependencies to your server. If needed call css <link href="plugincss.css" /> Call jQuery <script src="jQuery.js"> Call the plugin <script src"jQuery.pluginname.js"> Initialize plugin $("#mypluginContainer").pluginInit();

51. Go-Go-Get ColorBox! Go to colorpowered.com/colorbox/ This is what you'll get

52. Go-Go-Install ColorBox! Extract min.js to my "/js/plugins/" folder I like example 2 so I'll extract These to my /css/ folder

53. Go-Go-Prep ColorBox! In the <head> type: <link rel="stylesheet" href="css/colorbox.css" media="screen" /> In the <body> type: <a href="unicorn.jpg" rel="colorbox"><imgsrc="unicorn-t.jpg" /></a> <a href="rainbows.jpg" rel="colorbox"><imgsrc="rainbows-t.jpg" /></a> <a href="sparkles.jpg" rel="colorbox"><imgsrc="sparkles-t.jpg" /></a> Before the ending </body> type: <script type="text/javascipt" src="js/jquery.js"></script> <script type="text/javascipt" src="js/jquery.colorbox-min.js"></script> <script type="text/javascipt"></script>

54. Go-Go-Gadget ColorBox! Inside the empty <script> tag I just entered I'll init ColorBox <script> $(function(){ $("a[rel='colorbox']").colorbox(); }); </script> Now anytime I click on a thumbnail, I’ll see a ColorBox with my image in it.

55. Go-Go-Cut It Out Already! jsbin.com/ecayo3/18#slide41 Set custom options for ColorBox like this: $("a[rel='colorbox']").colorbox({ slideshow: true, // shows all your images in sequence slideshowSpeed: 5000, // set the speed of the slideshow in MS transition: "fade",// set the transition between images speed: 1000// set the speed of the transition in MS }); Download ColorBox @ colorpowered.com/colorbox/

56. tablesorter Head: <link href="css/tablesorter.css" /> HTML: <table id="ericsDreams"><!--full table code --></table> Foot: <script src="js/jquery.tablesorter.min.js"></script> <script> $(function(){ $("#ericsDreams").tablesorter(); }); </script>

57. tablesorter Options http://jsbin.com/ecayo3/18#slide43 Set custom options for tablesorter like this: $("#ericsDreams").tablesorter({ widgets: ['zebra']// Zebra stripes alternating rows }); Download tablesorter @ tablesorter.com/docs/

58. ListNav Head: <link href="css/listnav.css" /> HTML: <div id="ericsDreams-nav"></div> <!--needed for nav list--> <ul id="ericsDreams"><!--lots of li's --></ul> Foot: <script src="js/jquery.listnav.min.2.1.js"></script> <script> $(function(){ $("#ericsDreams").listnav(); }); </script>

59. ListNav Options jsbin.com/ecayo3/18#slide45 Set custom options for ListNav like this: $("#ericsDreams").listnav({ showCounts: false, // Don’t show counts above letters noMatchText: "Fail!", // Custom text for invalid selections cookieName: "Dreams", // Selection saved in Cookie includeOther: true// Include an Other option [~!@#] }); // include cookie plugin for cookieName to function Download ListNav @ ihwy.com/Labs/jquery-listnav-plugin.aspx

60. Great References John Resig's introduction slides jQuery 1.4 Cheat Sheet jQuery API jQuery Forums YAYquery Podcast (explicit) DEMOS: jsbin.com/ecayo3/18 eric.steinborn@dcjs.state.ny.us

61. I Like Plugins!Show Us More!