以下就较为常用的选择器进行比对和优化:
CSS选择器
效率高到低:
1.id选择器(#id)
2.类选择器(.class)
3.标签选择器(div,h1,p)
4.后代选择器(li a)
优化方案:
1.优先考虑用class选择器,虽然id选择器效率最高,但id选择的唯一性,需谨慎使用。
2.使用id或者class选择器时,勿再加类名或者标签名。例如
/*bad*/
div#id{}
p.class{}
.class1.class2{}
/*good*/
#id{}
.class{}
.class2{}
3.把多层标签选择规则用class替换。例如
/*bad*/
div>input[type="button"]{}
/*good*/
.input-btn{}
4.少用后代选择器,尤其是和标签或者通配符一起使用。例如
/*bad*/
ul li *{}
/*good*/
.list-in{}
JQ选择器
效率高到低:
1.id选择器$('#id')
2.标签选择器$('div'):它直接来自原生的Javascript方法getElementByTagName()。
4.find(),next(),children()等函数
5.后代选择器$('ul a')
$(' .class')//bad
$('div.class')//good
$('#id #id_in')//bad
$('div#id_in')//bad
$('#id_in')//good
4.尽量使用jq提供的find(), next(),children()等函数将进行遍历,少用高级选择器。例如var obj= $('div.class');//obj就是缓存起来的对象
obj.find('li').addClass('.on');
$('#di li')//bad
$('#div').find('li')//good
$('#id').addClass('.on').click(function(){});