jQuery pitfalls to avoid [closed]

by

Being unaware of the performance hit and overusing selectors instead of assigning them to local variables. For example:-

$('#button').click(function() {
    $('#label').method();
    $('#label').method2();
    $('#label').css('background-color', 'red');
});

Rather than:-

$('#button').click(function() {
    var $label = $('#label');
    $label.method();
    $label.method2();
    $label.css('background-color', 'red');
});

Or even better with chaining:-

$('#button').click(function() {
    $("#label").method().method2().css("background-color", "red"); 
});

I found this the enlightening moment when I realized how the call stacks work.

Edit: incorporated suggestions in comments.

More Related Contents:

  1. this in chained jquery functions
  2. When we using alert vs popup div tag? [closed]
  3. How to use a variable for a key in a JavaScript object literal?
  4. How to change the href attribute for a hyperlink using jQuery
  5. jQuery Get Selected Option From Dropdown
  6. How can I add or update a query string parameter?
  7. Change the selected value of a drop-down list with jQuery
  8. When to use Vanilla JavaScript vs. jQuery?
  9. Access Control Request Headers, is added to header in AJAX request with jQuery
  10. How to populate a cascading Dropdown with JQuery
  11. Difference between HTMLCollection, NodeLists, and arrays of objects
  12. Merge 2 arrays of objects
  13. Jquery/Ajax call with timer
  14. JavaScript / jQuery: Test if window has focus
  15. Best way to get all selected checkboxes VALUES in jQuery [duplicate]
  16. Replace multiple characters in one replace call
  17. Set window to fullscreen (REAL fullscreen; F11 functionality) by javascript
  18. How to send a message to a particular client with socket.io
  19. What does “return false;” do?
  20. How can I generate the opposite color according to current color?
  21. jQuery selector for an element that directly contains text?
  22. Calling a function on Bootstrap modal open
  23. Using PUT/POST/DELETE with JSONP and jQuery
  24. how to move a div with arrow keys
  25. Bootstrap Dropdown with Hover
  26. jquery-ui-dialog – How to hook into dialog close event
  27. jQuery: How to traverse / Iterate over a list of object
  28. How to get an Array with jQuery, multiple with the same name
  29. Uncaught NotFoundError: Failed to execute ‘insertBefore’ on ‘Node’: The node before which the new node is to be inserted is not a child of this node
  30. creating highchart with ajax json data

Leave a Comment