JavaScript规范之jQuery

优化jQuery查询与DOM操作的最佳实践

最新推荐文章于 2025-09-15 00:09:33 发布

转载最新推荐文章于 2025-09-15 00:09:33 发布 · 597 阅读

JavaScript 专栏收录该内容

20 篇文章

订阅专栏

本文深入探讨了在JavaScript编程中优化jQuery查询和DOM操作的方法，包括使用级联查询、作用域内的jQuery对象查询及缓存查询等技巧，以提高代码效率和性能。

特别说明：转载与网络：https://github.com/adamlu/javascript-style-guide

缓存jQuery查询

// bad
function setSidebar() {
  $('.sidebar').hide();

  // ...stuff...

  $('.sidebar').css({
    'background-color': 'pink'
  });
}

// good
function setSidebar() {
  var $sidebar = $('.sidebar');
  $sidebar.hide();

  // ...stuff...

  $sidebar.css({
    'background-color': 'pink'
  });
}

对DOM查询使用级联的 $('.sidebar ul') 或 $('.sidebar ul')，jsPerf

对有作用域的jQuery对象查询使用 find

// bad
$('.sidebar', 'ul').hide();

// bad
$('.sidebar').find('ul').hide();

// good
$('.sidebar ul').hide();

// good
$('.sidebar > ul').hide();

// good (slower)
$sidebar.find('ul');

// good (faster)
$($sidebar[0]).find('ul');