Downloaded 19 times
![$(“div[div]”)
<div id=”body”>
<h2>Some Header</h2>
<div class=”contents”>
<p>...</p>
<p>...</p>
</div>
</div>](https://image.slidesharecdn.com/jquery-ajaxexp-06-130228123015-phpapp01/85/Introduction-to-jQuery-Ajax-Exp-2006-11-320.jpg)
![DOM Manipulation
• $(“a[@target]”)
.append(“ (Opens in New Window)”);
• $(“#body”).css({
border: “1px solid green”,
height: “40px”
});](https://image.slidesharecdn.com/jquery-ajaxexp-06-130228123015-phpapp01/85/Introduction-to-jQuery-Ajax-Exp-2006-14-320.jpg)
![$(“div[div]”)
<div id=”body”>
<h2>Some Header</h2>
<div class=”contents”>
<p>...</p>
<p>...</p>
</div>
</div>](https://image.slidesharecdn.com/jquery-ajaxexp-06-130228123015-phpapp01/75/Introduction-to-jQuery-Ajax-Exp-2006-11-2048.jpg)
![DOM Manipulation
• $(“a[@target]”)
.append(“ (Opens in New Window)”);
• $(“#body”).css({
border: “1px solid green”,
height: “40px”
});](https://image.slidesharecdn.com/jquery-ajaxexp-06-130228123015-phpapp01/75/Introduction-to-jQuery-Ajax-Exp-2006-14-2048.jpg)
Uploaded byjeresig
Introduction to jQuery (Ajax Exp 2006)
This document summarizes jQuery, an open source JavaScript library. It simplifies HTML and JavaScript interaction by allowing developers to select elements, handle events, perform animations and AJAX calls with simple and concise code. The document highlights key features like DOM manipulation, events, effects and plugins. It also discusses jQuery's community, adoption by major sites, and future plans.
More Related Content
Similar to Introduction to jQuery (Ajax Exp 2006)
Introduction to jQuery (Ajax Exp 2006)
- 1. jQuery New Wave JavaScript AjaxExperience - Oct 2006 John Resig (ejohn.org)
- 2. What is jQuery? •An open source JavaScript library that simplifies the interaction between HTML and JavaScript.
- 3. Why jQuery? • Fullydocumented • Great community • Tons of plugins • Small size (15kb) • Everything works in IE 5.5+, Firefox, Safari 1.3+, and Opera 8+
- 4. Complete Focus: • Findsome 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”) <divid=”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.
- 17. Chaining • $(“div”).hide(); • $(“div”).hide().color(”blue”); •$(“div”).hide().color(”blue”).slideDown();
- 18.
- 19.
- 20.
- 21.
- 22. Plugins • Drag andDrop • Sortables • Tabbed Navigation • Sortable Tables • And over 80 more...
- 23. Community • Very activemailing list • 90+ Posts/Day • 640+ Members • Technorati: 10+ blog posts per day
- 24. Who uses jQuery? •MSNBC • Technorati • Feedburner • Drupal • many others...
- 25. Future • Internationalization • PluginCommunity (think Sourceforge) • Fixing “Hard” Problems
- 26. jquery.com jquery.com/docs - jquery.com/plugins More: visualjquery.com learningjquery.com