J query
Upcoming SlideShare
Loading in...5
×
 

J query

on

  • 1,574 views

 

Statistics

Views

Total Views
1,574
Views on SlideShare
1,574
Embed Views
0

Actions

Likes
0
Downloads
45
Comments
0

0 Embeds 0

No embeds

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

J query J query Presentation Transcript

  • Introduce jQuery
    By Bank2u
  • jQuery
    Cross-browser javascript library
    Free & Opensource
    First released Jan 06 @Barcamp by John Resig
    Last stable version 1.4.2
  • Why jQuery ?
    Cross-browser compatibility
    Fast & Small
    Plug-in
    Learning curve & Documentation
    Intellisense in VS2008-2010
    Microsoft [Ajax Lib & MVC]
  • Why jQuery ?
  • Who’s using jQuery
    Microsoft
    Google
    Mozilla
    digg
    Wordpress & Drupal
    HP - IBM - Intel.
    Ruby on Rails
  • Getting Start
    Download jQuery at jquery.com
    <script type="text/javascript" src="/js/jQuery. js"></script>
    Microsoft CDN or Google CDN
    <script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.js" type="text/javascript"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
  • Hello world jQuery
    Document ready
    $(document).ready(function () {
    alert("Hello world jQuery");
    });
    // Short cut
    $(function () {
    alert("Hello world jQuery");
    });
  • jQuery Philosophy
    Find someone from HTML
    (selector)
    Do something to it
    (method)
  • Find some element
  • Selector
    CSS Style
    $(“#myID”) // by id
    $(“.myClass”) // by class name
    $(“myTag”) // by tag (element name)
    $(“#id, .class, tag”) // multiple
  • Selector [Hierarchy]
    $("form input") // descendant
    $("#main > *") // child
    $("#prev ~ div") // sibling
  • Selector [Hierarchy]
    $("form input") // descendant
    <form>
    <div>
    Form is surrounded by the green outline</div>
    <label>
    Child:</label>
    <input name="name" />
    <fieldset>
    <label>
    Grandchild:</label>
    <input name="newsletter" />
    </fieldset>
    </form>
  • Selector [Attribute]
    $("div[id]"). //has
    $("input[name='bank']“) //not has
    $("input[name^='news']") //equal
    $("input[name$='letter']") //begin with
    $("input[name$='letter']") //end with
    $("input[name*='man']") //contain
    $("input[id][name$='man']")
  • Selector [Form]
    $("div :text")
    $("form :radio")
    $("#dvMainForm :checkbox")
    $(":button")
    $("input:disabled")
    $("input:checked")
  • Do something with them
  • Attribute
    $("em").attr("title")
    $("label").html()
    $("p:first").text()
    $("input").val()
    Get
    • $("em").attr("title", "zupzip")
    • $("label").html("zupzip")
    • $("p:first").text("zupzip")
    • $("input").val("zupzip")
    Set
  • Event
    Bind
    $(“input”).bind(“blur”, fn);
    Trigger
    $(“input”).trigger(“focus”);
    Event Helper
    $(“input”).click(function() { alert(‘click’); });
    S(“input”).click();
    Live
    $(“input”).live(“click”, fn);
  • Traversing
    find $("p").find("span").css('color','red');
    children $("div").children(".selected").css("color);
    parent $("tr").parent().get(0).tagName;
    next $("button[disabled]").next().text("this button is disabled");
    prev$("p").prev(".selected").css("background", "yellow");
    sibling $(".hilite").siblings() .css("color", "red")
  • Manipulation
    append $("p").append("<strong>Hello</strong>");
    appendTo$("span").appendTo("#foo");
    prepend &prependTo
    after $("p").after("<b>Hello</b>");
    before $("p").before("<b>Hello</b>");
  • Effect
    show / hide
    toggle
    slide
    fade
    Custom animation