jQuery – Web Development Standards

It’s assumed that the reader knows how to code using jQuery. The purpose of this document is to highlight some best practices and also things to avoid.
Note: As of this writing, recommendations are based on jQuery 1.7.x In progress


Things to be avoided when using jQuery

These are some coding practices that are to be avoided when using jQuery. Some may be performance bottlenecks and some may just go against the commonly accepted way to do things in jQuery.
This will also list things in jQuery that are deprecated and/or removed from the library.

  1. Use $.support.boxModel instead of $.boxModel.deprecated in 1.3
  2. Use browser class on body element, instead of $.browser.deprecated in 1.3removed in 1.9
    
    	if ($.browser.msie) {....}          // wrong
    	if ($('body').hasClass('ie') {...}  // right
    	
  3. Use .hasClass() instead of .is() when checking for a CSS class on an element.
    The hasClass fn is faster Proof

    
    	if ($('body').is('.ie') {...}  // wrong
    	if ($('body').hasClass('ie') {...}  // right
    	

    This does not apply to usage of psuedo-selectors. For example, .is(‘:checked’) is still correct.

  4. Values in selectors must be quoted.changed in 1.6
    
    	$('input[type=text]')   // wrong
    	$('input[type="text"]') // right
    	
  5. Do not use .attr(‘checked’) to determine whether a checkbox is checked. This attribute does not change when the box is checked.changed in 1.6
    Use .prop(‘checked’) (new in 1.6) or .is(‘:checked’) (in all versions) – both of these return boolean, not string.
    Similarly, use .prop(‘checked’, true|false) to turn the checkbox on/off, instead of .prop(‘checked’, ”|’checked’ or .attr(‘checked’, ”|’checked’).
  6. Do not use event.layerX, event.layerY properties – they’re not available in Chrome.removed in 1.7
    These can be replaced if needed for browsers that support them with event.originalEvent.layerX and event.orginalEvent.layerY.
  7. Do not use $.isNaN. Can be replaced with new $.isNumeric()removed in 1.7
  8. Do not use $.event.proxy(). Use $.proxy() instead.removed in 1.7
  9. Use the .length property, not the .size function.changed in 1.8
  10. Do not use $(“#foo’).curCSS(). Use $(‘#foo’).css() instead.removed in 1.8
  11. Use on/off instead of live/die and delegate/undelate for event wiring.deprecated in 1.7 removed in 1.9
    
    	$('#foo').live('click', function() {...}); //wrong
    	$('#foo').on('click', function() {...});   //right
    	
  12. Use $(‘#foo’).val() to get/set the current value of an attribute,
    instead of $(‘#foo’).attr(‘value’) and $(‘#foo’).attr(‘value’, ‘xxx’).
    $(‘#foo’).attr(‘value’) is intended to get the original value attribute from the HTML, which may not be the current value.
    For back-compat, $(‘#foo’).attr(‘value’) was returning the current value.deprecated in 1.7removed in 1.8
  13. Do not use .data(‘events’). This is an internal data structure.removed in 1.9
    This data is still available via $._data(element, ‘events’), however this is considered an internal(private) method and subject to change.
  14. Do not use the form of .toggle() which takes multiple functions as args to be executed on subsequent clicks.deprecated in 1.8removed in 1.9
    This can be accomplished with a normal click handler and some sort of status or flag check.
    The simple form of .toggle() with no args is still valid for simple swapping of element visibility.
  15. Use .show() and .hide() rather than .attr(‘style’, ‘block’ | ‘none’). Using the functions will respect the current CSS used to show/hide the element (display vs visibility), whereas using attr(‘style’,…), you could end up with conflicting display and visibility properties set on the element.
  16. Do not use the input type selectors: :file, :text, :image, :password, :radio, :submit, :reset.deprecated in 1.8
    Instead use the ‘type=’ selector, for example:

    
    	$('input :text').hide();         // wrong
    	$('input[type="text"]').hide();  // right
    	
  17. Do not use the ‘:button’ and ‘:checkbox’ selectors. Because these selectors aren’t part of the CSS spec, jQuery can’t use the native querySelectorAll() method. It’s faster to use standard input selectors. For example:
    
    	$(':button, :checkbox').hide();             // wrong
    	$(':checkbox').hide();                      // wrong
    	$('button, input[type="button"]').hide();   // right
    	$('input[type="button"], input[type="checkbox"]').hide(); //right.
    	
  18. Avoid using .load() for images.deprecated in 1.7
    For example:

    
    	$('<img />').load(function() { $('#curtain').hide(); } or
    	$('<img />').bind('load', function() { $('#curtain').hide(); }
    	

    There are some known issues trying to execute code in a load handler for images:

    • doesn’t work consistently cross browser
    • doesn’t fire right in Webkit if the src attr is set to the same value
    • doesn’t bubble up the DOM tree
    • doesn’t always fire for images that have been cached by browser
  19. Do not use the $.unload() or $(‘window’).bind(‘unload’).deprecated in 1.7
    Behavior of this is not consistent cross-browser. Use the native beforeunload event for any processing that needs to happen before the window closes.
  20. Do not use $.attrFn(), $.clean, $.event.handle(), $.offset.bodyOffset(), $.sub().removed in 1.9
  21. Do not use Deferred.isResolved(), Deferred.isRejected().removed in 1.8
  22. Do not use the $.ajax() .success(), .complete() and .error() methods. These are aliases to the .done(), .always() and .fail() methods.deprecated in 1.7
    NOTE this does not affect the handler names passed in via and ajax config object. For example:

    
    	$.ajax({url:'sears.com', success: function() {...}, error: function() {...}); // still valid
    	
  23. Global AJAX event handlers (ajaxStart, ajaxStop, ajaxSend, ajaxComplete, ajaxError, and ajaxSuccess) must be attached to the document, rather than some other element.changed in 1.9
    
    	//wrong
    	$('#header').ajaxStart(function() { //do something when ajax call is made });
    	//right
    	$(document).ajaxStart(function() { //do something when ajax call is made });
    

 

Post a New Comment

Your feedback will help us improve this page. If you have a comment about the content of this page, use the form below, and the Patterns Team will get back to you within a business day.

For general questions or assistance, email the Patterns Team directly.