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

1,148

Published on

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

  • Be the first to like this

No Downloads
Views
Total Views
1,148
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
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

×