Mais conteúdo relacionado Semelhante a Introduction to jQuery - Barcamp London 9 (20) Introduction to jQuery - Barcamp London 93. jQuery
jQuery is a fast and concise JavaScript Library that
simplifies HTML document traversing, event
handling, animating, and Ajax interactions for rapid
web development. jQuery is designed to change
the way that you write JavaScript.
4. WHY JQUERY?
1. Cross Browser (IE6+ OMG)
2. Superb Documentation
3. Widely adopted
4. Lightweight.
6. jQuery writes itself
$(“#aside”) //#aside
.fadeOut() //fade it out
.css(“width”, “300px”) //set width
.addClass(“jquery-rocks”) //add class
.fadeIn(); //fade in
7. If you know CSS...
$(“#aside”) // id of aside
$(“.heading”) // class of heading
$(“div”) // every div
$(“a#anchor”) // a with id of anchor
$(“p a”) //a inside p
$(“div>h1”) //h1 direct child of div
17. Better safe than sorry
<script src="//ajax.googleapis.com/ajax/libs/
jquery/1.6.4/jquery.min.js"></script>
<script>window.jQuery ||
document.write('<script src="js/libs/
jquery-1.6.4.min.js"></script>')</script>
19. Callbacks
$(“p”).animate({
‘margin-left’ : ‘+=20px’,
‘opacity’ : 0.5
}, 500, function() {
console.log(“animations done!”);
});
21. Add CSS in CSS!
.newCss {
width: 200px;
opacity: 0.9;
height: 400px;
}
$(“p”).addClass(“newCss”);
24. Traversing the DOM
//useful ones:
$(elem).next() //next sibling
$(elem).parent() //parent
$(elem).nextAll() //all next siblings
$(elem).children(“img”) //direct img children
$(elem).find(“img”) //img inside elem
27. jQuery and AJAX
$.ajax({
‘url’ : ‘http://somejson.com/api’,
‘method’ : ‘get’,
‘dataType’ : ‘json’,
success: function(d) {
console.log(d);
}
});
Notas do Editor interrupt me with questions whenever!\n student & developer\n \n student & developer\n \n \n \n \n \n this stops the link &#x201C;working&#x201D; but not event bubbling\n this stops bubbling & the link acting like it should\n same effect as return false now\n \n Delegate is awesome when you need to bind a link to a large group\n include your script right before the end body, don&#x2019;t need to do this.\n Google = caching = win\n \n \n \n \n \n \n \n find = any level\nchildren = first level (direct descendants)\n find = any level\nchildren = first level (direct descendants)\n don&#x2019;t use jQuery if you don&#x2019;t have to!\n don&#x2019;t use jQuery if you don&#x2019;t have to!\n don&#x2019;t use jQuery if you don&#x2019;t have to!\n \n