Intro to jQuery


Published on

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

Published in: Technology
1 Comment
No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • Jquery is totally awesome.I hate how expensive trainings are. So I wanted to give you all training here today that’s priceless.I really like to learn things at meetings
  • Who uses javascript on their sitesWho uses JavaScript everydaywho uses frameworks (mootools, Dojo, prototype etc)Who uses jQuery
  • Me
  • Open Source JavaScript framework.Jquery was created by John Resig in 2006 and since then has exploded into popularity in the web community.
  • It uses CSS rules to grab DOM elements that's why its so easy to use, because we all know how to address com elements with css already.Its really small, it loads really fast in most browsers.The community is great. I had a question once about how to do something for the new homepage. I asked the question before i left work and had a response by my ride home.And its compatible with most major browsers. If you make something that works in FF itll work in IE6 guaranteed.
  • I created this awesome idea to display missing children information on our home page when there was a missing child alert.I just couldn’t figure out how to parse the data I was getting from the page with the kid info on it.So I asked the forums. and
  • Adam J Sontag from the yayQuery podcast answered my question in 13 minutes.13 minutes.yayQuery podcast has an explicit tag for sparse foul language, nothing terrible. Just if you don’t want your kids hearing the f or s words then use headphones.
  • Swf object is for putting flash on a page, the closest actual pure JavaScript framework is prototype.And don’t forget that jQueryUI, a part of jQuery is included in this list, above even mootools.
  • You can see this list on their website.Microsoft just announced that they are going to be dedicating coder time and resources to improving jQuery core, and its plugins. This is HUGE.Mention anti microsoft sentiment, and the fact that even microsoft wants IE6 to die.
  • This is just a couple of agencies across NY that use jQuery
  • So I mentioned the DOM before, what exactly is the DOM?
  • The Document Object Model.The DOM is everything you write in your html documents, images, css, all your tags, everything.The DOM is a mess. There are a million different ways to accomplish things within it and many different doctypes and uppercase and lowercase are allowed attributes that sometimes need quotes, and othertimes don’t. jQuery is coded around all those inconsistencies.jQuerycan modifiythe DOM, but it cant do so untill the DOM is ready.
  • So we wrap all our jQuery code inside some code. Its called the document ready function, and it is only run after all your page has loaded.Shorthand is$(function(){});
  • #1 is closer to 99%
  • Loading from the CDN’s is usually the fastest way, because if you are downloading from one place, you can be downloading from another place at the same time.We usually load it on our servers.
  • Load at the bottom f the page because when the browser is downloading javascripts it blocks everything elseSo lets light the fuse now…
  • So lets see what we’re up against.We begin with a plain P tag and end with a p tag with a class of isCoolLets break it down on the next pageDEMO
  • We check for the DOM to be ready by the $(function() wrapperWe use the $ to initialize a jquery functionThen we surround a CSS selector with parenthesis and quotes (all P’s will be selected)Then I initiate a jquery method called addClass and tell it what class to add. It's a good thing to note that I don't add a . Before isCool when adding removing classes. Most methods are alike in how they are called, be careful to check to api to see how to use each method.I end with a semicolon just like most lines of javascript codeAnd then close the document ready wrapperDouble quotes can be swapped with single quotes. Same rules apply as normal html or javascript, if you use one you have to end one before switching to the other.
  • Here you can see some of the basic css selectors supported by jquerySimple things that you've seen a lot before. Div p classes etcIn order to not select everything, make sure to be specific with your CSS selector
  • I want to make this p tag classy,So I’m going to use the addClass method on it and add the sophisticated class to it you see the before and after htmlNote the lack of . Before the class name, that’s only needed for selection
  • I remove classes with a different method, but the way in which I do it stays the same.If there were other classes on the p tag they would stay intactDEMO
  • You can show a div by running the show method.There is a hide method as well.DEMO
  • Text will change the inner text of a DOM elementDEMO.
  • Methods can be separated across multiple lines. Or kept on the same lineThis is a best practice for code readabilityMake sure you end your chain with a semicolon;DEMO
  • Click events are a bit different.In order to have code run when you click you need to declare a function to encapsulate the code you want to runWe create an anonymous function that calls this element (#eric)And it changes the text to Is Cool and throw a javascript alertIf we wanted to prevent the default action, say href=“index.html”Then we call event inside the parenthesis after the function and call event.preventDefault() to prevent the default action of the button
  • Plenty of examples of basic methods within jQuery.
  • Getters and setters. These are jquery methods that can give you a value or set a value.You can set a variable to any of these gettersText can get a value or set a value
  • To get a value you call a method with empty parens. Some functions are different, please check api ex css uses a different syntaxNormally youd set a variable equal to a value of a jquery method getter.Both of these functions do the same
  • Set a value by including the new value in quotes is how u set it to a literal valueOr reference a variable by not using quotes.Both do the same thing
  • Questions so far about 15 minutes
  • Lets get into the meat of jQuery for beginners
  • Trust me on this
  • Left out qTip due to timing constraints
  • This is your typical plugin installation
  • Colorbox = jsContent = demosExamples = themesInclused the illustrator file for creating your own custom themeREAD THE README
  • First img is of the /colorbox/Second is the /example3/Colorbox references images in the folder that’s in direct relation to the placement of the css file.
  • HeadBodyScript – empty, next page
  • A rel= is an advanced CSS3 selector.
  • Here are some of the options that can be set for colorbox. Check the full list on their websiteDEMO
  • DEMO
  • DEMO
  • All demos are on JS Bin. It’s a javascript sandbox that allows you to edit my code examples directly.
  • Intro to jQuery

    1. 1.<br />
    2. 2. Poll<br />
    3. 3. Just Thought you should know<br />
    4. 4. Eric Steinborn<br />IT2P @ NYS Division of Criminal Justice Services since 2006<br />15+ years experience with web technologies<br />Work in a group of 3<br />Maintain our intranet (DCJSnet)<br />Help with internet and extranet sites<br />A few things I'm awesome at are:<br />CSS, JavaScript, Interactivity, Prog Enhancement, UX, SEO, Accessibility<br />I do what I love -> I love my job!<br />
    5. 5. What is jQuery?<br /><ul><li>jQuery is an Open-Source JavaScript framework that simplifies cross-browser client side scripting.
    6. 6. Animations
    7. 7. DOM manipulation
    8. 8. AJAX
    9. 9. Extensibility through plugins
    10. 10. jQuery was created by John Resig and released 01/06
    11. 11. Most current release is 1.4.2 (2/19/10)</li></ul>A Little Bit About jQuery<br />
    12. 12. Why should you use it?<br /><ul><li>Easy to learn! It uses CSS syntax for selection
    13. 13. Its tiny 71KB (24KB, minified and Gzipped)
    14. 14. & Supported
    15. 15. Cross browser compatibility: IE 6+, FF 2+
    16. 16. It is the most used JavaScript library on the web today
    17. 17. 39% of all sites that use JavaScript use jQuery.
    18. 18. <- See, I'm not a liar..</li></ul>A Little Bit About jQuery<br />
    19. 19. I <3 The jQuery Community<br />
    20. 20.
    21. 21. PWNS All Other Frameworks<br />
    22. 22. Who Uses jQuery?<br /><br />
    23. 23. Who Uses jQuery In NY?<br />
    24. 24. What is the DOM?<br />Document Object Model (DOM): noun<br />Blah blahblah long definition that makes little sense….<br />
    25. 25. What Is The DOM?<br />Long story short, the DOM is your html document code. From the <br /><!DOCTYPE> to the </html><br />The DOM is loaded top to bottom, so include your scripts at the bottom of the page for best performance.<br />The DOM is "ready" when everything on the page has loaded. <br /><ul><li>Stylesheets
    26. 26. JavaScripts
    27. 27. Images</li></li></ul><li>Wait!! <br />In order to make sure that jQuery can find the element you asked it for, your browser needs to have loaded it (the DOM needs to be ready).<br />Q. How can I be sure my code runs at DOM ready?<br />A. Wrap all your jQuery code with the document ready function:<br />$(document).ready(function(){<br /> // insert sweet, sweet jQuery code here…<br />});<br />
    28. 28. And What If I Don't Wanna, Huh?<br />1 of 3 things will happen:<br />Code doesn't work, throws an error (90%)<br />Code works… this page load, next page load see #1. (~9%)<br />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%)<br />*(has yet to be fully verified)<br />
    29. 29. We get it Eric, you're a geek…Get to the jQuery already!<br />Your about ta get a wedgie NERD!*<br />*spelling intentional<br />
    30. 30. Loading jQuery<br />In order to use jQuery you need to load it.<br />You can include it locally on your own server:<br /><script src="/js/jquery.js"><br />Or use one of the CDN's made available:<br /><br /><br />CDN's are Gzipped and minified<br />
    31. 31. Load Scripts At The Bottom<br />Problem:<br />When scripts are downloading they block everything else in almost all browsers!<br />Solution:<br />Best practice: Load your scripts at the bottom of your page so they don't interrupt page content downloads.<br />
    32. 32. And BOOM! Goes The Dynamite.<br /><br />Html:<br /><p>Hello World! I'm Eric</p><br />Script:<br />$(function(){ <br />$("p").addClass("isCool");<br />//keep telling yourself that..<br />});<br />Resulting html:<br /><p class="isCool">Hello World! I'm Eric</p><br />
    33. 33. Break It Down Now!<br />$<br />("p")<br />.addClass("isCool");<br />Grabs a DOM element using a CSS selector.<br />Built in method that adds a class to the jQuery Collection<br />$(function(){// = $(document).ready(function(){<br />Initiates the jQuery function<br />Selector is in quotes.<br />Class is in quotes.<br />Creates a jQuery “Collection”<br />$ <br />=<br /> jQuery<br />ends with a semicolon.<br /><p><br />});<br />
    34. 34. All Your Basic Selectors Are Belong To Us<br />Uses the same syntax you use to style elements in CSS!<br /><br />
    35. 35. Get Classy <p><br />jQuery:<br />$("p").addClass("sophisticated");<br />Before:<br /><p><br />After:<br /><p class="sophisticated"><br /><br />
    36. 36. This <p> Has No Class At All!<br />jQuery:<br />$("p").removeClass("sophisticated");<br />Before:<br /><p class="sophisticated"><br />After:<br /><p class=""><br /><br />
    37. 37. <div> Hide and Seek<br />jQuery:<br />$("div").show();<br />Before:<br /><div style="display:none;"><br />After:<br /><div style="display:block;"><br /><br />
    38. 38. I’m Not Lame, Am I?<br />jQuery:<br />$("#eric").text("Is Cool");<br />Before:<br /><p id="eric">Is Lame</p><br />After:<br /><p id="eric">Is Cool</p><br /><br />
    39. 39. You Can Chain Most Methods Together<br />$("p")<br /> .addClass("sophisticated")<br /> .text("Hello World!")<br /> .show();<br /><br />
    40. 40. Click Events Are Awesome!<br />$("#eric").click(function(){<br />$(this).text("Is Cool"); // this = #eric<br />alert("Take that High School!");<br />});<br />$("#eric").click(function(event){<br />$(this).text("Is Cool"); // this = #eric<br /> alert("Take that High School!");<br />event.preventDefault(); //Prevents default action<br />});<br /><br />
    41. 41. Some of Basic Methods<br /><br />
    42. 42. Getters and Setters<br />
    43. 43. Dual Purpose Methods<br />
    44. 44. Use jQuery To Get<br /><p>Eric</p><br />
    45. 45. Use jQuery To Set<br /><p>Eric</p><br />
    46. 46. Questions?<br />
    47. 47. Plugins<br />
    48. 48. Viva Variety!<br />“If you want to create an animation, effect or UI component, chances are pretty good that someone has done your work for you already.”<br />-Eric Steinborn 2010<br /><br />
    49. 49. I Will Be Covering These Plugins<br />
    50. 50. That's Just Typical..<br />Download the plugin from its site. <br />Depending on the plugin you can have 1 or more files to install.<br />Copy the plugin, and any of its dependencies to your server.<br />If needed call css <link href="plugincss.css" /><br />Call jQuery <script src="jQuery.js"> <br />Call the plugin <script src"jQuery.pluginname.js"><br />Initialize plugin $("#mypluginContainer").pluginInit();<br />
    51. 51. Go-Go-Get ColorBox!<br />Go to<br />This is what you'll get<br />
    52. 52. Go-Go-Install ColorBox!<br />Extract min.js to my "/js/plugins/" folder<br />I like example 2 so I'll extract <br />These to my /css/ folder<br />
    53. 53. Go-Go-Prep ColorBox!<br />In the <head> type:<br /> <link rel="stylesheet" href="css/colorbox.css" media="screen" /><br />In the <body> type:<br /><a href="unicorn.jpg" rel="colorbox"><imgsrc="unicorn-t.jpg" /></a><br /> <a href="rainbows.jpg" rel="colorbox"><imgsrc="rainbows-t.jpg" /></a><br /> <a href="sparkles.jpg" rel="colorbox"><imgsrc="sparkles-t.jpg" /></a><br />Before the ending </body> type:<br /> <script type="text/javascipt" src="js/jquery.js"></script><br /> <script type="text/javascipt" src="js/jquery.colorbox-min.js"></script><br /> <script type="text/javascipt"></script><br />
    54. 54. Go-Go-Gadget ColorBox!<br />Inside the empty <script> tag I just entered I'll init ColorBox<br /><script><br />$(function(){<br />$("a[rel='colorbox']").colorbox();<br /> });<br /></script><br />Now anytime I click on a thumbnail, I’ll see a ColorBox with my image in it.<br />
    55. 55. Go-Go-Cut It Out Already!<br /><br />Set custom options for ColorBox like this:<br />$("a[rel='colorbox']").colorbox({<br />slideshow: true, // shows all your images in sequence<br />slideshowSpeed: 5000, // set the speed of the slideshow in MS<br /> transition: "fade",// set the transition between images<br /> speed: 1000// set the speed of the transition in MS<br />});<br />Download ColorBox @<br />
    56. 56. tablesorter<br />Head:<br /> <link href="css/tablesorter.css" /><br />HTML:<br /><table id="ericsDreams"><!--full table code --></table><br />Foot:<br /> <script src="js/jquery.tablesorter.min.js"></script><br /> <script><br />$(function(){<br />$("#ericsDreams").tablesorter();<br /> });<br /> </script><br />
    57. 57. tablesorter Options<br /><br />Set custom options for tablesorter like this:<br />$("#ericsDreams").tablesorter({<br />widgets: ['zebra']// Zebra stripes alternating rows<br />});<br />Download tablesorter @<br />
    58. 58. ListNav<br />Head:<br /> <link href="css/listnav.css" /><br />HTML:<br /><div id="ericsDreams-nav"></div> <!--needed for nav list--><br /><ul id="ericsDreams"><!--lots of li's --></ul><br />Foot:<br /> <script src="js/jquery.listnav.min.2.1.js"></script><br /> <script><br />$(function(){<br />$("#ericsDreams").listnav();<br /> });<br /> </script><br />
    59. 59. ListNav Options<br /><br />Set custom options for ListNav like this:<br />$("#ericsDreams").listnav({<br />showCounts: false, // Don’t show counts above letters<br />noMatchText: "Fail!", // Custom text for invalid selections<br />cookieName: "Dreams", // Selection saved in Cookie<br />includeOther: true// Include an Other option [~!@#]<br />});<br />// include cookie plugin for cookieName to function<br />Download ListNav @<br />
    60. 60. Great References<br />John Resig's introduction slides<br />jQuery 1.4 Cheat Sheet<br />jQuery API<br />jQuery Forums<br />YAYquery Podcast (explicit)<br />DEMOS:<br /><br /><br />
    61. 61. I Like Plugins!Show Us More!<br />