Introduction to jQuery (Ajax Exp 2007)

  • 402 views
Uploaded on

Talk I gave at Ajax Experience West and East 2007.

Talk I gave at Ajax Experience West and East 2007.

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
402
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
7
Comments
0
Likes
1

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. jQuery IntroductionAjax Experience - July 2007 John Resig (ejohn.org)
  • 2. What is jQuery?• An open source JavaScript library that simplifies the interaction between HTML and JavaScript.
  • 3. Why jQuery?• Fully documented• Great community• Tons of plugins• Small size (20kb)• Everything works in IE 6+, Firefox, Safari 2+, and Opera 9+
  • 4. Complete Focus:• Find some elements• Do something with them
  • 5. Find Some Elements...• Full CSS 1-3 Support• Basic XPath• Better CSS support than most browsers
  • 6. $(“div”)<div id=”body”> <h2>Some Header</h2> <div class=”contents”> <p>...</p> <p>...</p> </div></div>
  • 7. $(“#body”)<div id=”body”> <h2>Some Header</h2> <div class=”contents”> <p>...</p> <p>...</p> </div></div>
  • 8. $(“div#body”)<div id=”body”> <h2>Some Header</h2> <div class=”contents”> <p>...</p> <p>...</p> </div></div>
  • 9. $(“div.contents p”) <div id=”body”> <h2>Some Header</h2> <div class=”contents”> <p>...</p> <p>...</p> </div> </div>
  • 10. $(“div > div”)<div id=”body”> <h2>Some Header</h2> <div class=”contents”> <p>...</p> <p>...</p> </div></div>
  • 11. $(“div[div]”)<div id=”body”> <h2>Some Header</h2> <div class=”contents”> <p>...</p> <p>...</p> </div></div>
  • 12. Features• Events (click, hover, toggle)• DOM Manipulation (append, prepend, remove)• Effects (hide, show, slideDown, fadeOut)• AJAX (load, get, post)
  • 13. Events• $(“form input:last”).click(function(){ $(“#menu”).slideDown(“slow”); });
  • 14. DOM Manipulation• $(“a[@target]”) .append(“ (Opens in New Window)”);• $(“#body”).css({ border: “1px solid green”, height: “40px” });
  • 15. Effects• $(“#menu”).slideDown(“slow”);• $(“div”).hide(500,function(){ $(this).show(500); });
  • 16. AJAX• $(“#body”).load(“sample.html”);• $.getScript(“test.js”);
  • 17. Chaining• $(“div”).hide();• $(“div”).hide().color(”blue”);• $(“div”).hide().color(”blue”).slideDown();
  • 18. Live Demos
  • 19. Accordion Menu
  • 20. Hover Menu
  • 21. Todo List
  • 22. Plugins• Drag and Drop• Sortables• Tabbed Navigation• Sortable Tables• And hundreds more...
  • 23. Community• Very active mailing list • 108+ Posts/Day • 2500+ Members• Technorati: 22+ blog posts per day
  • 24. Who uses jQuery?• IBM• MSNBC• Technorati• Drupal• Wordpress• Digg• many others...
  • 25. Books• 4 Books in Progress: • Learning jQuery (Packt) • jQuery Reference (Packt) • jQuery Quickly (Manning) • Designing with jQuery (Manning)
  • 26. Future• “jQuery UI”• Themeing• Internationalization
  • 27. jquery.comdocs.jquery.com - jquery.com/plugins More: visualjquery.com learningjquery.com