(置顶),,,jQuery最佳实践

<强> 1。使用最新版本的jQuery

$ (' .elem)
$ ('。elem’,上下文)
context.find (.elem)

<强> 2。用对选择器

<强>(1)最快的选择器:id选择器和元素标签选择器

美元(# id)

(“形式”)美元(“输入”)

<强>(2)较慢的选择器:类选择器


<强>(3)最慢的选择器:伪类选择器和属性选择器

$(':隐藏)

$(“[属性=值]”)

<强> 3。理解子元素和父元素的关系

$ ('。孩子,父母)
parent.find美元(.child)
parent.children美元(.child)
$(' #父母比;.child”)
$(' #父母.child ')
$ ('。孩子”,(“#父”)美元)

<强> (1)$ ('。孩子,父母美元)

<强>(2)美元parent.find (.child)

<强>(3)美元parent.children (.child)

<强>(4)$(' #父母比;.child”)

<强>(5)美元(#父母.child)

<强> (6)$ ('。孩子”,(“#父”)美元)



<强> 4。不要过度使用jQuery

$ (' a ') .click(函数(){
<强>警报($(这).attr (id));
});

$ (' a ') .click(函数(){
<强>警报(this.id);
});

<强> 5。做好缓存

jQuery(#最高);(p.classA);
jQuery(#最高);(p.classB);

<强> var缓存=jQuery(#最高);
cached.find (p.classA);
cached.find (p.classB);

<强> 6。使用链式写法

美元(div); (h4) .eq (2) . html(“你好”);

<强> 7。事件的委托处理(事件代表团)

$ (“td") .bind (“click",函数(){
美元(这).toggleClass (“click");
});

$ (“table") .delegate (“td",“click",函数(){
美元(这).toggleClass (“click");
});

$ (“table") . each(函数(){
$ (“td",这).live (“click",函数(){
美元(这).toggleClass (“click");
});
});

<强> 8。少改动DOM结构

var elem=$ (' # elem ');
<强> elem.data(键,值);

var elem=$ (' # elem ');
<强> $ . data (elem键,值);

<强> 9。正确处理循环


<强> 10。尽量少生成jQuery对象

<强> jQuery对象 <强> jQuery函数

var文本=美元(“# text");
<强> var ts=text.text美元();

var文本=美元(“# text");
<强> var ts=美元。text(文本)美元;

每一个超人背后~都有一只默默承受的小怪兽~

(置顶),,,jQuery最佳实践