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
Maplewing
November 11, 2013
Programming
0
2k
資訊實務應用讀書會 第七堂課:jQuery
資訊實務應用讀書會 第七堂課:jQuery
Maplewing
November 11, 2013
Tweet
Share
More Decks by Maplewing
See All by Maplewing
師大資工系ACM-ICPC讀書會:肆、鏈結串列與二元樹
sinmaplewing
0
120
師大資工系ACM-ICPC讀書會:參、堆疊與佇列
sinmaplewing
0
200
師大資工系ACM-ICPC讀書會:貳、排序搜尋與數學基礎
sinmaplewing
0
170
資訊實務應用讀書會 第六堂課:Basic CSS
sinmaplewing
0
1.7k
師大資工系ACM-ICPC讀書會:壹、字串處理與大數運算
sinmaplewing
0
130
師大資工系ACM-ICPC讀書會:零、比賽介紹、解題系統介紹
sinmaplewing
0
190
資訊實務應用讀書會 第四堂課(支線):Linux
sinmaplewing
0
1.8k
資訊實務應用讀書會 第一堂課:Basic HTML
sinmaplewing
1
2.1k
Other Decks in Programming
See All in Programming
すべてのコンテキストを、 ユーザー価値に変える
applism118
3
1.3k
Azure AI Foundryではじめてのマルチエージェントワークフロー
seosoft
0
170
PicoRuby on Rails
makicamel
2
130
Is Xcode slowly dying out in 2025?
uetyo
1
270
たった 1 枚の PHP ファイルで実装する MCP サーバ / MCP Server with Vanilla PHP
okashoi
1
250
10 Costly Database Performance Mistakes (And How To Fix Them)
andyatkinson
0
330
What Spring Developers Should Know About Jakarta EE
ivargrimstad
0
470
#kanrk08 / 公開版 PicoRubyとマイコンでの自作トレーニング計測装置を用いたワークアウトの理想と現実
bash0c7
1
770
Porting a visionOS App to Android XR
akkeylab
0
460
イベントストーミング図からコードへの変換手順 / Procedure for Converting Event Storming Diagrams to Code
nrslib
2
800
「Cursor/Devin全社導入の理想と現実」のその後
saitoryc
0
820
AIプログラマーDevinは PHPerの夢を見るか?
shinyasaita
1
220
Featured
See All Featured
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
How to train your dragon (web standard)
notwaldorf
95
6.1k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.4k
A Modern Web Designer's Workflow
chriscoyier
695
190k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
950
Done Done
chrislema
184
16k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
Transcript
Introduction to
What is jQuery?
jQuery 尋找元素 更改內容 監聽事件 製作動畫 網路溝通
DOM: Document Object Model
DOM: Document Object Model 但......
DOM: Document Object Model • jQuery具有瀏覽器的兼容性,就不必為每個不同的瀏覽器撰寫不 同的寫法: if( you are
an IE user ){ ...... } else{ ...... }
DOM: Document Object Model <!DOCTYPE html> <html> <head> <title>jQuery大冒險</title> </head>
<body> <h1>jQuery冒險團</h1> <p>歡迎一起使用jQuery吧!</p> </body> </html> document html head title jQuery大冒險 body h1 jQuery冒險團 p 歡迎一起使用jQuery
jQuery 更改內容 監聽事件 製作動畫 網路溝通 尋找元素
Document •尋找document: jQuery(document) - 可以簡寫成 $(document) document html head title
jQuery大冒險 body h1 jQuery冒險團 p 歡迎一起使用jQuery document
CSS Selector document html head title jQuery大冒險 body h1 jQuery冒險團
p 歡迎一起使用jQuery h1 { color: green; } p { color: gray; }
CSS Selector •尋找h1元素 • $(“h1”) document html head title jQuery大冒險
body h1 jQuery冒險團 p 歡迎一起使用jQuery h1 •尋找p元素 •$(“p”) p
•$(’li’) h2 勇者列表 ul 騎士 <h2>勇者列表</h2> <ul> <li>騎士</li> <li>弓箭手</li> <li>魔法師</li>
</ul> li li li 弓箭手 魔法師 body
Question: How to select the “Knight”? •Answer: •$(‘#knight’) •$(‘li#knight’) •$(‘ul
:first’) •$(‘ul li:first’) •$(‘ul li:first-child’) h2 勇者列表 ul 騎士 li#knight li li 弓箭手 魔法師 body
• $(’.knight, .archer’) • 可利用Traversing方法代替: • $(‘.knight’).add(‘.archer’) • $(‘.knight .archer’)
• 可利用Traversing方法代替: • $(‘.knight’).find(‘.archer’) • $(‘.knight > .archer’) • 可利用Traversing方法代替: $(‘.knight’).children(‘.archer’) • $(‘.knight.archer’) • 可利用Traversing方法代替: • $(‘.knight’).filter(‘.archer’)
• $(’li:first’) • 可利用Traversing方法代替: • $(‘li’).first(); • $(‘li:last’) • 可利用Traversing方法代替:
• $(‘li’).last(); h2 勇者列表 ul 騎士 li#knight li li 弓箭手 魔法師 body
Walking the DOM • 往子節點走 .find(selector) .children(selector) • 往父節點走 .parent()
.parents(selector) .closest(selector) • 往兄弟姊妹節點走 .next() .prev() h2 勇者列表 ul 騎士 li#knight li li 弓箭手 魔法師 body
jQuery 尋找元素 監聽事件 製作動畫 網路溝通 更改內容
.text() 取得元素內文字內容 .text(string) 將元素內文字內容改為傳入的字串 .html() 取得元素內HTML內容 .html(string) 將元素內HTML內容改為傳入的字串
.val() 取得表單輸入元素內文字內容 .val(string) 將表單輸入元素內文字內容改為傳入的字串
.attr(attributeName) 取得元素內屬性之內容 .attr(attributeName, attributeValue) 將元素內屬性之內容改為傳入之值
HTML5: data • <ul data-price=“200”> .... • data屬性 • 指的就是像是
data-名稱 這樣的屬性,可讓元素攜帶資料。
data .data(Name) 取得元素內data-(Name)屬性之內容 .data(Name, Value) 將元素內data-(Name)屬性之內容改為傳入之值
Node $(‘<p>Sonic</p>’) 創建一個p標籤,內含文字內容(Sonic) • 創建完後,這個Node還尚未丟入document內。
Node document • var sonic = $(‘<p>Sonic</p>’); • $(‘.knight’).append(sonic); •
讓sonic節點成為.knight內最後一個兒子 • sonic.appendTo($(‘.knight’)); • $(‘.knight’).prepend(sonic); • 讓sonic節點成為.knight內第一個兒子 • sonic.prependTo($(‘.knight’)); • $(‘.knight’).after(sonic); • 讓sonic節點成為.knight的弟妹 • sonic.insertAfter($(‘.knight’)); • $(‘.knight’).before(sonic); • 讓sonic節點成為.knight的兄姊 • sonic.insertBefor($(‘.knight’)); h2 勇者列表 p.knight body before after prepend before append 騎士
Node .remove() 刪除該節點。
CSS .css( propertyName ) 取得該元素之css的該property值 .css( propertyName, propertyValue ) 更改該元素之css之值
.css( object ) Ex. .css({‘background-color’:’blue’}) 可更改該元素多個CSS的Property的值
CSS .addClass(className) 增加該元素Class .removeClass(ClassName) 刪除該元素Class .toggleClass(ClassName) 增加或刪除該元素Class .hasClass(ClassName) 回傳該元素是否具有某Class
jQuery 尋找元素 更改內容 製作動畫 網路溝通 監聽事件
Wait for DOM • 等待瀏覽器完成好DOM $(document).ready(callback); 通常使用jQuery都要先等瀏覽器完成好DOM,故記得每次都要加: $(document).ready( function(){ ......實際內容
});
Wait for DOM • 由於很常用,所以可簡化成: $(function(){ ...實際內容 });
$(<element>).on( event, handler ) 可在該元素觸發該event的時候,會呼叫handler(呼叫時會傳入 eventObject)。 通常可簡化為$(<element>).<event>(handler)的形式 $(<element1>).on(event, element2, handler)
掛事件handler於element1裡面的所有element2元素上。 若element2會是動態產生的Node時可方便使用。 相反地,要取消掉事件handler請使用.off(...)
$(function(){ $(‘button’).on(‘click’, function(event){ $(‘p’).text(“你居然真的點了按鈕!”); }); }); <p>不要點按鈕</p> <button>你敢點你試試看</button>
Mouse Events • click • dblclick • mousedown • mouseenter
• mouseleave • mouseup • event.which可抓到按下去的鍵為何者。
Keyboard Events • keydown • keypress • keyup • event.which可抓到按下去的鍵為何者。
Form Events • blur • change • focus • select
• submit
event Object • which • 可抓到按下去的鍵盤或滑鼠的鍵為何。 • preventDefault() • 可預防發生原本事件該做的事情
• stopPropagation() • 停止事件繼續Bubble up傳到上層的節點去。
...... $(function(){ $(‘button’).on(‘click’, function(event){ $(?).text(“你居然真的點了我!”); }); }); Question: 如何正確選到被點擊的button? <button>你敢點你試試看</button>
<button>你敢點你試試看</button>
...... $(function(){ $(‘button’).on(‘click’, function(event){ $(this).text(“你居然真的點了我!”); }); }); <button>你敢點你試試看</button> <button>你敢點你試試看</button>
jQuery 尋找元素 更改內容 監聽事件 網路溝通 製作動畫
CSS: • display: none; • 在jQuery裡可用 $(<element>).hide() • display: block;
• 把該element元素變為顯示成block元素。 • 可用於顯示東西出來。 • 在jQuery裡可用 $(<element>).show() • 在jQuery想display成不同的樣子,請用.css
.slideUp([duration], [callback]); 關閉滑動,完成後會呼叫callback .slideDown([duration], [callback]); 開啟滑動,完成後會呼叫callback .slideToggle([duration], [callback]); //BJ4 預設duration為400毫秒
設定成“fast”為200毫秒 設定成”slow”為600毫秒
.fadeIn([duration], [callback]); 淡入,完成後會呼叫callback .fadeOut([duration], [callback]); 淡出,完成後會呼叫callback .fadeToggle([duration], [callback]); //BJ4 預設duration為400毫秒
設定成“fast”為200毫秒 設定成”slow”為600毫秒
.animate(css樣式(object), [duration], [easing], [callback]) 會從目前css樣式利用duration的時間變成目的樣式 可搭配addClass, removeClass, toggleClass以及 CSS3 來做,速度會較快。
預設duration為400毫秒 設定成“fast”為200毫秒 設定成”slow”為600毫秒
jQuery 尋找元素 更改內容 監聽事件 製作動畫 網路溝通
AJAX: Asynchronous JavaScript and XML • 此可以讓javascript與後端進行非同步溝通,可以在不換頁的 情形下得到資料並更新於目前的頁面。 • 一方面也可以讓原本不能讀取資料的javascript可以讀取後端
資料。
... ( • 就看看能不能透過幾個範例來了解吧! • 先讓我們看看API
$(<element>).load(url, [data], [complete(responseText, textStatus, XMLHttpRequest)]); 純粹讀取資料: $(‘p’).load(‘text/a.txt’); 把text/a.txt的檔案內容寫在p標籤內
Http GET Request $.get(url, [data], [success(data, textStatus, XHR)], [dataType]); -利用GET方法,傳送給PHP自己的名稱,回傳”Hello,
名 稱”的字串顯示在p標籤上 $.get(‘hello.php’, {name: “Maplewing”}, function(data){ $(‘p’).text(data); }); echo “Hello, ” . $_GET[‘name’];
Http POST Request $.post (url, [data], [success(data, textStatus, XHR)], [dataType]);
-利用POST方法,傳送給PHP自己的名稱,回傳”Hello, 名稱”的字串顯示在p標籤上 $.post(‘hello.php’, {name: “Maplewing”}, function(data){ $(‘p’).text(data); }); echo “Hello, ” . $_POST[‘name’];
Script JSON • $.getScript( url, [ success(script, textStatus, jqXHR) ]
) • 可動態載入Script • $.getJSON( url, [ data ], [ success( data, textStatus, jqXHR ) ] ) • 資料若是JSON格式,則可直接指定JSON,並且傳回來的data會直接成 為Javascript Object來使用。
... Live Demo
-製作一個小方塊,可以利用鍵盤移動上下左右(動畫) -滑鼠移上去時,小方塊樣式會改變,並且會顯示用AJAX讀取之內 容;離開時會換回原本的樣式,並且裡面的文字會消失不見(動 畫)。
• jQuery官方: • http://jquery.com/ • jQuery Cheat Sheet: • http://oscarotero.com/jquery/
None