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

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

Transcript

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