《如何提高JQuery代码效率》.pdf

1. 总是从ID 选择器开始继承 在jquery 中最快的选择器是ID 选择器. 因为它直接来自于Javascript 的getElementById 方法. div id “content” form method “post” action “/” Traffic Light ul id “traffic_light” input type “radio” class “on” name “light” value “red” / Red input type “radio” class “off” name “light” value “yellow” / Yellow input type “radio” class “off” name “light” value “green” / Green input class “button” id “traffic_button” type “submit” value “Go” / 像这样选择按钮是低效的: var traffic_button $ ‘#content .button’ ; 用ID 直接选择按钮效率更高: var traffic_button $ ‘#traffic_button’ ; 选择多个元素 提到多元素选择其实是在说DOM 遍历和循环, 这些都是比较慢的东西.为了提高性能, 最好从就近的ID开始继承. var traffic_lights $ ‘#traffic_light input’ ; 2. 在class 前使用tag 第二快的选择器是tag 选择器 $ ‘head’ . 同理,因为它来自原生的getElementsByTagName 方法. div id “content” form method “post” action “/” Traffic Light ul id “traffic_light” input type “radio” class “on” name “light” value “red” / Red input type “radio” class “off” name “light” value “yellow” / Yellow input type “radio” class “off” name “light” value “green” / Green input class “button” id “traffic_button” type “submit” value “Go” / ; 总是用一个tag name 来限制 修饰 class 并且不要忘记就近的ID : var active_light $ ‘#traffic_light input.on’ ; 注意: 在jquery 中Class 是最慢的选择器. IE浏览器下它会遍历所有DOM 节点不管它用在那里. 不要用用tag name 来修饰ID. 下面的例子将会遍历所有的div 元素来查找id 为’content’的哪一个节点: var content $ ‘div#content’ ; 用ID 修饰ID 也是画蛇添足: var traffic_light $ ‘#content #traffic_light’ ; 3.将jquery 对象缓存起来 要养成将jquery 对象缓存进变量的习惯. 永远不要这样做: $ #traffic_light input.on .bind click, function … ; $ #traffic_light input.on .css border, 3px dashed yellow ; $ #traffic_light input.on .css background-color,orange ; $ #traffic_light input.on .fadeIn slow ; 最好先将对象缓存进一个变量然后再操作: var $active_light $ ‘#traffic_light input.on’ ; $active_light .bind ‘click’, function … ; $active_light .css ‘border’, ‘3px dashed yellow’ ; $active_light .css ‘background-color’, ‘orange’ ; $active_light .fadeIn ’slow’ ; 为了记住我们本地变量是jquery 的封装, 通常用一个$作为变量前缀. 记住,永远不要让相同的选择器在你的代码 里出