introduction to jquery (ajax exp 2006)
Post on 20-Aug-2015
1.458 Views
Preview:
TRANSCRIPT
What is jQuery?
• An open source JavaScript library that simplifies the interaction between HTML and JavaScript.
• Fully documented
• Great community
• Tons of plugins
• Small size (15kb)
• Everything works in IE 5.5+, Firefox, Safari 1.3+, and Opera 8+
Why jQuery?
$(“div”)
<div id=”body”> <h2>Some Header</h2> <div class=”contents”> <p>...</p> <p>...</p> </div></div>
$(“#body”)
<div id=”body”> <h2>Some Header</h2> <div class=”contents”> <p>...</p> <p>...</p> </div></div>
$(“div#body”)
<div id=”body”> <h2>Some Header</h2> <div class=”contents”> <p>...</p> <p>...</p> </div></div>
$(“div.contents p”)
<div id=”body”> <h2>Some Header</h2> <div class=”contents”> <p>...</p> <p>...</p> </div></div>
$(“div > div”)
<div id=”body”> <h2>Some Header</h2> <div class=”contents”> <p>...</p> <p>...</p> </div></div>
$(“div[div]”)
<div id=”body”> <h2>Some Header</h2> <div class=”contents”> <p>...</p> <p>...</p> </div></div>
• Events (click, hover, toggle)
• DOM Manipulation (append, prepend, remove)
• Effects (hide, show, slideDown, fadeOut)
• AJAX (load, get, post)
Features
DOM Manipulation
• $(“a[@target]”) .append(“ (Opens in New Window)”);
• $(“#body”).css({ border: “1px solid green”, height: “40px”});
• $(“div”).hide();
• $(“div”).hide().color(”blue”);
• $(“div”).hide().color(”blue”).slideDown();
Chaining
• Very active mailing list
• 90+ Posts/Day
• 640+ Members
• Technorati: 10+ blog posts per day
Community
top related