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(); ~~~
';