Slide 1
Slide 1 text
Introduction to
Slide 2
Slide 2 text
What is jQuery?
Slide 3
Slide 3 text
jQuery
尋找元素
更改內容
監聽事件
製作動畫
網路溝通
Slide 4
Slide 4 text
DOM: Document Object Model
Slide 5
Slide 5 text
DOM: Document Object Model
但......
Slide 6
Slide 6 text
DOM: Document Object Model
• jQuery具有瀏覽器的兼容性，就不必為每個不同的瀏覽器撰寫不
同的寫法：
if( you are an IE user ){
......
}
else{
......
}
Slide 7
Slide 7 text
DOM: Document Object Model
jQuery大冒險
jQuery冒險團
歡迎一起使用jQuery吧！
document html head title jQuery大冒險 body h1 jQuery冒險團 p 歡迎一起使用jQuerySlide 8
Slide 8 text
jQuery
更改內容
監聽事件
製作動畫
網路溝通
尋找元素
Slide 9
Slide 9 text
Document
•尋找document:
jQuery(document)
- 可以簡寫成 $(document)
document
html
head
title
jQuery大冒險
body
h1
jQuery冒險團
p
歡迎一起使用jQuery
document
Slide 10
Slide 10 text
CSS Selector
document
html
head
title
jQuery大冒險
body
h1
jQuery冒險團
p
歡迎一起使用jQuery
h1 {
color: green;
}
p {
color: gray;
}
Slide 11
Slide 11 text
CSS Selector
•尋找h1元素
• $(“h1”)
document
html
head
title
jQuery大冒險
body
h1
jQuery冒險團
p
歡迎一起使用jQuery
h1
•尋找p元素
•$(“p”)
p
Slide 12
Slide 12 text
•$(’li’)
h2
勇者列表
ul
騎士
勇者列表
- 騎士
- 弓箭手
- 魔法師
Slide 13
Slide 13 text
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
Slide 14
Slide 14 text
• $(’.knight, .archer’)
• 可利用Traversing方法代替：
• $(‘.knight’).add(‘.archer’)
• $(‘.knight .archer’)
• 可利用Traversing方法代替：
• $(‘.knight’).find(‘.archer’)
• $(‘.knight > .archer’)
• 可利用Traversing方法代替：
$(‘.knight’).children(‘.archer’)
• $(‘.knight.archer’)
• 可利用Traversing方法代替：
• $(‘.knight’).filter(‘.archer’)
Slide 15
Slide 15 text
• $(’li:first’)
• 可利用Traversing方法代替：
• $(‘li’).first();
• $(‘li:last’)
• 可利用Traversing方法代替：
• $(‘li’).last();
h2
勇者列表
ul
騎士
li#knight
li
li
弓箭手
魔法師
body
Slide 16
Slide 16 text
Walking the DOM
• 往子節點走
.find(selector)
.children(selector)
• 往父節點走
.parent()
.parents(selector)
.closest(selector)
• 往兄弟姊妹節點走
.next()
.prev()
h2
勇者列表
ul
騎士
li#knight
li
li
弓箭手
魔法師
body
Slide 17
Slide 17 text
jQuery
尋找元素
監聽事件
製作動畫
網路溝通
更改內容
Slide 18
Slide 18 text
.text()
取得元素內文字內容
.text(string)
將元素內文字內容改為傳入的字串
.html()
取得元素內HTML內容
.html(string)
將元素內HTML內容改為傳入的字串
Slide 19
Slide 19 text
.val()
取得表單輸入元素內文字內容
.val(string)
將表單輸入元素內文字內容改為傳入的字串
Slide 20
Slide 20 text
.attr(attributeName)
取得元素內屬性之內容
.attr(attributeName, attributeValue)
將元素內屬性之內容改為傳入之值
Slide 21
Slide 21 text
HTML5: data
•
- ....
• data屬性
• 指的就是像是 data-名稱 這樣的屬性，可讓元素攜帶資料。
Slide 22
Slide 22 text
data
.data(Name)
取得元素內data-(Name)屬性之內容
.data(Name, Value)
將元素內data-(Name)屬性之內容改為傳入之值
Slide 23
Slide 23 text
Node
$(‘
Sonic
’) 創建一個p標籤，內含文字內容(Sonic) • 創建完後，這個Node還尚未丟入document內。Slide 24
Slide 24 text
Node document
• var sonic = $(‘
Sonic
’); • $(‘.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 騎士Slide 25
Slide 25 text
Node
.remove()
刪除該節點。
Slide 26
Slide 26 text
CSS
.css( propertyName )
取得該元素之css的該property值
.css( propertyName, propertyValue )
更改該元素之css之值
.css( object )
Ex. .css({‘background-color’:’blue’})
可更改該元素多個CSS的Property的值
Slide 27
Slide 27 text
CSS
.addClass(className)
增加該元素Class
.removeClass(ClassName)
刪除該元素Class
.toggleClass(ClassName)
增加或刪除該元素Class
.hasClass(ClassName)
回傳該元素是否具有某Class
Slide 28
Slide 28 text
jQuery
尋找元素
更改內容
製作動畫
網路溝通
監聽事件
Slide 29
Slide 29 text
Wait for DOM
• 等待瀏覽器完成好DOM
$(document).ready(callback);
通常使用jQuery都要先等瀏覽器完成好DOM，故記得每次都要加：
$(document).ready( function(){
......實際內容
});
Slide 30
Slide 30 text
Wait for DOM
• 由於很常用，所以可簡化成：
$(function(){
...實際內容
});
Slide 31
Slide 31 text
$().on( event, handler )
可在該元素觸發該event的時候，會呼叫handler(呼叫時會傳入
eventObject)。
通常可簡化為$().(handler)的形式
$().on(event, element2, handler)
掛事件handler於element1裡面的所有element2元素上。
若element2會是動態產生的Node時可方便使用。
相反地，要取消掉事件handler請使用.off(...)
Slide 32
Slide 32 text
$(function(){
$(‘button’).on(‘click’, function(event){
$(‘p’).text(“你居然真的點了按鈕！”);
});
});
不要點按鈕
你敢點你試試看Slide 33
Slide 33 text
Mouse Events
• click
• dblclick
• mousedown
• mouseenter
• mouseleave
• mouseup
• event.which可抓到按下去的鍵為何者。
Slide 34
Slide 34 text
Keyboard Events
• keydown
• keypress
• keyup
• event.which可抓到按下去的鍵為何者。
Slide 35
Slide 35 text
Form Events
• blur
• change
• focus
• select
• submit
Slide 36
Slide 36 text
event Object
• which
• 可抓到按下去的鍵盤或滑鼠的鍵為何。
• preventDefault()
• 可預防發生原本事件該做的事情
• stopPropagation()
• 停止事件繼續Bubble up傳到上層的節點去。
Slide 37
Slide 37 text
......
$(function(){
$(‘button’).on(‘click’, function(event){
$(?).text(“你居然真的點了我！”);
});
});
Question: 如何正確選到被點擊的button?
你敢點你試試看
你敢點你試試看
Slide 38
Slide 38 text
......
$(function(){
$(‘button’).on(‘click’, function(event){
$(this).text(“你居然真的點了我！”);
});
});
你敢點你試試看
你敢點你試試看
Slide 39
Slide 39 text
jQuery
尋找元素
更改內容
監聽事件
網路溝通
製作動畫
Slide 40
Slide 40 text
CSS:
• display: none;
• 在jQuery裡可用 $().hide()
• display: block;
• 把該element元素變為顯示成block元素。
• 可用於顯示東西出來。
• 在jQuery裡可用 $().show()
• 在jQuery想display成不同的樣子，請用.css
Slide 41
Slide 41 text
.slideUp([duration], [callback]);
關閉滑動，完成後會呼叫callback
.slideDown([duration], [callback]);
開啟滑動，完成後會呼叫callback
.slideToggle([duration], [callback]); //BJ4
預設duration為400毫秒
設定成“fast”為200毫秒
設定成”slow”為600毫秒
Slide 42
Slide 42 text
.fadeIn([duration], [callback]);
淡入，完成後會呼叫callback
.fadeOut([duration], [callback]);
淡出，完成後會呼叫callback
.fadeToggle([duration], [callback]); //BJ4
預設duration為400毫秒
設定成“fast”為200毫秒
設定成”slow”為600毫秒
Slide 43
Slide 43 text
.animate(css樣式(object), [duration], [easing], [callback])
會從目前css樣式利用duration的時間變成目的樣式
可搭配addClass, removeClass, toggleClass以及 CSS3
來做，速度會較快。
預設duration為400毫秒
設定成“fast”為200毫秒
設定成”slow”為600毫秒
Slide 44
Slide 44 text
jQuery
尋找元素
更改內容
監聽事件
製作動畫
網路溝通
Slide 45
Slide 45 text
AJAX: Asynchronous JavaScript and XML
• 此可以讓javascript與後端進行非同步溝通，可以在不換頁的
情形下得到資料並更新於目前的頁面。
• 一方面也可以讓原本不能讀取資料的javascript可以讀取後端
資料。
Slide 46
Slide 46 text
... (
• 就看看能不能透過幾個範例來了解吧！
• 先讓我們看看API
Slide 47
Slide 47 text
$().load(url, [data],
[complete(responseText, textStatus,
XMLHttpRequest)]);
純粹讀取資料：
$(‘p’).load(‘text/a.txt’);
把text/a.txt的檔案內容寫在p標籤內
Slide 48
Slide 48 text
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’];
Slide 49
Slide 49 text
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’];
Slide 50
Slide 50 text
Script JSON
• $.getScript( url, [ success(script, textStatus,
jqXHR) ] )
• 可動態載入Script
• $.getJSON( url, [ data ], [ success( data,
textStatus, jqXHR ) ] )
• 資料若是JSON格式，則可直接指定JSON，並且傳回來的data會直接成
為Javascript Object來使用。
Slide 51
Slide 51 text
...
Live Demo
Slide 52
Slide 52 text
-製作一個小方塊，可以利用鍵盤移動上下左右(動畫)
-滑鼠移上去時，小方塊樣式會改變，並且會顯示用AJAX讀取之內
容；離開時會換回原本的樣式，並且裡面的文字會消失不見(動
畫)。
Slide 53
Slide 53 text
• jQuery官方：
• http://jquery.com/
• jQuery Cheat Sheet：
• http://oscarotero.com/jquery/
Slide 54
Slide 54 text
No content