25. jQuery
最后更新于：2022-04-01 21:12:54
* [25.1](https://github.com/yuche/javascript#25.1) 使用 `$` 作为存储 jQuery 对象的变量名前缀。
~~~
// bad
const sidebar = $('.sidebar');
// good
const $sidebar = $('.sidebar');
~~~
* [25.2](https://github.com/yuche/javascript#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](https://github.com/yuche/javascript#25.3) 对 DOM 查询使用层叠 `$('.sidebar ul')` 或 父元素 > 子元素 `$('.sidebar > ul')`。 [jsPerf](http://jsperf.com/jquery-find-vs-context-sel/16)
* [25.4](https://github.com/yuche/javascript#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();
~~~
';