• Like

Loading…

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

Introduction to jQuery at Barcamp London 8

  • 2,550 views
Uploaded on

Talk I did at Barcamp London 8, Nov 14th 2010 on jQuery for Beginners. Aimed at those who have heard of jQuery but gone no further.

Talk I did at Barcamp London 8, Nov 14th 2010 on jQuery for Beginners. Aimed at those who have heard of jQuery but gone no further.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
2,550
On Slideshare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
92
Comments
1
Likes
8

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

  • So that’s the official stuff.
  • But in basic terms, why would we want to use jQuery?
  • But in basic terms, why would we want to use jQuery?
  • But in basic terms, why would we want to use jQuery?
  • But in basic terms, why would we want to use jQuery?
  • But in basic terms, why would we want to use jQuery?
  • Even if you’ve never seen jQuery before, it’s not hard to see what this code does.
  • Even if you’ve never seen jQuery before, it’s not hard to see what this code does.
  • Even if you’ve never seen jQuery before, it’s not hard to see what this code does.
  • Even if you’ve never seen jQuery before, it’s not hard to see what this code does.
  • Even if you’ve never seen jQuery before, it’s not hard to see what this code does.
  • CSS selectors
  • CSS selectors
  • CSS selectors
  • CSS selectors
  • works with any CSS & CSS3 selectors
  • works with any CSS & CSS3 selectors
  • Events - docs are superb reference
  • Events - docs are superb reference
  • When binding an event to multiple items (say a list of items) it’s far more efficient to use jQuery’s delegate() function and bind it to the parent of those items - so if anyone is feeling adventurous have a look on the docs and try it out!
  • Hover function takes 2 arguments
  • So this is again pretty straight forward - next() is one of many traversal functions. slideToggle() will slide an element into view if it was hidden, or slide it out of view if it was showing. This solves us having to check manually.
  • Often we may want to stop the link taking the user to a URL if we’re doing JS stuff, so jQuery lets us stop the link doing what it should, by passing in the current event (often use ‘e’) to the function and then stopping the default action
  • Wait for the document to be ready before we execute any JS
  • This is identical, just saves a few bytes
  • So we’ve got our code ready to run when ready, written a nice function to toggle a link, what do we need to do? Include jQuery
  • So we’ve got our code ready to run when ready, written a nice function to toggle a link, what do we need to do? Include jQuery
  • You can be specific or not with the version number
  • Mention that fadeToggle() has been added as of 1.4.4 - ie a few days ago
  • Animate is incredibly powerful and also very clever - passing in ‘500px’ as width is no issue, it happily figures it all out. Any CSS property that can be animated can be used. By default you can not animate colours with this, but there is a plug in which does it. The callback function will be run once the animation is done, most the effect functions in jQuery let us pass in a callback, and also the speed in milliseconds. There are also some predefined: “slow”, “normal” and “quick”.
  • Mention that fadeToggle() has been added as of 1.4.4 - ie a few days ago
  • Just like animate CSS() takes any css property and changes it
  • This is fine for a few properties but for many it’s better just to create a class in your CSS and add the class. Note you do NOT put the “.” in.
  • Mention that fadeToggle() has been added as of 1.4.4 - ie a few days ago
  • Wrap does what you imagine in this case it will wrap an anchor around all imgs. When creating a new element (more on that soon) you can just use <tag /> and jQuery does the rest.
  • Mention that fadeToggle() has been added as of 1.4.4 - ie a few days ago


  • You can also add text to this element or edit its inner HTML. text() and html() are jQuery methods that can edit the text or HTML of the element (covering them shortly). So do not put quotes around them. Obviously in real life you would never set both - one or the other
  • You can also bind events - although as mentioned earlier this way CAN be incredibly in-efficient.
  • And now we need to add our new div to the page.
  • We can’t cover them all - the idea is that you see just how much this library can do.
  • Get current object using $(this)
  • Because there’s only 3 we’ll go into each one - text() and html() have a difference that is very important
  • Give it a second parameter and it sets the attribute, only give it the first and it gets it.
  • text() is useful not only for setting text but for the fact that it strips all HTML out of the content of an element when it gets it. If you add HTML tags when setting text they are escaped.
  • Give it a second parameter and it sets the attribute, only give it the first and it gets it.
  • Only got time to go over this really quickly.
  • In the success function the variable you pass in, in my case ‘d’ will reference the object returned by the Ajax request. Remember that JSON is not cross domain.
  • Just in case you had not got the message - jQuery’s docs are superb and one of the main reasons it is so popular.
  • Just in case you had not got the message - jQuery’s docs are superb and one of the main reasons it is so popular.
  • Just in case you had not got the message - jQuery’s docs are superb and one of the main reasons it is so popular.
  • Just in case you had not got the message - jQuery’s docs are superb and one of the main reasons it is so popular.
  • Just in case you had not got the message - jQuery’s docs are superb and one of the main reasons it is so popular.
  • Just in case you had not got the message - jQuery’s docs are superb and one of the main reasons it is so popular.


