14条改善jQuery代码的技巧
<p><a href="http://paranimage.com/tag/jquery/">jquery</a>
简单易学，但如果你想写出更漂亮更简洁高效的代码，总需要一些技巧。本文就为你总结了<strong>14条改善jQuery代码的技巧</strong>
。</p>
<h3>1.测试并提升你的jQuery选择器水平</h3>
<p>这个<a href="http://codylindley.com/jqueryselectors/" target="_blank">jQuery选择器实验室</a>
非常酷，它能在线免费使用，当然你也能下来到本地离线使用。这个测试页面包含复杂的<a href="http://paranimage.com/category/dede/html/">html</a>
组合字段，然后你能尝试预定义使用各种jQuery选择器。如果这还不够你也可以自定义选择器。<br><img title="jquery-tips-01-500x280" src="http://paranimage.com/wp-content/uploads/2009/11/jquery-tips-01-500x280.jpg" alt="14条改进jQuery代码的技巧" width="500" height="280"></p>
<h3>2.测试jQuery包装集是否包含某些元素</h3>
<p>如果你想测试一下某个jQuery包装集中是否包含某些元素，你首先可以尝试使用验证首个元素是否存在：</p>
<pre><code name="item" type="radio" value="Item-X" />Item X</li>
<li><input name="item" type="radio" value="Item-Y" />Item Y</li>
<li><input name="item" type="radio" value="Item-Z" />Item Z</li>
</ul>
<pre escaped="true" lang="<a href="http://paranimage.com/category/dede/javascript/">javascript</a>
">...
//这个if条件将返回true，因为我们有两个
// input域匹配了选择器，所以<statement>代码将会执行
if($('#shopping_cart_items input.in_stock')[0]){<statement>}
</code>
</pre>
<h3>3.从jquery.org读取jQuery最新版本</h3>
<p>你可以使用这句代码读取jQuery的最新版本的代码文件。</p>
<pre><code target="_blank">jQuery官方讲解</a>
</p>
<p>这个方法的经典应用是给input域一个默认值，然后在聚焦的时候清空它:<br>
HTML部分:</p>
<pre><code value="Always cleared" />
<input type="text" value="Cleared only once" />
<input type="text" value="Normal text" />
</form>
</code>
</pre>
<p>JavaSript部分:</p>
<pre><code 是两个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") );
}
});
});
</code>
</pre>
<p><a href="http://www.tripwiremagazine.com/wp-content/uploads/images/stories/Articles/jquery-tips/demo.html" target="_blank">查看Demo</a>
</p>
<h3>5.jQuery手册常备身边</h3>
<p>大多数人都很难记住所有的编程细节，即使再好的程序员也会有对某个程序语言的疏忽大意，所以把相关的手册打印出来或随时放在桌面上进行查阅绝对是可以提高编程效率的。<br><a href="http://oscarotero.com/jquery/" target="_blank">oscarotero jquery 1.3</a>
(<a href="http://www.gmtaz.com/index.php/jquery-13-cheatsheet-wallpaper/" target="_blank">壁纸版</a>
)</p>
<p><img title="oscarotero" src="http://paranimage.com/wp-content/uploads/2009/11/oscarotero.jpg" alt="14条改进jQuery代码的技巧" width="471" height="348"></p>
<h3>6.在FireBug控制台记录jQuery</h3>
<p>FireBug是我最喜欢用的一个浏览器扩展工具之一，这个工具可以让你快速的在可视化界面中了解当前页面的HTML+<a href="http://paranimage.com/category/dede/css/">CSS</a>
+JavaScript，并在该工具下完成即时开发。作为jQuery或JavaScript开发人员，<a href="http://paranimage.com/category/apps/firefox/">firefox</a>
对于<a href="http://www.getfirebug.com/logging.html" target="_blank">记录你的JavaScript代码</a>
也得到支持。</p>
<p>写入FireBug控制台的最简单方式如下:</p>
<pre><code title="fire-500x200" src="http://paranimage.com/wp-content/uploads/2009/11/fire-500x200.jpg" alt="14条改进jQuery代码的技巧" width="500" height="200"></code>
</pre>
<p>你也可以按照你希望的方式写一些参数：</p>
<pre><code action="/">
<h2>Selectors in jQuery</h2>
...
...
<input id="main_button" type="submit" value="Submit" />
</form>
</div>
</code>
</pre>
<pre><code name="description" value="" /></li>
</code>
</pre>
<pre><code target="_blank">点击这里</a>
预览这个例子.</p>
<pre><code });
//#sliding 现在将渐隐并在完成动作之后开启渐显效果
//slideup once it completes
$('#sliding').slideDown('slow', function(){
$('#sliding').slideUp('slow', function(){
//渐显效果完成后将会改变按钮的CSS属性
$('div.button').css({ borderStyle:"outset", cursor:"auto" });
});
});
});
});
</code>
</pre>
<h3>12.学会使用自定义选择器</h3>
<p>jQuery允许我们在css选择器的基础上定义自定义选择器来让我们的代码更简洁:</p>
<pre><code href="#">with rel</a>
</li>
<li>
<a rel="" href="#">without rel</a>
</li>
<li>
<a rel="nofollow" href="#">a link with rel</a>
</li>
</ul>
</code>
</pre>
<h3>13.预加载图片</h3>
<p>通常使用JavaScript来预加载图片是个相当不错的方法:</p>
<pre><code );
equals( true, true, "passing test" );
});
</code>
</pre>
<p>英文原文:<a title="More jQuery and General Javascript Tips to Improve Your Code" href="http://www.tripwiremagazine.com/ajax/developer-toolbox/more-jquery-and-general-javascript-tips-to-improve-your-code.html" target="_blank">More jQuery and General Javascript Tips to Improve Your Code</a>
<br>
中文译文:<a title="了解更多jQuery技巧来提高你的代码" href="http://blog.bingo929.com/jquery-javascript-tips-to-improve-code.html">了解更多jQuery技巧来提高你的代码/彬GO</a>
</p>
<p>来源于 <a title="14条改善jQuery代码的技巧" rel="bookmark" href="http://paranimage.com/14-tips-to-improve-jquery-code/">14条改善jQuery代码的技巧 | 帕兰映像</a>
</p>
<p href="http://paranimage.com/tag/javascript/">JavaScript</a>
, <a rel="tag" href="http://paranimage.com/tag/jquery/">jquery<br></a>
</p>
<p><ins style="display: inline-table; border: none; height: 280px; margin: 0; padding: 0; width: 336px;"><ins id="aswift_0_anchor" style="display: block; border: none; height: 280px; margin: 0; padding: 0; width: 336px;">作者：帕克<br></ins>
</ins>
<span style="padding: 0pt 0pt 10px;"><a title="由 帕兰 发布" rel="author" href="http://paranimage.com/author/admin/"></a>
</span>
</p>
<div class="post-meta">
</div>