Your SlideShare is downloading. ×
0
Kyle Bradshaw's JQuery Best Practices
Kyle Bradshaw's JQuery Best Practices
Kyle Bradshaw's JQuery Best Practices
Kyle Bradshaw's JQuery Best Practices
Kyle Bradshaw's JQuery Best Practices
Kyle Bradshaw's JQuery Best Practices
Kyle Bradshaw's JQuery Best Practices
Kyle Bradshaw's JQuery Best Practices
Kyle Bradshaw's JQuery Best Practices
Kyle Bradshaw's JQuery Best Practices
Kyle Bradshaw's JQuery Best Practices
Kyle Bradshaw's JQuery Best Practices
Kyle Bradshaw's JQuery Best Practices
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

Kyle Bradshaw's JQuery Best Practices

4,423

Published on

Author : …

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,423
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
98
Comments
2
Likes
5
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

Transcript

  • 1. jQuery
  • 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. 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. 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. 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. Demo: Rating http://kylebradshaw.com/presentations/jQuery/rating.php
  • 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. Tips • Start building the degraded version FIRST • Turn off JavaScript while testing • Leverage Plugins • Utilize <noscript> • Inline JS isn’t necessary
  • 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. 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. Tools • Firefox • Web Developer Plugin • Firebug • TextMate • Sync http://somedirection.com/?s=agile+development+workflow • MacBook (this is how I roll)
  • 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. About Me • Kyle Bradshaw Front End Web Developer • Blog - http://somedirection.com • AIM - kyledbradshaw • Twitter - @ky

×