使用 jQuery 的小技巧 aco 2012-06-11 

Selectors 

儘量使用 ID Selector • jQuery中最快的 Selector 是 ID Selector – $(‟#someId‟) • 因為和 JavaScript 的原生函數 getElementById() 對應 • 從 ID Selector 開始繼承 – $(„#traffic_light input‟);

• 紅色
• 黃色
• 綠色



Tag Selector 和 Class Selector • 第二快的選擇器是 Tag Seletor – $(‟head‟) • 因為和 JavaScript 的 getElementsByTagName() 對應 • 使用 Class Selector 搭配 Tag – $(„head.someClass‟) – $('div#someId‟) • 使用屬性選擇器，也可以使用 Tag 來修飾 – $('div[align=“left”]‟) 

使用相關的子查詢 • 使用 children(), find(), filter() 等來進行子查詢 – $(„p‟).filter(„.highlight‟); • 使用子查詢相對較快速，ex: $parent.find(children)，其 中的 $parent 已被 cache 住 • 使用 find() 取代 context $('.testdiv', '#pageBody'); $('#pageBody').find('.testdiv'); 

DOM 

使用變數暫存 Select 後的 Object • 可以減少對 DOM 的尋訪 for (i = 0; i < 1000; i++) { $('.myList‟).append('This is list item' + i); } var myList = $('.myList'); for (i = 0; i < 1000; i++) { myList.append('This is list item' + i); } 

減少對 DOM 直接的操作 • 直接的DOM操作速度相對較慢 var myList = $('#myList'); for (i=0; i<1000; i++){ myList.append('This is list item ' + i); } var myList = $('.myList'), myListItems = ''; for (i=0; i<1000; i++) { myListItems += '

This is list item ' + i + '

'; } myList.html(myListItems); 

適當的使用鏈接 (Chaining) • 可以減少對 DOM Tree 的尋訪和程式碼的數量 var div = $(„div‟), tempDiv; tempDiv = div.filter(„:first‟); tempDiv.css(„css‟, „red‟); tempDiv.attr(„name‟, „hello‟); $(„div‟).filter(„:first‟) .css(„color‟, „red‟) .attr(„name‟, „hello‟); 

ready 與 load • $(document).ready 可以在 DOM 載入完成後再執行，但 如果要在完全載入完成後再執行的話，可使用 $(window).load $(document).ready(function (){ // your code }); $(function (){ // your code }); 

this v.s $(this) 

this • this，取得當前的元素 $('#textbox').hover( function() { this.title = 'Test'; } } 

$(this) • $(this)，當前元素被 jQuery 處理的對象 $('#textbox').hover( function() { $(this).attr('title', 'Test'); } } 

this v.s $(this) • 一般來說，在程式碼中盡量使用 $(this) ，可以讓程式碼 更有規範，在 jQuery 的函數也就可以直接使用，ex: $(this).children() • $this = $(this); 

Others 

將程式碼寫成 jQuery Plugin • 如果要花一定得時間去開發一段 jQuery 程式碼，可以考慮將相 關的程式碼變成 Plugin • 能夠重用(Reuse)程式碼，並且能夠有效的組織程式碼 $(function(){ $.fn.yourPluginName = function(){ // Your code }; }); 

處理相鄰元素 $('#nav li').click(function(){ $('#nav li').removeClass('active'); $(this).addClass('active'); }); $('#nav li').click(function(){ $(this).addClass('active') .siblings() .removeClass('active'); }); 

在 .css() 中傳入 Map $('button').on('click', function(){ box.css('font-size', '+=5') .css('color', 'white'); }); $('button').on('click', function(){ box.css({ 'fontSize': '+=5', 'color': 'white' }); }); 

JavaScript 原生函數相對較快 • for v.s each • createElement(„div‟) v.s $() • this.id v.s $(this).attr('id') 

判斷頁面是否太過複雜 • console.log( $('*').length ); • 返回的數值越小，表示網頁載入的速度越快，假如數值愈 大，可以考慮刪除無用或多餘的元素來優化程式碼 

考慮未支援 JavaScript 的網頁 • 透過增加 Class 的方式將相關的元素隱藏或顯示 /* In JS */ $('.somthing').addClass(‟hideSomething'); /* In CSS */ .hideSomething {display:none;} 

Thank You