J query

  • 861 views
Uploaded on

How I Learned to stop worrying and love jQuery

How I Learned to stop worrying and love jQuery

More in: Technology , Education
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
861
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
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