Your SlideShare is downloading. ×
Bcblackpool jquery tips
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

Bcblackpool jquery tips

940
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
940
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
1
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
  • 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.

  • Transcript

    • 1. Pimp my Ride jQuery By @Jack_Franklin
    • 2. Load from Google
    • 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. 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. 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. Use of CSS SelectorS!
    • 7. Use of CSS SelectorS! • jQuery Traversal functions take CSS Selector
    • 8. Use of CSS SelectorS! • jQuery Traversal functions take CSS Selector • Often forgotten - use multiple selectors to make up a CSS selector.
    • 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. 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. Save Selectors
    • 12. Save Selectors • Urrgh:! $(“myelem”).hide(); $(“myelem”).css(“width”, ”200”); $(“myelem”).show();
    • 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. Or Chain
    • 15. Or Chain • $(“myelem”).hide().css(“width”, “200”).show();
    • 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. Chain over Multiple Lines
    • 18. Chain over Multiple Lines • $(“elem”).hide().addClass().show().attr();
    • 19. Chain over Multiple Lines • $(“elem”).hide().addClass().show().attr(); • $(“elem”) .hide() .addClass() //etc
    • 20. Context
    • 21. Context • If you’ve cached an element, you can add this as context as the second parameter: $(“myelem”, someCachedElement);
    • 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. Context Continued
    • 24. Context Continued • Contextualised selectors should be in the form: $(selector, context)
    • 25. Context Continued • Contextualised selectors should be in the form: $(selector, context) • EG: $(“myelem”, “#somediv”); jQuery will only search inside #somediv for “myelem”.
    • 26. Context Continued
    • 27. Context Continued • When you do use the context, jQuery just calls the find() method on that context: $(selector, context) = $ (context).find(selector).
    • 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. Clever Traversing http://api.jquery.com/category/traversing/
    • 30. Clever Traversing • jQuery provides so many traversing functions that there is often a shortcut. http://api.jquery.com/category/traversing/
    • 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. 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. Clever Traversing
    • 34. Clever Traversing • Be sensible - be sure to use the right function for the right job.
    • 35. Clever Traversing • Be sensible - be sure to use the right function for the right job. • For example - the functions find() and children().
    • 36. Avoid Class Selection http://www.quirksmode.org/dom/w3c_core.html
    • 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. 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. Check if an Element Exists
    • 40. Check if an Element Exists • Easy: if($(“elem”).length) { //element must exist }
    • 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. Run onLoad
    • 43. Run onLoad • Run your Javascript once the DOM is loaded like so (when using jQuery): $(document).ready(function() { //add code in now }
    • 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. Apply a Class to <body>
    • 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. 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. Store info with jQuery’s data method
    • 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. 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. Surrender the $
    • 52. Surrender the $ • jQuery.noConflict(); Now use jQuery instead of $: jQuery(“myelem”).hide();
    • 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. Combine & Minify • Once you’re done, combining your scripts into one and then minifying them is a big help.
    • 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. Links & Resources • Official site: www.jquery.com • jQuery Docs: docs.jquery.com • www.learningjquery.com • net.tutsplus.com (hit and miss)
    • 57. Thanks! @Jack_Franklin www.jackfranklin.co.uk