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, an...
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”...
If you know CSS...$(“#aside”) // id of aside$(“.heading”) // class of heading$(“div”) // every div$(“a#anchor”) // a with ...
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 o...
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 c...
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.jQu...
Getting animated$(“p”).fadeOut();$(“div”).slideUp();$(“div”).slideToggle();$(“p”).animate({   ‘margin-left’ : ‘+=20px’,   ...
Callbacks$(“p”).animate({    ‘margin-left’ : ‘+=20px’,    ‘opacity’ : 0.5}, 500, function() {    console.log(“animations d...
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 sibling...
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: fun...
Resourcesirc.freenode.net #jquerydocs.jquery.comjqueryfordesigners.compaulirish.com
THANKS FORLISTENING...QUESTIONS?    (slides online soon)@JACK_FRANKLIN
Upcoming SlideShare
Loading in...5
×

Introduction to jQuery - Barcamp London 9

839

Published on

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
839
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • interrupt me with questions whenever!\n
  • student &amp; developer\n
  • \n
  • student &amp; developer\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • this stops the link &amp;#x201C;working&amp;#x201D; but not event bubbling\n
  • this stops bubbling &amp; 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&amp;#x2019;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&amp;#x2019;t use jQuery if you don&amp;#x2019;t have to!\n
  • don&amp;#x2019;t use jQuery if you don&amp;#x2019;t have to!\n
  • don&amp;#x2019;t use jQuery if you don&amp;#x2019;t have to!\n
  • \n
  • Introduction to jQuery - Barcamp London 9

    1. 1. JQUERY FORBEGINNERS
    2. 2. WHO AM I?www.jackfranklin.co.uk @Jack_Franklin
    3. 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. 4. WHY JQUERY?1. Cross Browser (IE6+ OMG) 2. Superb Documentation 3. Widely adopted 4. Lightweight.
    5. 5. jQuery writes itself$(“#aside”).fadeOut().css(“width”,“300px”).addClass(“jquery-rocks”).fadeIn();
    6. 6. jQuery writes itself$(“#aside”) //#aside.fadeOut() //fade it out.css(“width”, “300px”) //set width.addClass(“jquery-rocks”) //add class.fadeIn(); //fade in
    7. 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. 8. Support for CSS3...$(“p:nth-child(2)”);$(“p:even”);$(“p:not(.intro)”); ...even in IE6+
    9. 9. Events$(“someElement”).event(function() { /*something happens!*/});
    10. 10. Events: Click$(“a”).click(function(e) { e.preventDefault(); console.log(“Link clicked!”);});
    11. 11. Events: Click$(“a”).click(function(e) { console.log(“Link clicked!”); return false;});
    12. 12. Events: Click$(“a”).click(function(e) { e.preventDefault(); e.stopPropagation(); console.log(“Link clicked!”);});
    13. 13. Events: Hover$(“h1”).hover( function() { console.log(“hovered on”); }, function() { console.log(“hovered off”); });
    14. 14. Events: Delegate$(“ul”).delegate(“li”, “click”, function() { console.log(“li clicked”);});
    15. 15. When you’re ready...$(document).ready(function() { /*all your code here*/});//same thing:$(function() { /*all your code here*/});
    16. 16. Including jQueryGoogle CDN: http://code.google.com/apis/libraries/devguide.html#jqueryLocal jQuery.
    17. 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. 18. Getting animated$(“p”).fadeOut();$(“div”).slideUp();$(“div”).slideToggle();$(“p”).animate({ ‘margin-left’ : ‘+=20px’, ‘opacity’ : 0.5}, 500);
    19. 19. Callbacks$(“p”).animate({ ‘margin-left’ : ‘+=20px’, ‘opacity’ : 0.5}, 500, function() { console.log(“animations done!”);});
    20. 20. jQuery & CSS$(“p”).css(“width”, “200px”);$(“p”).css({ “width” : “200px”, “opacity” : 0.9, “height” : “400px”});
    21. 21. Add CSS in CSS!.newCss { width: 200px; opacity: 0.9; height: 400px;}$(“p”).addClass(“newCss”);
    22. 22. Creation$(“<img />”, { “alt” : “my alternative text”, click : function() { console.log(“clicked”); }});
    23. 23. Manipulation$(“img”).prependTo(“#gallery”).wrap(“<a/>”);$(“#aside”).clone().attr(“id”, “new-aside”).appendTo(“body”);
    24. 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. 25. Looping the Set$(“li”).each(function(i, item) { $(item).attr(“id”, “link” + i);});
    26. 26. Better... (less work)$(“li”).each(function(i, item) { item.id = “link” + i;});
    27. 27. jQuery and AJAX$.ajax({ ‘url’ : ‘http://somejson.com/api’, ‘method’ : ‘get’, ‘dataType’ : ‘json’, success: function(d) { console.log(d); }});
    28. 28. Resourcesirc.freenode.net #jquerydocs.jquery.comjqueryfordesigners.compaulirish.com
    29. 29. THANKS FORLISTENING...QUESTIONS? (slides online soon)@JACK_FRANKLIN
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×