Introduction to jQuery - Barcamp London 9
Upcoming SlideShare
Loading in...5
×
 

Introduction to jQuery - Barcamp London 9

on

  • 991 views

jQuery is awesome. Let me show

jQuery is awesome. Let me show

Statistics

Views

Total Views
991
Views on SlideShare
970
Embed Views
21

Actions

Likes
0
Downloads
4
Comments
0

3 Embeds 21

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

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • interrupt me with questions whenever!\n
  • student & developer\n
  • \n
  • student & developer\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • this stops the link “working” 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’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’t use jQuery if you don’t have to!\n
  • don’t use jQuery if you don’t have to!\n
  • don’t use jQuery if you don’t have to!\n
  • \n

Introduction to jQuery - Barcamp London 9 Introduction to jQuery - Barcamp London 9 Presentation Transcript

  • JQUERY FORBEGINNERS
  • WHO AM I?www.jackfranklin.co.uk @Jack_Franklin
  • jQueryjQuery is a fast and concise JavaScript Library thatsimplifies 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).find(“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