資訊實務應用讀書會第七堂課：jQuery

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/

資訊實務應用讀書會 第七堂課：jQuery

資訊實務應用讀書會 第七堂課：jQuery

More Decks by Maplewing

Other Decks in Programming

Featured

Transcript

資訊實務應用讀書會第七堂課：jQuery

資訊實務應用讀書會第七堂課：jQuery