Transcript

  • 1. jQuery for Beginners @Jack_Franklin
  • 2. What is jQuery? “jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript. [jquery.com]
  • 3. Why use jQuery?
  • 4. Why use jQuery? Cross Browser Support [IE6+!]
  • 5. Why use jQuery? Cross Browser Support [IE6+!] Lightweight
  • 6. Why use jQuery? Cross Browser Support [IE6+!] Lightweight Superb Documentation
  • 7. Why use jQuery? Cross Browser Support [IE6+!] Lightweight Superb Documentation Widely adopted
  • 8. Why use jQuery? Cross Browser Support [IE6+!] Lightweight Superb Documentation Widely adopted Help everywhere
  • 9. jQuery writes itself
  • 10. jQuery writes itself $(“#header”).hide().css(“width”, “500px”).fadeIn()
  • 11. jQuery writes itself $(“#header”).hide().css(“width”, “500px”).fadeIn() $(“#header”) // selects an element with id of header
  • 12. jQuery writes itself $(“#header”).hide().css(“width”, “500px”).fadeIn() $(“#header”) // selects an element with id of header .hide() // hides the element from view
  • 13. jQuery writes itself $(“#header”).hide().css(“width”, “500px”).fadeIn() $(“#header”) // selects an element with id of header .hide() // hides the element from view .css(“width”, “500px”) // changes width of header to 500px
  • 14. jQuery writes itself $(“#header”).hide().css(“width”, “500px”).fadeIn() $(“#header”) // selects an element with id of header .hide() // hides the element from view .css(“width”, “500px”) // changes width of header to 500px .fadeIn() // fades the element in
  • 15. Getting Stuff
  • 16. Getting Stuff $(“#header”) // selects an element with id of header
  • 17. Getting Stuff $(“#header”) // selects an element with id of header $(“div”) // selects div(s)
  • 18. Getting Stuff $(“#header”) // selects an element with id of header $(“div”) // selects div(s) $(“.picture”) // select element(s) with class of picture
  • 19. Getting Stuff $(“#header”) // selects an element with id of header $(“div”) // selects div(s) $(“.picture”) // select element(s) with class of picture $(“div ul li”) // selects all <li>s inside <ul>s inside <div>s
  • 20. Essentially:
  • 21. Essentially: $(“some css selector”) // selects element(s) that match selector
  • 22. Essentially: $(“some css selector”) // selects element(s) that match selector This can be any valid CSS selector, even CSS3. Full CSS3 support in IE6 +
  • 23. Events
  • 24. Events $(“#something”).event(function() {...}) // generic event
  • 25. Events $(“#something”).event(function() {...}) // generic event Support for events is large in jQuery. There are lots of events you can bind function to, the most useful are: .blur .click .hover .focus .keydown / .keypress Full list: http://api.jquery.com/category/events/
  • 26. Events
  • 27. Events $(“h2”).click(function() { alert(‘dude you clicked my link lolz’); });
  • 28. Events
  • 29. Events $(“#link”).hover( function() { //mouse in alert(‘dude you hovad my link lolz’); }, function() { //mouse out alert(‘dude you left my link lolz’); });
  • 30. Bring it Together
  • 31. Bring it Together $(“#link”).click(function() { $(this).next(‘p’).slideToggle(‘normal’) });
  • 32. Bring it Together $(“#link”).click(function(e) { e.preventDefault() $(this).next(‘p’).slideToggle(‘normal’) });
  • 33. But wait...
  • 34. But wait... $(document).ready(function() { //all your js here });
  • 35. But wait... $(function() { //all your js here });
  • 36. One thing left to do
  • 37. One thing left to do Include local version manually Let Google host it for you
  • 38. Doing it Manually
  • 39. Doing it Manually Download from jquery.com: <script src=”path/to/jquery.js” type=”text/ javascript”></script>
  • 40. Using Google
  • 41. Using Google Find url from: http://code.google.com/apis/libraries/devguide.html#jquery <script src=”https://ajax.googleapis.com/ajax/ libs/jquery/1.4.4/jquery.min.js ” type=”text/javascript”></script>
  • 42. jQuery Animations
  • 43. jQuery Animations http://api.jquery.com/category/effects/ Most used: fadeIn, fadeOut, fadeTo, fadeToggle slideUp, slideDown, slideToggle animate, stop
  • 44. jQuery Animations
  • 45. jQuery Animations $(“#myDiv”).animate({ ‘width’: ‘500px’, ‘margin-left’: ‘20px’}, 500, function() { ...//callback })
  • 46. jQuery & CSS
  • 47. jQuery & CSS http://api.jquery.com/category/css/ Most used: addClass, hasClass, removeClass height, width, outerHeight, outerWidth css
  • 48. jQuery & CSS $(“div”).css({ ‘width’ : ‘500px’, ‘height’ : ‘200px’, ‘display’ : ‘block’ })
  • 49. jQuery & CSS .someSemanticClass { width: 500px; height: 200px; display: block; } $(“div”).addClass(“someSemanticClass”)
  • 50. Manipulation of Elements
  • 51. Manipulation of Elements http://api.jquery.com/category/manipulation/ Most used: append, appendTo, prepend, prependTo after, before, clone, insertBefore, insertAfter wrap
  • 52. Manipulation of Elements
  • 53. Manipulation of Elements $(“img”).prependTo(“#gallery”).wrap(“<a />”)
  • 54. Creation of Elements
  • 55. Creation of Elements No official page for creation - but it’s easy.
  • 56. Creation of Elements $(“<div />”, { //details come here });
  • 57. Creation of Elements $(“<div />”, { ‘id’: ‘galleryDiv’, ‘title’: ‘Image Gallery’ });
  • 58. Creation of Elements $(“<div />”, { text: ‘Hello this goes in the div’, html: ‘Hello <strong>this</strong> is codez’ });
  • 59. Creation of Elements $(“<div />”, { click: function() {...}, blur: function() {...} });
  • 60. Creation of Elements $(“<div />”, { //details in here }).prependTo(“body”)
  • 61. Traversing the DOM
  • 62. Traversing the DOM http://api.jquery.com/category/traversing/ Most Used: find, children, siblings, parent, parents prev, next each
  • 63. Traversing the DOM $(“li”).each(function(i) { $(this).attr(‘title’, ‘List Item ’ + i) });
  • 64. Setting & Getting Attributes
  • 65. Setting & Getting Attributes http://api.jquery.com/category/attributes/ We’ve seen these all already, the most used: attr html text
  • 66. .attr()
  • 67. .attr() http://api.jquery.com/attr/ $(“h1”).attr(“title”, “Main Heading”) //sets value $(“h1”).attr(“title”) //gets the value
  • 68. .text()
  • 69. .text() http://api.jquery.com/text/ <h1>This is a heading</h1> $(“h1”).text() //gives ‘This is a heading’ $(“h1”).text(‘A big heading’) //sets text <h1>A big heading</h1> $(“h1”).text(‘A <em>big</em> heading’) <h1>A &lt;big&gt; heading&lt;/em&gt;</h1>
  • 70. .html()
  • 71. .html() http://api.jquery.com/html/ <h1>This is <span>a</span> heading</h1> $(“h1”).html() //gives ‘This is <span>a</span> heading’ $(“h1”).html(‘A <em>big</em> heading’) //sets html <h1>A <em>big</em> heading</h1>
  • 72. jQuery & Ajax
  • 73. jQuery & Ajax http://api.jquery.com/category/ajax/ One main function $.ajax() Lots of wrappers for that function: getJSON(), get(), post(), getScript()
  • 74. The main Ajax Function
  • 75. The main Ajax Function The rest of them you can figure out! $.ajax({ url: somesite.com/search.json?q=hi, dataType: ‘json’, success: function(d) {console.log(d)}, type: ‘GET’ });
  • 76. More Resources
  • 77. More Resources docs.jquery.com <- THESE ARE FANTASTIC
  • 78. More Resources docs.jquery.com <- THESE ARE FANTASTIC jqueryfordesigners.com <- by @rem
  • 79. More Resources docs.jquery.com <- THESE ARE FANTASTIC jqueryfordesigners.com <- by @rem learningjquery.com <- by @kswedberg
  • 80. More Resources docs.jquery.com <- THESE ARE FANTASTIC jqueryfordesigners.com <- by @rem learningjquery.com <- by @kswedberg paulirish.com <- surprisingly by @paul_irish
  • 81. More Resources docs.jquery.com <- THESE ARE FANTASTIC jqueryfordesigners.com <- by @rem learningjquery.com <- by @kswedberg paulirish.com <- surprisingly by @paul_irish IRC always active - irc.freenode.net, #jquery, but it is IRC!
  • 82. More Resources docs.jquery.com <- THESE ARE FANTASTIC jqueryfordesigners.com <- by @rem learningjquery.com <- by @kswedberg paulirish.com <- surprisingly by @paul_irish IRC always active - irc.freenode.net, #jquery, but it is IRC! docs.jquery.com <- Did I mention this?
  • 83. Questions? @Jack_Franklin
  • 84. Thanks, see you next year! @Jack_Franklin