Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
使用 jQuery 的小技巧
Search
aco wang
June 15, 2012
Programming
0
130
使用 jQuery 的小技巧
2012-06-11
aco wang
June 15, 2012
Tweet
Share
More Decks by aco wang
See All by aco wang
Rich Snippets
acowang
0
55
SEO 入門
acowang
0
50
網頁介面設計模式 - 送出邀約
acowang
1
320
Experience
acowang
0
79
洞察,開啟創新
acowang
0
46
如何把使用者經驗「做」出來
acowang
0
260
Other Decks in Programming
See All in Programming
Back to the Future: Let me tell you about the ACP protocol
terhechte
0
130
止められない医療アプリ、そっと Swift 6 へ
medley
1
120
実践AIチャットボットUI実装入門
syumai
7
2.5k
あなたの知らない「動画広告」の世界 - iOSDC Japan 2025
ukitaka
0
390
アメ車でサンノゼを走ってきたよ!
s_shimotori
0
140
Web Components で実現する Hotwire とフロントエンドフレームワークの橋渡し / Bridging with Web Components
da1chi
3
1.8k
AI Coding Meetup #3 - 導入セッション / ai-coding-meetup-3
izumin5210
0
590
CSC305 Lecture 01
javiergs
PRO
1
400
After go func(): Goroutines Through a Beginner’s Eye
97vaibhav
0
230
uniqueパッケージの内部実装を支えるweak pointerの話
magavel
0
920
『毎日の移動』を支えるGoバックエンド内製開発
yutautsugi
2
180
株式会社 Sun terras カンパニーデック
sunterras
0
230
Featured
See All Featured
Typedesign – Prime Four
hannesfritz
42
2.8k
Bash Introduction
62gerente
615
210k
Building Adaptive Systems
keathley
43
2.8k
Intergalactic Javascript Robots from Outer Space
tanoku
273
27k
Making Projects Easy
brettharned
119
6.4k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
9
960
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
The World Runs on Bad Software
bkeepers
PRO
71
11k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
19
1.2k
Gamification - CAS2011
davidbonilla
81
5.5k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
Transcript
使用 jQuery 的小技巧 aco 2012-06-11
Selectors
儘量使用 ID Selector • jQuery中最快的 Selector 是 ID Selector –
$(‟#someId‟) • 因為和 JavaScript 的原生函數 getElementById() 對應 • 從 ID Selector 開始繼承 – $(„#traffic_light input‟); <ul id=”traffic_light”> <li><input type=”radio” name=”light” value=”red” /> 紅色</li> <li><input type=”radio” name=”light” value=”yellow” /> 黃色</li> <li><input type=”radio” name=”light” value=”green” /> 綠色</li> </ul>
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 += '<li>This is list item ' + i + '</li>'; } 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 $(<div></div>)
• this.id v.s $(this).attr('id')
判斷頁面是否太過複雜 • console.log( $('*').length ); • 返回的數值越小,表示網頁載入的速度越快,假如數值愈 大,可以考慮刪除無用或多餘的元素來優化程式碼
考慮未支援 JavaScript 的網頁 • 透過增加 Class 的方式將相關的元素隱藏或顯示 /* In JS
*/ $('.somthing').addClass(‟hideSomething'); /* In CSS */ .hideSomething {display:none;}
Thank You