jQuery
What is jQuery?

• jQuery is a JavaScript Framework
• jQuery takes away the pain
• jQuery is a designers best friend
• jQu...
jQuery Simplifies
• CSS Selectors
  $(“a”).css(“color”,”red”);


• Chainable
  $(“a”).css(“background-color”,”green”).click...
Separation
•   CSS - Presentation from markup.

•   jQuery - Behavior from markup.

•   *Degradation* (but do so gracefull...
Why I love it
•   Immediately productive

•   Excellent documentation
    http://docs.jquery.com

•   Simple Syntax
    Pr...
Demo: Rating
http://kylebradshaw.com/presentations/jQuery/rating.php
Tips
• Speed + Efficiency (jrules.js)
  http://somedirection.com/2008/03/14/structuring-jquery-
   for-speed-and-efficiency/...
Tips
• Start building the degraded version FIRST
• Turn off JavaScript while testing
• Leverage Plugins
• Utilize <noscrip...
Demo: Comments
• Toggle-able Items? - Degrade
  Show/Hide with CSS
  .toggle_me (display:none;)

  Enhance with jQuery
  $...
Avoid
• Never use jQuery inline
    these practices do not degrade with JS turned OFF

 • http://reboot.com
   <a id="show...
Tools
• Firefox
• Web Developer Plugin
• Firebug
• TextMate
• Sync
  http://somedirection.com/?s=agile+development+workflow...
Plugins
• jQuery Form Plugin
  http://malsup.com/jquery/form/

•   Thickbox Plugin
    http://jquery.com/demo/thickbox/

•...
About Me

•   Kyle Bradshaw
    Front End Web Developer

•   Blog - http://somedirection.com

•   AIM - kyledbradshaw

•  ...
Upcoming SlideShare
Loading in...5
×

Kyle Bradshaw's JQuery Best Practices

4,449

Published on

Author :
• Kyle Bradshaw
Front End Web Developer
• Blog - http://somedirection.com
• AIM - kyledbradshaw
• Twitter - @ky

Published in: Education, Technology, Business
2 Comments
5 Likes
Statistics
Notes
No Downloads
Views
Total Views
4,449
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
99
Comments
2
Likes
5
Embeds 0
No embeds

No notes for slide

Kyle Bradshaw's JQuery Best Practices

  1. 1. jQuery
  2. 2. What is jQuery? • jQuery is a JavaScript Framework • jQuery takes away the pain • jQuery is a designers best friend • jQuery is designed to change the way that you write JavaScript.
  3. 3. jQuery Simplifies • CSS Selectors $(“a”).css(“color”,”red”); • Chainable $(“a”).css(“background-color”,”green”).click(function(){ return confirm(“Are you sure?”); }); • Web 2.0 Effects • Easily Extensible • Enhanced Browser Support.
  4. 4. Separation • CSS - Presentation from markup. • jQuery - Behavior from markup. • *Degradation* (but do so gracefully) • No more <a onclick=”doSomething()” href=” ... • Cleaner, Easier to manage code
  5. 5. Why I love it • Immediately productive • Excellent documentation http://docs.jquery.com • Simple Syntax Prototype: new Ajax.Updater('placeholder', url, { method: 'get', parameters: par }); jQuery: $('#placeholder').load(url + par); • Active Community • Less is More
  6. 6. Demo: Rating http://kylebradshaw.com/presentations/jQuery/rating.php
  7. 7. Tips • Speed + Efficiency (jrules.js) http://somedirection.com/2008/03/14/structuring-jquery- for-speed-and-efficiency/ • <body id=”home”> • if ($("body#home").size()) { // only applies rules on the homepage }
  8. 8. Tips • Start building the degraded version FIRST • Turn off JavaScript while testing • Leverage Plugins • Utilize <noscript> • Inline JS isn’t necessary
  9. 9. Demo: Comments • Toggle-able Items? - Degrade Show/Hide with CSS .toggle_me (display:none;) Enhance with jQuery $(".toggle_me").show(); $(".hide_me").hide(); • Ex. Comment Form http://kylebradshaw.com/presentations/jQuery/comments.php
  10. 10. Avoid • Never use jQuery inline these practices do not degrade with JS turned OFF • http://reboot.com <a id="showAndHideComments" href="javascript:toggleVisibility('toggle');"> • http://rightsagent.com <img onclick="return ra.popups.showPopup('register', 'txtNewUserEmail');" style="cursor: pointer;" src="/ media/images/Register.gif"/> • Building HTML in JavaScript • Ignoring Degradation - “With great power comes great responsibility”
  11. 11. Tools • Firefox • Web Developer Plugin • Firebug • TextMate • Sync http://somedirection.com/?s=agile+development+workflow • MacBook (this is how I roll)
  12. 12. Plugins • jQuery Form Plugin http://malsup.com/jquery/form/ • Thickbox Plugin http://jquery.com/demo/thickbox/ • jQuery Validation Plugin http://bassistance.de/jquery-plugins/jquery-plugin-validation/ • Live Query Plugin http://brandonaaron.net/docs/livequery/ • jQuery UI Plugins http://ui.jquery.com/
  13. 13. About Me • Kyle Bradshaw Front End Web Developer • Blog - http://somedirection.com • AIM - kyledbradshaw • Twitter - @ky
  1. A particular slide catching your eye?

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

×