12.學會使用自定義選擇器
jQuery允許我們在css選擇器的基礎上定義自定義選擇器來讓我們的代碼更簡潔:
$.expr[':'].mycustomselector= function(element, index, meta, stack){ // element- DOM元素 // index - 堆棧中當前遍歷的索引值 // meta - 關于你的選擇器的數(shù)據(jù)元 // stack - 用于遍歷所有元素的堆棧 // 包含當前元素則返回true // 不包含當前元素則返回false }; // 自定義選擇器的應用: $('.someClasses:test').doSomething();
下面讓我們來看看一個小例子,我們通過使用自定義選擇器來鎖定含有”rel”屬性的元素集:
$.expr[':'].withRel = function(element){ var $this = $(element); //僅返回rel屬性不為空的元素 return ($this.attr('rel') != ''); }; $(document).ready(function(){ //自定義選擇器的使用很簡單,它和其他選擇器一樣,返回一個元素包裝集 //你可以為他使用格式方法,比如下面這樣修改它的css樣式 $('a:withRel').css('background-color', 'green'); });
<ul> <li> <a href="#">without rel</a> </li> <li> <a rel="somerel" 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>
13.預加載圖片
通常使用JavaScript來預加載圖片是個相當不錯的方法:
//定義預加載圖片列表的函數(shù)(有參數(shù)) jQuery.preloadImages = function(){ //遍歷圖片 for(var i = 0; i<arguments.length; i++){ jQuery("<img>").attr("src", arguments[i]); } } // 你可以這樣使用預加載函數(shù) $.preloadImages("images/logo.png", "images/logo-face.png", "images/mission.png");
14.將你的代碼測試完好
jQuery有一個名為QUnit單元測試框架。編寫測試很容易,它能讓您可以放心地修改您的代碼,并確保它仍然按預期工作。下面是如何工作的:
//將測試分成若干模塊. module("Module B"); test("some other test", function() { //指定多少個判斷語句需要加入測試中. expect(2); equals( true, false, "failing test" ); equals( true, true, "passing test" ); });
英文原文:More jQuery and General Javascript Tips to Improve Your Code 翻譯原文:了解更多jQuery技巧來提高你的代碼 (彬Go)
本文鏈接:http://www.95time.cn/tech/web/2009/7249.asp
出處:彬Go
責任編輯:bluehearts
上一頁 jQuery代碼的14條改善技巧 [4] 下一頁
◎進入論壇網(wǎng)頁制作、WEB標準化版塊參加討論,我還想發(fā)表評論。
|