0
Introduce jQuery<br />By Bank2u<br />
jQuery<br />Cross-browser javascript library<br />Free & Opensource<br />First released Jan 06 @Barcamp by John Resig<br /...
Why jQuery ?<br />Cross-browser compatibility<br />Fast & Small <br />Plug-in<br />Learning curve & Documentation<br />Int...
Why jQuery ?<br />
Who’s using jQuery<br />Microsoft<br />Google<br />Mozilla<br />digg<br />Wordpress & Drupal<br />HP - IBM - Intel.<br />R...
Getting Start<br />Download jQuery at jquery.com<br /><script type="text/javascript" src="/js/jQuery. js"></script><br />M...
Hello world jQuery<br />Document ready<br />$(document).ready(function () {<br />    alert("Hello world jQuery");<br />});...
jQuery Philosophy<br />Find someone from HTML<br />(selector)<br />Do something to it<br />(method)<br />
Find some element<br />
Selector<br />CSS Style<br />$(“#myID”) 		// by id<br />$(“.myClass”) 		// by class name<br />$(“myTag”) 		// by tag (elem...
Selector [Hierarchy]<br />$("form input")	// descendant<br />$("#main > *")	//  child<br />$("#prev ~ div")	//  sibling<br />
Selector [Hierarchy]<br />$("form input")	// descendant<br /><form><br />    <div><br />        Form is surrounded by the ...
Selector [Attribute]<br />$("div[id]"). 				//has<br />$("input[name='bank']“)		//not has<br />$("input[name^='news']")	//...
Selector [Form]<br />$("div :text")<br />$("form :radio")<br />$("#dvMainForm :checkbox")<br />$(":button")<br />$("input:...
Do something with them<br />
Attribute<br />$("em").attr("title")<br />$("label").html()<br />$("p:first").text()<br />$("input").val()<br />Get<br /><...
$("label").html("zupzip")
$("p:first").text("zupzip")
$("input").val("zupzip")</li></ul>Set<br />
Event<br />Bind<br />$(“input”).bind(“blur”, fn);<br />Trigger<br />$(“input”).trigger(“focus”);<br />Event Helper<br />$(...
Upcoming SlideShare
Loading in...5
×

J query

1,162

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,162
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
46
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "J query"

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

    Clipping is a handy way to collect important slides you want to go back to later.

×