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

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