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

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Introduction to jQuery - Barcamp London 9

  • 773 views
Published

jQuery is awesome. Let me show

jQuery is awesome. Let me show

Published in Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
773
On SlideShare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
5
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide
  • 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

Transcript

  • 1. JQUERY FORBEGINNERS
  • 2. WHO AM I?www.jackfranklin.co.uk @Jack_Franklin
  • 3. 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.
  • 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 jQueryGoogle CDN: http://code.google.com/apis/libraries/devguide.html#jqueryLocal 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. Resourcesirc.freenode.net #jquerydocs.jquery.comjqueryfordesigners.compaulirish.com
  • 29. THANKS FORLISTENING...QUESTIONS? (slides online soon)@JACK_FRANKLIN