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

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

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

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

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

 诸如“src,” “href,” 和“style.”等一些属性在老版本的ie中使用了getAttribute方法。详细如下:

$("#id").click(function(){
	alert(this.title);
	alert(this.id);
	alert(this.className);
	alert(this.href);
	alert(this.style.width);
	alert(this.style.height);
	alert(this.style.color);   //返回值为rgb(17,17,17)
	alert(this.style.margin);
	alert(this.style.marginLeft);
	alert(this.style.border);
	alert(this.style.borderColor);
	alert(this.value); //input text
})

Query有非常强大的Sizzle引擎来实现选择器,jQuery做了优化,他们能很好的工作,你一般不必担心太多。然而,我们可以稍微做一些改进,将可以使你的脚本略有提高。

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

// Fine in modern browsers, though Sizzle does begin "running"   
  
$('#someDiv p.someClass').hide();   
  
// Better for all browsers, and Sizzle never inits.   
  
$('#someDiv').find('p.someClass').hide();
 

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

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

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

尺度把握:

1.保持代码简单

2.尽可能的使用find()查找,使用浏览器的原生查找函数

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

相关推荐