jQuery编程最佳实践笔记

时间:2021-08-08 21:37:45

优化选择器

  选择器优化已经不如从前那么重要,因为更多的浏览器实现了document.querySelectorAll()方法,所以选择的重担由jQuery转移到了浏览器。

但是仍然有一些技巧是需要记住的。

ID-Based Selectors

 选择器开始选择符永远都是最好的。

// Fast:
$( "#container div.robotarm" );
 
// Super-fast:
$( "#container" ).find( "div.robotarm" );
第二种方法更快是因为第一部分选择器不需要通过Sizzle选择器引擎,单独的只有ID的选择器由document.getElementById()方法处理。

Specificity

在选择器的右边更加具体,而不是左边。

// Unoptimized:
$( "div.data .gonzalez" );
 
// Optimized:
$( ".data td.gonzalez" );
 
在最右边使用 tag.className,而在左边只是用tag或者.class。

Avoid Excessive Specificity

$( ".data table.attendees td.gonzalez" );
 
// Better: Drop the middle if possible.
$( ".data td.gonzalez" );
 

DOM操作相关

Detach Elements to Work with Them

var table = $( "#myTable" );
var parent = table.parent();
 
table.detach();
 
// ... add lots and lots of rows to table
 
parent.append( table );
 
jQuery提供detach()方法将元素从文档树中脱离。