执行结果：缓存jQuery对象每次通过选择器构建一个新的jQuery对象时，jQuery的核心部分的Sizzle引擎会遍历DOM然后通过对应的选择器来匹配真正的dom元素。这种方式比较低效，在现代浏览器中可以通过document.querySelector方法通过传入对应的Class参数来匹配对应的元素，不过IE8以下版本不支持此方法。一个提高性能的实践是通过变量缓存jQuery对象。例如：<ul id="pancakes" > <li>first</li> <li>second</li> <li>third</li> <li>fourth</li> <li>fifth</li></ul>JS：// 不好的方式:// $("#pancakes li").eq(0).remove();// $("#pancakes li").eq(1).remove();// $("#pancakes li").eq(2).remove();// ------------------------------------// 推荐的方式:var pancakes = $("#pancakes li");pancakes.eq(0).remove();pancakes.eq(1).remove();pancakes.eq(2).remove();// ------------------------------------// 或者:// pancakes.eq(0).remove().end()// .eq(1).remove().end()// .eq(2).remove().end();定义一个可以复用的函数直接上例子：HTML：<button id="menuButton" >Show Menu!</button><a href="#" id="menuLink" >Show Menu!</a>JS：//Bad: //这个会导致多个回调函数的副本占用内存$("#menuButton, #menuLink" ). click(function(){// ...});//----------------------------------------------//Betterfunction showMenu(){alert("Showing menu!" );// Doing something complex here}$("#menuButton" ). click(showMenu);$("#menuLink" ). click(showMenu);
更多相关内容：
