• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
J query
 

J query

on

  • 1,061 views

How I Learned to stop worrying and love jQuery

How I Learned to stop worrying and love jQuery

Statistics

Views

Total Views
1,061
Views on SlideShare
1,058
Embed Views
3

Actions

Likes
0
Downloads
11
Comments
0

2 Embeds 3

http://www.davidgiard.com 2
http://davidgiard.com 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • Sour

J query J query Presentation Transcript

  • How I LearnedTo Stop Worryingand Love jQuery
    David Giard, Sogeti USA
    C# MVP
    MCTS, MCSD, MCSE, MCDBA
    DavidGiard.com
  • JavaScript
    Dynamic language
    Client-side (usually)
    Interact with DOM
  • JavaScript in your page
    <script type="text/javascript"> …</script>
    <script type="text/javascript“src=“xxx.js"> </script>
  • JavaScript: The Good Parts
    Interactive web pages
    Fast
    Ajax
  • JavaScript: The Bad Parts
    Cross-browser issues
    Cross-platform issues
  • JavaScript Frameworks
    jQuery
    Prototype
    Dojo
    Mootools
    ExtJs
    etc…
    jQuery
  • jQuery
    JavaScript Abstraction
    Cross-Browser
    Built-In Functions
    Fast
    Unobtrusive
    Popular
    Ships with Visual Studio 2010
  • jQuery Popularity
    Source: http://royal.pingdom.com
  • jQuery Popularity
    Source: http://royal.pingdom.com
  • 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
  • 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
  • Enable jQuery
    Download from jQuery.com
    <script type="text/javascript" src="jquery-1.6.1.min.js"></script>
  • 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>
  • 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”);
  • jQuery Syntax
    jQuery keyword
    Selectors
    Events
    Functions / Methods
  • “jQuery” Keyword
    jQuery
    $
    Represents the jQueryobject
    Indicates what follows is jQuery
  • Selectors
    Returns a set of objects
    Call method on each object
    Bind event to each object
  • 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
  • jQuery Selectors
    $(selector)
    where selector is:
  • (document).ready
    $(document).ready(function(){

    });
  • Events
    $(document).ready(function(){
    $(“#MyDiv”).click(function(){

    });
    });
  • Methods
    $(document).ready(function(){
    $(“#MyDiv”).click(function(){
    $(“a”).attr(“target”, “_blank”);
    });
    });
  • Combining Selectors
    Containership$(‘selector1’ ‘selector2’)Ex: $(‘div a’)
    Narrow scope$(‘Selector1Selector2’)Ex: $(‘a#MyLink’)
    Filter$(selector1).filter(selector2)Ex: $(‘#MyDiv’).filter(‘#MyLink’)
  • Set-based Selectors
    $(‘div:first')
    $(‘div:last')
    $(‘div:even')
    $(‘div:odd')
  • Ajax
    Call web service from jQuery
  • Plug-Ins
    jQuery is extensible!
    jQueryUI
  • jQuery UI
  • Help!
    docs.jquery.com
    api.jquery.com
    jqueryui.com/demos
  • David Giard
    DavidGiard.com
    TechnologyAndFriends.com
    DavidGiard@DavidGiard.com
  • Telerik
    Telerik.com