jQuery is awesome. Let me show

1. JQUERY FOR
BEGINNERS

2. WHO AM I?
www.jackfranklin.co.uk
@Jack_Franklin

3. 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.

5. jQuery writes itself
$(“#aside”).fadeOut().css(“width”,
“300px”).addClass(“jquery-rocks”).fadeIn();

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

8. Support for CSS3...
$(“p:nth-child(2)”);
$(“p:even”);
$(“p:not(.intro)”);
...even in IE6+

9. Events
$(“someElement”).event(function() {
/*something happens!*/
});

10. Events: Click
$(“a”).click(function(e) {
e.preventDefault();
console.log(“Link clicked!”);
});

11. Events: Click
$(“a”).click(function(e) {
console.log(“Link clicked!”);
return false;
});

12. Events: Click
$(“a”).click(function(e) {
e.preventDefault();
e.stopPropagation();
console.log(“Link clicked!”);
});

13. Events: Hover
$(“h1”).hover(
function() {
console.log(“hovered on”);
},
function() {
console.log(“hovered off”);
}
);

14. Events: Delegate
$(“ul”).delegate(“li”, “click”, function() {
console.log(“li clicked”);
});

15. When you’re ready...
$(document).ready(function() {
/*all your code here*/
});
//same thing:
$(function() {
/*all your code here*/
});

16. Including jQuery
Google CDN: http://code.google.com/apis/
libraries/devguide.html#jquery
Local jQuery.

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>

18. Getting animated
$(“p”).fadeOut();
$(“div”).slideUp();
$(“div”).slideToggle();
$(“p”).animate({
‘margin-left’ : ‘+=20px’,
‘opacity’ : 0.5
}, 500);

19. Callbacks
$(“p”).animate({
‘margin-left’ : ‘+=20px’,
‘opacity’ : 0.5
}, 500, function() {
console.log(“animations done!”);
});

20. jQuery & CSS
$(“p”).css(“width”, “200px”);
$(“p”).css({
“width” : “200px”,
“opacity” : 0.9,
“height” : “400px”
});

21. Add CSS in CSS!
.newCss {
width: 200px;
opacity: 0.9;
height: 400px;
}
$(“p”).addClass(“newCss”);

22. Creation
$(“<img />”, {
“alt” : “my alternative text”,
click : function() {
console.log(“clicked”);
}
});

23. Manipulation
$(“img”)
.prependTo(“#gallery”)
.wrap(“<a/>”);
$(“#aside”).clone().attr(“id”, “new-
aside”).appendTo(“body”);

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

25. Looping the Set
$(“li”).each(function(i, item) {
$(item).attr(“id”, “link” + i);
});

26. Better... (less work)
$(“li”).each(function(i, item) {
item.id = “link” + i;
});

27. jQuery and AJAX
$.ajax({
‘url’ : ‘http://somejson.com/api’,
‘method’ : ‘get’,
‘dataType’ : ‘json’,
success: function(d) {
console.log(d);
}
});

28. Resources
irc.freenode.net #jquery
docs.jquery.com
jqueryfordesigners.com
paulirish.com

29. THANKS FOR
LISTENING...QUESTIONS?
(slides online soon)
@JACK_FRANKLIN