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
78
洞察,開啟創新
acowang
0
45
如何把使用者經驗「做」出來
acowang
0
260
Other Decks in Programming
See All in Programming
What's new in AppKit on macOS 26
1024jp
0
170
CIを整備してメンテナンスを生成AIに任せる
hazumirr
0
190
11年かかって やっとVibe Codingに 時代が追いつきましたね
yimajo
0
150
TypeScriptでDXを上げろ! Hono編
yusukebe
3
860
SwiftでMCPサーバーを作ろう!
giginet
PRO
2
190
PHPカンファレンス関西2025 基調講演
sugimotokei
5
930
MySQL9でベクトルカラム登場!PHP×AWSでのAI/類似検索はこう変わる
suguruooki
1
220
SQLアンチパターン第2版 データベースプログラミングで陥りがちな失敗とその対策 / Intro to SQL Antipatterns 2nd
twada
PRO
26
8k
テスターからテストエンジニアへ ~新米テストエンジニアが歩んだ9ヶ月振り返り~
non0113
2
240
Claude Code + Container Use と Cursor で作る ローカル並列開発環境のススメ / ccc local dev
kaelaela
12
7.4k
バイブスあるコーディングで ~PHP~ 便利ツールをつくるプラクティス
uzulla
1
260
中級グラフィックス入門~効率的なメッシュレット描画~
projectasura
2
1.2k
Featured
See All Featured
Speed Design
sergeychernyshev
32
1k
RailsConf 2023
tenderlove
30
1.2k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.6k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
54k
Code Review Best Practice
trishagee
69
19k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.4k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
Documentation Writing (for coders)
carmenintech
72
4.9k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Practical Orchestrator
shlominoach
189
11k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
109
19k
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