网页制作Webjx文章简介：jQuery代码的14条改善技巧.

6.在FireBug控制台记录jQuery

FireBug是我最喜欢用的一个浏览器扩展工具之一，这个工具可以让你快速的在可视化界面中了解当前页面的HTML+CSS+JavaScript，并在该工具下完成即时开发。作为jQuery或JavaScript开发人员，FireFox对于记录你的JavaScript代码也得到支持。

写入FireBug控制台的最简单方式如下:

console.log("helloworld")

你也可以按照你希望的方式写一些参数：

console.log(2,4,6,8,"foo",bar)

你也可以编写一个小扩展来记录jQuery对象到控制台：

jQuery.fn.log=function(msg){

console.log("%s:%o",msg,this);

returnthis;

};

对于这个扩展，你可以直接使用.log()方法来记录当前对象到控制台。

$('#some_div').find('li.source>input:checkbox')

.log("sourcestouncheck")

.removeAttr("checked");

7.尽可能使用ID选择器

在使用jQuery之后，你会发现利用class属性来选择DOM元素变得相当简单。尽管如此，还是推荐大家尽量少用class选择器取而代之尽量多使用运行更快的ID选择器(IE浏览器下使用class选择器会在遍历整个DOM树之后返回相符的class包装集)。而ID选择器更快是因为DOM本身就有”天然的”getElementById这个方法，而class并没有。所以如果使用class选择器的话，浏览器会遍历整个DOM，如果你的网页DOM结构足够复杂，这些class选择器足矣把页面拖得越来越慢。让我们看看这段简单的HTML代码:

<divid="main">

<formmethod="post"action="/">

<h2>SelectorsinjQuery</h2>

...

...

<inputclass="button"id="main_button"type="submit"value="Submit"/>

</form>

</div>

//使用class来调用submit按钮要比使用绝对的ID选择器慢很多

varmain_button=$('#main.button');

varmain_button=$('#main_button');

8.善于利用jQuery链

jQuery链不但允许以简洁的方式写出强大的操作，而且提高了开发效率，因为它能够把多个命令应用到包装集，而不必重新计算包装集。从而你不用再这样写了：

<li>Description:<inputtype="text"name="description"value=""/></li>

$('#shopping_cart_itemsinput.text').css('border','3pxdashedyellow');

$('#shopping_cart_itemsinput.text').css('background-color','red');

$('#shopping_cart_itemsinput.text').val("textupdated");

取而代之你可以使用jQuery链来完成简便的操作：

varinput_text=$('#shopping_cart_itemsinput.text');

input_text.css('border','3pxdashedyellow');

input_text.css('background-color','red');

input_text.val("textupdated");

//samewithchaining:

varinput_text=$('#shopping_cart_itemsinput.text');

input_text

.css('border','3pxdashedyellow')

.css('background-color','red')

.val("textupdated");