jquery简单易学，但如果你想写出更漂亮更简洁高效的代码，总需要一些技巧。本文就为你总结了14条改善jQuery代码的技巧。

1.测试并提升你的jQuery选择器水平

这个jQuery选择器实验室非常酷，它能在线免费使用，当然你也能下来到本地离线使用。这个测试页面包含复杂的html组合字段，然后你能尝试预定义使用各种jQuery选择器。如果这还不够你也可以自定义选择器。

2.测试jQuery包装集是否包含某些元素

如果你想测试一下某个jQuery包装集中是否包含某些元素，你首先可以尝试使用验证首个元素是否存在：

if($(selector)[0]){...} // 或者这样 if($(selector).length){...}

来看看这个例子：

//例子.如果你的页面有以下html代码 <ul> <li><input type="radio" value="Item-X" />Item X</li> <li><input type="radio" value="Item-Y" />Item Y</li> <li><input type="radio" value="Item-Z" />Item Z</li> </ul> <pre escaped="true" lang="">... //这个if条件将返回true，因为我们有两个 // input域匹配了选择器，所以<statement>代码将会执行 if($('#shopping_cart_items input.in_stock')[0]){<statement>} 3.从jquery.org读取jQuery最新版本

你可以使用这句代码读取jQuery的最新版本的代码文件。

<script src="http://code.jquery.com/jquery-latest.js"></script>

你可以使用这个方法来调用最近版本的jQuery框架，当然，你还可以使用下面这个代码从ajax.googleapis.com调用同样的最新版本jQuery：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script> 4.存储数据

使用data方法可以避免在DOM中存储数据，有些前端开发er喜欢使用HTML的属性来存储数据：

$('selector').attr('alt', 'data being stored'); //之后可以这样读取数据: $('selector').attr('alt');

使用”alt”属性来作为参数名存储数据其实对于HTML来说是不符合语义的，我们可以使用jQuery的data方法来为页面中的某个元素存储数据：

$('selector').data('参数名', '要存储的数据'); //之后这样取得数据: $('selector').data('参数');

这个data方法能让你自己明明数据的参数，更语义更灵活，你可以在页面上的任何元素存储数据信息。如果想了解更多关于data()和removeData()方法的介绍，可以看看jQuery官方讲解

这个方法的经典应用是给input域一个默认值，然后在聚焦的时候清空它:
HTML部分:

<form> <input type="text" value="Always cleared" /> <input type="text" value="Cleared only once" /> <input type="text" value="Normal text" /> </form>

JavaSript部分:

$(function() { //取出有clear类的input域 //(注: "clear once" 是两个class clear 和 once) $('#testform input.clear').each(function(){ //使用data方法存储数据 $(this).data( "txt", $.trim($(this).val()) ); }).focus(function(){ // 获得焦点时判断域内的值是否和默认值相同，如果相同则清空 if ( $.trim($(this).val()) === $(this).data("txt") ) { $(this).val(""); } }).blur(function(){ // 为有class clear的域添加blur时间来恢复默认值 // 但如果class是once则忽略 if ( $.trim($(this).val()) === "" && !$(this).hasClass("once") ) { //Restore saved data $(this).val( $(this).data("txt") ); } }); });

查看Demo

5.jQuery手册常备身边

大多数人都很难记住所有的编程细节，即使再好的程序员也会有对某个程序语言的疏忽大意，所以把相关的手册打印出来或随时放在桌面上进行查阅绝对是可以提高编程效率的。
oscarotero jquery 1.3(壁纸版)

6.在FireBug控制台记录jQuery

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

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

console.log("hello world")

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

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

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

jQuery.fn.log = function (msg) { console.log("%s: %o", msg, this); return this; };

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

$('#some_div').find('li.source > input:checkbox') .log("sources to uncheck") .removeAttr("checked"); 7.尽可能使用ID选择器

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

<div> <form method="post" action="http://www.xuebuyuan.com/"> <h2>Selectors in jQuery</h2> ... ... <input type="submit" value="Submit" /> </form> </div> //使用class来调用submit按钮要比使用绝对的ID选择器慢很多 var main_button = $('#main .button'); var main_button = $('#main_button'); 8.善于利用jQuery链