Introduction to jQuery - Barcamp London 9

JQUERY FORBEGINNERS

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

jQueryjQuery is a fast and concise JavaScript Library thatsimpliﬁes HTML document traversing, eventhandling, animating, and Ajax interactions for rapidweb development. jQuery is designed to changethe way that you write JavaScript.

WHY JQUERY?1. Cross Browser (IE6+ OMG) 2. Superb Documentation 3. Widely adopted 4. Lightweight.

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

jQuery writes itself$(“#aside”) //#aside.fadeOut() //fade it out.css(“width”, “300px”) //set width.addClass(“jquery-rocks”) //add class.fadeIn(); //fade in

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

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

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

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

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

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

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

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

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

Including jQueryGoogle CDN: http://code.google.com/apis/libraries/devguide.html#jqueryLocal jQuery.

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>

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

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

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

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

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

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

Traversing the DOM//useful ones:$(elem).next() //next sibling$(elem).parent() //parent$(elem).nextAll() //all next siblings$(elem).children(“img”) //direct img children$(elem).ﬁnd(“img”) //img inside elem

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

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

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

Resourcesirc.freenode.net #jquerydocs.jquery.comjqueryfordesigners.compaulirish.com

THANKS FORLISTENING...QUESTIONS? (slides online soon)@JACK_FRANKLIN

http://lanyrd.com	13
http://a0.twimg.com	3
http://us-w1.rockmelt.com	1

Introduction to jQuery - Barcamp London 9

by Jack Franklin

Accessibility

Categories

Upload Details

Usage Rights

3 Embeds 17

Statistics

Introduction to jQuery - Barcamp London 9 Presentation Transcript