学习笔记（一）

<div id=“content”>
<form method=“post” action=“/”>
<h2>Traffic Light</h2>
<ul id=“traffic_light”>
<li><input type=“radio” class=“on” name=“light” value=“red” /> Red</li>
<li><input type=“radio” class=“off” name=“light” value=“yellow” /> Yellow</li>
<li><input type=“radio” class=“off” name=“light” value=“green” /> Green</li>
</ul>
<input class=“button” id=“traffic_button” type=“submit” value=“Go” />
</form>
</div>

1、JQuery总是从ID选择器开始继承

在JQuery中最快的选择器是ID选择器，因为它直接来自于Javascript的getElementByID()方法。

你这样选择按钮是低效的：var traffic_button = $( '#content .button' );

用ID直接选择按钮效率更高：var traffic_button = $( '#traffic_button');

2、在class前使用tag

第二快的选择器是tag选择器($( 'head' )). 同理,因为它来自原生的getElementsByTagName() 方法.

总是用一个tag name来限制(修饰)class (并且不要忘记就近的ID):

var active_light = $(‘#traffic_light input.on’);

注意: 在jquery中Class是最慢的选择器. IE浏览器下它会遍历所有DOM节点不管它用在那里.

不要用用tag name来修饰ID. 下面的例子将会遍历所有的div元素来查找id为’content’的哪一个节点:

var content = $(‘div#content’);

用ID修饰ID也是画蛇添足:

var traffic_light = $(‘#content #traffic_light’);

3.将jquery对象缓存起来

要养成将jquery对象缓存进变量的习惯.

永远不要这样做:

$(‘#traffic_light input.on).bind( 'click', function(){…});

$(’#traffic_light input.on).css(‘border’, ‘3px dashed yellow' );

$(‘#traffic_light input.on).css( 'background-color', ‘orange' );

$(’#traffic_light input.on).fadeIn( 'slow' );

最好先将对象缓存进一个变量然后再操作:

var $active_light = $(‘#traffic_light input.on’);

$active_light.bind(‘click’, function(){…});

$active_light.css(‘border’, ‘3px dashed yellow’);

$active_light.css(‘background-color’, ‘orange’);

$active_light.fadeIn(’slow’);

为了记住我们本地变量是jquery的封装, 通常用一个$作为变量前缀. 记住,永远不要让相同的选择器在你的代码里出现多次.

缓存jquery结果,备用

如果你打算将jquery结果对象用在程序的其它部分,或者你的function会多次执行, 那么就将他们缓存到一个全局变量中.

定义一个全局容器来存放jquery结果, 我们就可以在其它函数引用它们:

4. 掌握强大的链式操作

上面的例子也可以写成这样:

var $active_light = $(‘#traffic_light input.on’);

$active_light.bind(‘click’, function(){…}).css(‘border’, ‘3px dashed yellow’).css( 'background-color', 'orange' ).fadeIn(’slow’);

这样可以写更少的代码, 让我们的js更轻。