Your SlideShare is downloading. ×
J query
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

J query

886
views

Published on

How I Learned to stop worrying and love jQuery

How I Learned to stop worrying and love jQuery

Published in: Technology, Education

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
886
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
12
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • Sour
  • Transcript

    • 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