Published on

Published in: Technology
  • Be the first to comment

  • Be the first to like this

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
  • 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.
  • 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.
  • 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.
    jQuery can modifiy the 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
  • #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 else
    So 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 isCool
    Lets break it down on the next page
  • We check for the DOM to be ready by the $(function() wrapper
    We use the $ to initialize a jquery function
    Then 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 code
    And then close the document ready wrapper
    Double 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 jquery
    Simple things that you've seen a lot before.
    Div p classes etc
    In 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 html
    Note 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 intact
  • You can show a div by running the show method.
    There is a hide method as well.
  • Text will change the inner text of a DOM element
  • Methods can be separated across multiple lines. Or kept on the same line
    This is a best practice for code readability
    Make sure you end your chain with a semicolon;
  • Plenty of examples of basic methods within jQuery.
  • Questions so far about 15 minutes
  • Lets get into the meat of jQuery for beginners
  • Trust me on this
  • All demos are on JS Bin. It’s a javascript sandbox that allows you to edit my code examples directly.
  • Jquery

    1. 1. 1 Girish Srivastava girish092.ch@gmail.com
    2. 2. Objective  In this tutorial, we will learn everything about the jQuery. After completing the tutorial you will be able to understand about jQuery.  This jQuery tutorial covers: Introduction to jQuery  Features of jQuery  Comparison between different tool kits  Jquery Selectors  2
    3. 3. What’s the problem ? with JavaScript
    4. 4. JavaScript was a initially introduced in Netscape 2.0B3 in Dec 1995, LiveScript, Jscript, however, it’s official name is ECMAScript
    5. 5. JavaScript is a C-family, world’s worst named, extremely powerful language (not a script), totally unrelated to Java
    6. 6. JavaScript is a weakly typed, classless, prototype based OO language, that can also be used outside the browser. It is not a browser DOM.
    7. 7. The world’s most misunderstood programming language. (Douglas Crockford)
    8. 8. Browser DOM really sucks, and this is where jQuery comes to rescue.
    9. 9. This session is about improving your Quality of Life !
    10. 10. Introduction to jQuery
    11. 11. A Little Bit About jQuery What is jQuery? •jQuery is an Open-Source JavaScript framework that simplifies crossbrowser client side scripting. • Animations • DOM manipulation • AJAX • Extensibility through plugins •jQuery was created by John Resig and released 01/06 •Most current release is 1.7.2 (3/19/12) 11
    12. 12. A Little Bit About jQuery Why should you use it? •Easy to learn! It uses CSS syntax for selection •Its tiny 71KB (24KB, minified and Gzipped) •Documented api.jquery.com & Supported forum.jquery.com •Cross browser compatibility: IE 6+, FF 2+ •It is the most used JavaScript library on the web today • 39% of all sites that use JavaScript use jQuery.  trends.builtwith.com/javascript/JQuery <- See, I'm not a liar.. 12
    13. 13. Features Of Jquery.  jQuery includes the following features:  DOM element selections using the cross-browser open source selector engine Sizzle, a spin- off out of the jQuery project  DOM traversal and modification (including support for CSS 1-3)  DOM manipulation based on CSS selectors that uses node elements name and node elements attributes (id and class) as criteria to build selectors  Events  Effects and animations  Ajax  Extensibility through plug-ins  Cross-browser support 13
    14. 14. All Other Frameworks 14
    15. 15. Who Uses jQuery? docs.jquery.com/Sites_Using_jQuery 15
    16. 16. JQuery versus Dojo versus YUI 16
    17. 17. 17
    18. 18. When we compare these 3 libraries/frameworks, I found the following which was quite useful. http://selectors.turnwheel.com/slickspeed.php 18
    19. 19. jQuery vs MooTools Library Size jQuery Core 55.9K MooTools Core 64.3K Features License DOM Utilites MIT & GPL yes MIT yes Animation Event Handling yes yes yes yes CSS3 Selectors Ajax yes (a subset) yes yes (a subset) yes Native Extensions (excluding about a dozen for Array, Element) Object, and String about six dozen for Array, Object, String, Function, and Number Inheritance Provided with Class  constructor 19 Not supported directly with jQuery
    20. 20. The Mottos Say It All If you go to the jQuery site, here's what it says at the top of the page: o jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript. ...and if you go to MooTools, this is what you'll find: o MooTools is a compact, modular, Object-Oriented JavaScript framework designed for the intermediate to advanced JavaScript developer. It allows you to write powerful, flexible, and cross-browser code with its elegant, well documented, and coherent API. 20
    21. 21. 21
    22. 22. Historical trend  This diagram shows the historical trend in the percentage of websites using JQuery. 22
    23. 23. position  This diagram shows the market positions in terms of popularity and traffic of the 5 most popular JavaScript libraries.  23
    24. 24. What is the DOM? Document Object Model (DOM): noun Blah blah blah long definition that makes little sense…. 24
    25. 25. What Is The DOM?  Long story short, the DOM is your html document code. From the  <!DOCTYPE> to the </html>  The DOM is loaded top to bottom, so include your scripts at the bottom of the page for best performance.  The DOM is "ready" when everything on the page has loaded. • Stylesheets • JavaScripts • Images 25
    26. 26. Wait!!  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).  Q. How can I be sure my code runs at DOM ready?  A. Wrap all your jQuery code with the document ready function: $(document).ready(function(){  }); 26 // insert sweet, sweet jQuery code here…
    27. 27. And What If I Don't Wanna, Huh? 1 of 3 things will happen: 1. Code doesn't work, throws an error (90%) Code works… this page load, next page load see #1. (~9%) 3. 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%) 2.  27 *(has yet to be fully verified)
    28. 28. jQuery Core Concepts
    29. 29. The Magic $() function var el = $(“<div/>”) Create HTML elements on the fly
    30. 30. The Magic $() function $(window).width() Manipulate existing DOM elements
    31. 31. The Magic $() function $(“div”).hide(); $(“div”, $(“p”)).hide(); Selects document elements (more in a moment…)
    32. 32. The Magic $() function $(function(){…}); Fired when the document is ready for programming. Better use the full syntax: $(document).ready(function(){…});
    33. 33. 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 33
    34. 34. 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. 34
    35. 35. jQuery Syntax The jQuery syntax is tailor made for selecting HTML elements and perform some action on the element(s). Basic syntax is: $(selector).action() A dollar sign to define jQuery A (selector) to "query (or find)" HTML elements A jQuery action() to be performed on the element(s) 35
    36. 36. Three Major Concepts of jQuery The $() function Get > Act Chainability
    37. 37. jQuery Selectors
    38. 38. All Selector $(“*”) // find everything Selectors return a pseudo-array of jQuery elements
    39. 39. Basic Selectors By Tag: $(“div”) // <div>Hello jQuery</div> By ID: $(“#usr”) // <span id=“usr”>John</span> By Class: $(“.menu”) // <ul class=“menu”>Home</ul> Yes, jQuery implements CSS Selectors!
    40. 40. 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> 40
    41. 41. Break It Down Now! $(function(){// = $(document).ready(function(){ $ }); 41 ("p") .addClass("isCool");
    42. 42. All Your Basic Selectors Are Belong To Us Uses the same syntax you use to style elements in CSS! api.jquery.com/category/selectors/ 42
    43. 43. Get Classy <p> jsbin.com/ecayo3/18#slide22 jQuery: $("p").addClass("sophisticated"); Before: <p> After: <p class="sophisticated"> 43
    44. 44. This <p> Has No Class At All! jQuery: $("p").removeClass("sophisticated"); Before: <p class="sophisticated"> After: <p class=""> 44
    45. 45. <div> Hide and Seek jQuery: $("div").show(); Before: <div style="display:none;"> After: <div style="display:block;"> 45
    46. 46. 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> 46
    47. 47. You Can Chain Most Methods Together $("p")    47 .addClass("sophisticated") .text("Hello World!") .show();
    48. 48. Some of Basic Methods api.jquery.com/ 48
    49. 49. A Simple Example:  <html> <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("p").click(function(){ $(this).hide(); }); }); </script> </head> <body> <p>If you click on me, I will disappear.</p> </body> </html> 49
    50. 50. Downloading jQuery Two versions of jQuery are available for downloading: one minified and one uncompressed (for debugging or reading). Both versions can be downloaded from  http://docs.jquery.com/Downloading_jQuery#Download_jQuery 50
    51. 51. Alternatives to Downloading If you don't want to store the jQuery library on your own computer, you can use the hosted jQuery library from Google or Microsoft. Google <head> <script type="text/javascript" src="http://ajax.googleapis.c om/ajax/libs/jquery/1.4.2/jq uery.min.js"></script> </head> 51 Microsoft <head> <script type="text/javascript" src="http://ajax.microsoft.c om/ajax/jquery/jquery1.4.2.min.js"></script> </head>
    52. 52. Questions? http://www.jquerymagic.com/ 52
    53. 53. Plugins 53
    54. 54. 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.” plugins.jquery.com 54
    55. 55. Great References John Resig's introduction slides jQuery 1.4 Cheat Sheet jQuery API jQuery Forums YAYquery Podcast (explicit) http://docs.jquery.com/How_ jQuery_Works DEMOS: jsbin.com/ecayo3/18 55
    56. 56. I Like Plugins! Show Us More! 56
    57. 57. For any queries mail: girish092.ch@gmail.com 57