25. jQuery

25.1?使用?$?作為存儲 jQuery 對象的變量名前綴。

// bad
const sidebar = $('.sidebar');

// good
const $sidebar = $('.sidebar');

25.2?緩存 jQuery 查詢。

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

  // ...stuff...

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

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

  // ...stuff...

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

25.3?對 DOM 查詢使用層疊?$('.sidebar ul')?或 父元素 > 子元素?$('.sidebar > ul')。?jsPerf

25.4?對有作用域的 jQuery 對象查詢使用?find。

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

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

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

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

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