J query
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share
  • 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
1,648
On Slideshare
1,648
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
45
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

Transcript

  • 1. Introduce jQuery
    By Bank2u
  • 2. jQuery
    Cross-browser javascript library
    Free & Opensource
    First released Jan 06 @Barcamp by John Resig
    Last stable version 1.4.2
  • 3. Why jQuery ?
    Cross-browser compatibility
    Fast & Small
    Plug-in
    Learning curve & Documentation
    Intellisense in VS2008-2010
    Microsoft [Ajax Lib & MVC]
  • 4. Why jQuery ?
  • 5. Who’s using jQuery
    Microsoft
    Google
    Mozilla
    digg
    Wordpress & Drupal
    HP - IBM - Intel.
    Ruby on Rails
  • 6. 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>
  • 7. Hello world jQuery
    Document ready
    $(document).ready(function () {
    alert("Hello world jQuery");
    });
    // Short cut
    $(function () {
    alert("Hello world jQuery");
    });
  • 8. jQuery Philosophy
    Find someone from HTML
    (selector)
    Do something to it
    (method)
  • 9. Find some element
  • 10. Selector
    CSS Style
    $(“#myID”) // by id
    $(“.myClass”) // by class name
    $(“myTag”) // by tag (element name)
    $(“#id, .class, tag”) // multiple
  • 11. Selector [Hierarchy]
    $("form input") // descendant
    $("#main > *") // child
    $("#prev ~ div") // sibling
  • 12. 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>
  • 13. 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']")
  • 14. Selector [Form]
    $("div :text")
    $("form :radio")
    $("#dvMainForm :checkbox")
    $(":button")
    $("input:disabled")
    $("input:checked")
  • 15. Do something with them
  • 16. Attribute
    $("em").attr("title")
    $("label").html()
    $("p:first").text()
    $("input").val()
    Get
    • $("em").attr("title", "zupzip")
    • 17. $("label").html("zupzip")
    • 18. $("p:first").text("zupzip")
    • 19. $("input").val("zupzip")
    Set
  • 20. 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);
  • 21. 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")
  • 22. 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>");
  • 23. Effect
    show / hide
    toggle
    slide
    fade
    Custom animation