Your SlideShare is downloading. ×
0
Introduction to jQuery - Barcamp London 9
Introduction to jQuery - Barcamp London 9
Introduction to jQuery - Barcamp London 9
Introduction to jQuery - Barcamp London 9
Introduction to jQuery - Barcamp London 9
Introduction to jQuery - Barcamp London 9
Introduction to jQuery - Barcamp London 9
Introduction to jQuery - Barcamp London 9
Introduction to jQuery - Barcamp London 9
Introduction to jQuery - Barcamp London 9
Introduction to jQuery - Barcamp London 9
Introduction to jQuery - Barcamp London 9
Introduction to jQuery - Barcamp London 9
Introduction to jQuery - Barcamp London 9
Introduction to jQuery - Barcamp London 9
Introduction to jQuery - Barcamp London 9
Introduction to jQuery - Barcamp London 9
Introduction to jQuery - Barcamp London 9
Introduction to jQuery - Barcamp London 9
Introduction to jQuery - Barcamp London 9
Introduction to jQuery - Barcamp London 9
Introduction to jQuery - Barcamp London 9
Introduction to jQuery - Barcamp London 9
Introduction to jQuery - Barcamp London 9
Introduction to jQuery - Barcamp London 9
Introduction to jQuery - Barcamp London 9
Introduction to jQuery - Barcamp London 9
Introduction to jQuery - Barcamp London 9
Introduction to jQuery - Barcamp London 9
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Introduction to jQuery - Barcamp London 9

824

Published on

jQuery is awesome. Let me show

jQuery is awesome. Let me show

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
824
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
6
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

    ×