Bcblackpool jquery tips

1,196 views

Published on

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

  • Be the first to like this

No Downloads
Views
Total views
1,196
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • Point out that it’s mainly for the beginners/intermediate users. Feel free to throw in your own tips at the end.



  • Most jQuery functions take the form $(something).function(selector)
    This selector can be any CSS one - including CSS3. Works in multiple browsers.
  • Most jQuery functions take the form $(something).function(selector)
    This selector can be any CSS one - including CSS3. Works in multiple browsers.
  • Most jQuery functions take the form $(something).function(selector)
    This selector can be any CSS one - including CSS3. Works in multiple browsers.
  • Most jQuery functions take the form $(something).function(selector)
    This selector can be any CSS one - including CSS3. Works in multiple browsers.
  • Some people like to append the dollar sign to variables that have the jQuery object “wrapped” around them.
  • Some people like to append the dollar sign to variables that have the jQuery object “wrapped” around them.
  • If you’re only performing multiple operations on one selector in one place, chaining is probably best.
    However if you plan to reuse the selector much later then cache it.
  • If you’re only performing multiple operations on one selector in one place, chaining is probably best.
    However if you plan to reuse the selector much later then cache it.
  • Completely optional - your call
  • Completely optional - your call
  • Just continuing from caching
  • Just continuing from caching
  • End with however...
  • End with however...
  • You can use the $(selector,context) method or .find(), choice is yours. Again, there are so many different ways of achieving the same result with jQuery
  • You can use the $(selector,context) method or .find(), choice is yours. Again, there are so many different ways of achieving the same result with jQuery
  • Browse the traversing docs - URL there - so many functions.
  • Browse the traversing docs - URL there - so many functions.
  • Browse the traversing docs - URL there - so many functions.
  • find() will descend right through the DOM
    children() only descends one level
  • find() will descend right through the DOM
    children() only descends one level
  • getElementsByClassName does currently work in IE9 preview, but not in its predecessors.
  • getElementsByClassName does currently work in IE9 preview, but not in its predecessors.


  • Or, you can put all your jQuery at the bottom, just before the closing </body> tag and not have to use this code.
  • Or, you can put all your jQuery at the bottom, just before the closing </body> tag and not have to use this code.
  • Easy quick way to detect if javascript is on. (Most people do have it on)
  • Easy quick way to detect if javascript is on. (Most people do have it on)
  • Just an easy way to store things - seen people store things in alt tags, classes, etc, this is much easier.
  • Just an easy way to store things - seen people store things in alt tags, classes, etc, this is much easier.
  • For use with other libraries
  • For use with other libraries

  • A quick google search for tutorials finds you loads.

  • Bcblackpool jquery tips

    1. 1. Pimp my Ride jQuery By @Jack_Franklin
    2. 2. Load from Google
    3. 3. Load from Google • Google’s CDN allows you to load jQuery: <script type="text/javascript" src=http:// ajax.googleapis.com/ajax/libs/jquery/1/ jquery.min.js">
    4. 4. Load from Google • Google’s CDN allows you to load jQuery: <script type="text/javascript" src=http:// ajax.googleapis.com/ajax/libs/jquery/1/ jquery.min.js"> • Always load most recent version or you can be more specific as you wish.
    5. 5. Load from Google • Google’s CDN allows you to load jQuery: <script type="text/javascript" src=http:// ajax.googleapis.com/ajax/libs/jquery/1/ jquery.min.js"> • Always load most recent version or you can be more specific as you wish. • Chances are user may already have it cached.
    6. 6. Use of CSS SelectorS!
    7. 7. Use of CSS SelectorS! • jQuery Traversal functions take CSS Selector
    8. 8. Use of CSS SelectorS! • jQuery Traversal functions take CSS Selector • Often forgotten - use multiple selectors to make up a CSS selector.
    9. 9. Use of CSS SelectorS! • jQuery Traversal functions take CSS Selector • Often forgotten - use multiple selectors to make up a CSS selector. • EG: $(elem).siblings(“h2,p,strong”);
    10. 10. Use of CSS SelectorS! • jQuery Traversal functions take CSS Selector • Often forgotten - use multiple selectors to make up a CSS selector. • EG: $(elem).siblings(“h2,p,strong”); • Be aware of the efficiency.
    11. 11. Save Selectors
    12. 12. Save Selectors • Urrgh:! $(“myelem”).hide(); $(“myelem”).css(“width”, ”200”); $(“myelem”).show();
    13. 13. Save Selectors • Urrgh:! $(“myelem”).hide(); $(“myelem”).css(“width”, ”200”); $(“myelem”).show(); • Nicer: var elem = $(“myelem”); elem.hide(); elem.css(“width”, “200”); elem.show();
    14. 14. Or Chain
    15. 15. Or Chain • $(“myelem”).hide().css(“width”, “200”).show();
    16. 16. Or Chain • $(“myelem”).hide().css(“width”, “200”).show(); • Either use this or caching to variables - whichever suits you and/or the situation best.
    17. 17. Chain over Multiple Lines
    18. 18. Chain over Multiple Lines • $(“elem”).hide().addClass().show().attr();
    19. 19. Chain over Multiple Lines • $(“elem”).hide().addClass().show().attr(); • $(“elem”) .hide() .addClass() //etc
    20. 20. Context
    21. 21. Context • If you’ve cached an element, you can add this as context as the second parameter: $(“myelem”, someCachedElement);
    22. 22. Context • If you’ve cached an element, you can add this as context as the second parameter: $(“myelem”, someCachedElement); • This looks for “myelem” within someCachedElement.
    23. 23. Context Continued
    24. 24. Context Continued • Contextualised selectors should be in the form: $(selector, context)
    25. 25. Context Continued • Contextualised selectors should be in the form: $(selector, context) • EG: $(“myelem”, “#somediv”); jQuery will only search inside #somediv for “myelem”.
    26. 26. Context Continued
    27. 27. Context Continued • When you do use the context, jQuery just calls the find() method on that context: $(selector, context) = $ (context).find(selector).
    28. 28. Context Continued • When you do use the context, jQuery just calls the find() method on that context: $(selector, context) = $ (context).find(selector). • So the best way is to skip that step and just do: $(context).find(selector);
    29. 29. Clever Traversing http://api.jquery.com/category/traversing/
    30. 30. Clever Traversing • jQuery provides so many traversing functions that there is often a shortcut. http://api.jquery.com/category/traversing/
    31. 31. Clever Traversing • jQuery provides so many traversing functions that there is often a shortcut. • Rarely should you have to go back to where you’ve gone: $ ("elem").find("p").hide().parent().find("h2").h ide(); http://api.jquery.com/category/traversing/
    32. 32. Clever Traversing • jQuery provides so many traversing functions that there is often a shortcut. • Rarely should you have to go back to where you’ve gone: $ ("elem").find("p").hide().parent().find("h2").h ide(); • Can easily be made much nicer: http://api.jquery.com/category/traversing/
    33. 33. Clever Traversing
    34. 34. Clever Traversing • Be sensible - be sure to use the right function for the right job.
    35. 35. Clever Traversing • Be sensible - be sure to use the right function for the right job. • For example - the functions find() and children().
    36. 36. Avoid Class Selection http://www.quirksmode.org/dom/w3c_core.html
    37. 37. Avoid Class Selection • getElementById and getElementsByTagName are preferred to getElementsByClassName - supported in all browsers bar IE6, 7 and 8 (surprise?). http://www.quirksmode.org/dom/w3c_core.html
    38. 38. Avoid Class Selection • getElementById and getElementsByTagName are preferred to getElementsByClassName - supported in all browsers bar IE6, 7 and 8 (surprise?). • As jQuery can rely on getElementById & getElementsByTagName select by ID or Tag if you possibly can. http://www.quirksmode.org/dom/w3c_core.html
    39. 39. Check if an Element Exists
    40. 40. Check if an Element Exists • Easy: if($(“elem”).length) { //element must exist }
    41. 41. Check if an Element Exists • Easy: if($(“elem”).length) { //element must exist } • jQuery gracefully degrades - if it does not exist no errors thrown and nothing breaks.
    42. 42. Run onLoad
    43. 43. Run onLoad • Run your Javascript once the DOM is loaded like so (when using jQuery): $(document).ready(function() { //add code in now }
    44. 44. Run onLoad • Run your Javascript once the DOM is loaded like so (when using jQuery): $(document).ready(function() { //add code in now } • Shorten this to: $(function() { //code here }
    45. 45. Apply a Class to <body>
    46. 46. Apply a Class to <body> • The first line of your code can add a class to the body to inform you if Javascript is on: $(body).addClass(“javascripton”);
    47. 47. Apply a Class to <body> • The first line of your code can add a class to the body to inform you if Javascript is on: $(body).addClass(“javascripton”); • On a similar note, if you can make CSS do the heavy work, do so. Javascript should do the bare minimum.
    48. 48. Store info with jQuery’s data method
    49. 49. Store info with jQuery’s data method • jQuery provides its own method for storing data to be used later on. $(“myelem”).data(“usefulstuff”,”value of this data”)
    50. 50. Store info with jQuery’s data method • jQuery provides its own method for storing data to be used later on. $(“myelem”).data(“usefulstuff”,”value of this data”) • And it can be retrieved like so: $(“myelem”).data(“usefulstuff”);
    51. 51. Surrender the $
    52. 52. Surrender the $ • jQuery.noConflict(); Now use jQuery instead of $: jQuery(“myelem”).hide();
    53. 53. Surrender the $ • jQuery.noConflict(); Now use jQuery instead of $: jQuery(“myelem”).hide(); • (function($) { //use $ as normal here for jQuery })(jQuery); //out here $ is not relating to jQuery
    54. 54. Combine & Minify • Once you’re done, combining your scripts into one and then minifying them is a big help.
    55. 55. Combine & Minify • Once you’re done, combining your scripts into one and then minifying them is a big help. http://www.scriptalizer.com/
    56. 56. Links & Resources • Official site: www.jquery.com • jQuery Docs: docs.jquery.com • www.learningjquery.com • net.tutsplus.com (hit and miss)
    57. 57. Thanks! @Jack_Franklin www.jackfranklin.co.uk

    ×