5个jquery 选择器小tips

  jquery 选择器是十分强大的,但在使用时,应该注意其效率问题,在sitepoint
上的新文章总结的比较好http://www.sitepoint.com/efficient-jquery-selectors/,小结了,如下:
 
1 尽可能使用id属性
    尽可能使用id属性去选择元素,这样即使在旧的浏览器,速度也会很快
$("#myelement"); 

2 避免只使用 class属性去搜索
   比如$(".myclass");
这样,在IE 6/7等旧点的浏览器中,必须检查页面上所有的元素,以确定.myclass能否被应用,应该这样:
   $("div.myclass"); 
3 让选择器尽可能简单,不要使用多于3层的选择器,比如
   $("body #page:first-child article.main p#intro em"); 
4 注意选择器的顺序
   比如:$("p#intro em");  中,

  jquery会将每个em元素加载到数组中,如果em元素一多起来,效率会低,可以采用如下两个方法解决:
$("em", $("p#intro")); // or 
$("p#intro").find("em"); 

5 避免重复选择
  $("p").css("color", "blue"); 
$("p").css("font-size", "1.2em"); 
$("p").text("Text changed!");

  可以写成:
  $("p").css({ "color": "blue", "font-size": "1.2em"}).text("Text changed!"); 
  如果要多次用jquery对象的话可以先把其保存为变量,再操作,比如
  var $p = $("p"); 
$p.css("color", "blue"); 
$p.text("Text changed!");

评论

1 楼 qishuai 2011-11-29  

支持下 学习了