.find()选择器、不要滥用$(this)

如果不了解javascript中基本的DOM属性和方法的话,很容易滥用jQuery对象。比如:

$('#some').click(function() {            
    alert( $(this).attr('id') );           
});


 如果你只是通过jQuery对象获取简单的dom元素属性,比如id,那么你完全可以使用js原生的方法:

$('#some').click(function() {            
    alert(this.id );           
});           


jQuery有非常强大的Sizzle引擎(jquery1.3将选择器引擎独立,定名为Sizzle,这也是jQuery第一个独立的模块。在Sizzle的介绍里,关于它的首要目的就是在”最常用的选择器使用”比之前版本的引擎更快)来实现选择器,jQuery做了优化,他们能很好的工作,你一般不必担心太多。但是,我们可以稍微做一些改进,可以使你的脚本略有提高。

一般在jQuery中能不要用Sizzle引擎就不要用,当然只要有可能就尽量使用find()方法。比如:

$('#some p.someClass').hide();   
$('#some').find('p.someClass').hide();

上面两行代码的执行结果是完全一样的,但是下面的执行效率要比上面的高。

现代浏览器(除IE6,IE7)都有QuerySelectorAll(js获取元素对象方法)支持,能够像CSS选择器一样获取对象,而不需要用到jQuery中的Sizzle引擎。jQuery会在使用自己引擎之前检查是否存在这个函数。

对于IE6/IE7就需要jQuery使用Sizzle引擎,jQuery会把你的选择器转化成一个数组,并且通过从右向左来迭代匹配。通过正则表达式匹配页面每一个元素,所以你的可以尽量减少选择器的层级,尽可能的使用最右边的选择器,比如使用id选择器等,这个规则和我们css的查找规则是一样的,如果你要优化css选择器,也要知道这个规则:从右向左迭代匹配。

尺度把握:

1、保持代码的简单;

2、尽可能的使用find查找,使用浏览器的原生查找函数;

3、尽可能的使用最右边的选择器,比如ID。

你可能感兴趣的:(.find()选择器、不要滥用$(this))