08 - js frontend & jQuery - OpenWebSchool

Transcript

1. 網頁前端 & jQuery
2. 目前瀏覽器裡跑的是 JS
3. 修改網頁內容 從外部擷取資料 甚至存取 Webcam ... 可以做很多很多事情
4. 但 JS 語言規範本身沒有輸入輸出
6. DOM Document Object Model
7. 瀏覽器塞了一些野生的物件
8. 所有的輸入輸出 都可以由這些野生的變數操作
9. console.log(‘hello’)
10. 其中主要負責網頁內容的是
11. document
12. 網頁上的東西 都和 document 的內容有對應關係
13. 只要這物件有東西被修改 網頁也會隨之改變，反之亦然
14. 困境
15. 但是 DOM 這套 API 設計的實在太醜太難用了
16. document.getElementById
17. 而且每套瀏覽器 實作的 API 都不盡相同 就是你，IE
18. 使得網頁前端開發的 難度與維護成本大增
19. 曙光
20. John Resig
21. 2006 年釋出 jQuery 第一個版本
22. jQuery
23. 前端 JS 函式庫
24. 讓 DOM 操作輕鬆了許多 造福千千萬萬網頁前端開發者
25. jQuery 功能 & 特色
26. 事件處理 特效 & 動畫 Ajax 跨瀏覽器 CSS 選擇器 DOM 遍歷
27. 使用方法
28. 去 jQuery 官網下載
29. <script src=”jquery.js”></script> <script src=”your-code.js”></script>
30. jQuery 會在全域塞入野生的物件 jQuery 或 $
31. 將原本 DOM 物件傳入 $ 函式 就可以得到 jQuery 物件
32. 選擇器
33. CSS 怎麼選就怎麼選
34. $(‘p’); $(‘#id’); $(‘.class’); $(‘p#id’); $(‘p a’);
35. 操作 HTML 屬性
36. $(‘#a’).text(); // 取得 #a 文字 $(‘#a’).text(‘hello’); // 將 #a 文字設為 hello
37. $(‘#a’).attr(‘src’); // 取得 #a 的 src 屬性 $(‘#a’).attr(‘src’, ‘ha’); // 將 #a 的 src 設為 ha
38. $(‘#a’).addClass(‘banana’); // 新增 banana class $(‘#a’).removeClass(‘banana’); // 移除 banana class $(‘#a’).hasClass(‘banana’); // 判斷 #a 是否有 banana 這個 class
39. $(‘#a’).html(); // 取得 #a 底下所有 html $(‘#a’).html(‘<p>haha</p>’); // 設定 #a 底下所有 html $(‘input#a’).val(); // 取得 #a 輸入的數值 $(‘input#a’).val(100); // 設定 #a 輸入的數值
40. 事件處理
41. 所有的輸入都是事件
42. 監聽並且設置 callcack 函數 等事件觸發時做出響應
43. $(‘#a’).click(function () { console.log(‘#a clicked!’) }); // 當 #a 被點擊時即觸發綁定之 callback $(‘#a’).click(); // 主動觸發 #a 點擊事件
44. 雙擊 滑鼠移上去 滑鼠移進去 壓下按鍵 滾動 大小改變 表單聚焦 表單送出 dblckick hover mousein keydown scroll resize focus submit
45. $(‘#a’).click( callback ); $(‘#a’).on(‘click’, callback ); // 其實 click 等等方法都是 on 的簡寫 // on(事件名稱, callback) 全部通吃 $(‘#a’).off(‘click’, callback ); // 取消監聽 click 事件 $(‘#a’).one(‘click’, callback ); // 只監聽第一次 click 事件 $(‘#a’).trigger(‘click’); // 主動觸發 click 事件
46. $(document).ready(function () { console.log(‘ready to go!’); }); // 事件：DOM 載入完成 // 在 DOM 載完之前對 DOM 作操作可能會爆炸 // 所以等載完後再來做事情 // 做為程式初始化的起點，有點像 C 的 main $(function () { console.log(‘ready to go!’); }); // 因為每次都會用到，所以能簡寫成這樣
47. 事件輸入會變成 callback 參數進來
48. $(‘#a’).mousemove(function (event) { console.log(event.offsetX); }); // 事件：滑鼠移動 // 從 event 傳入所有此事件相關資料 // 例如目前滑鼠的位置
49. DOM 遍歷
50. 有時候光有選擇器還不夠 可能會需要在節點間遊走
51. $(‘#a’).parent().text(‘haha’); // 選取 #a 的父節點 $(‘#a’).prev().text(‘haha’); // 選取 #a 同一層但是在前面的所有節點 $(‘p’).eq(2).text(‘haha’); // 選取第三個選到的 p
52. CSS
53. $(‘#a’).css(‘margin’); // 取得 #a 的 margin 數值 $(‘#a’).css(‘margin’, 50); // 設定 #a 的 margin 數值
54. $(‘#a’).css({ margin: 100, width: 200, ‘font-size’: ‘200%’, fontWeight: ‘bold’ }); // 一次設定多筆樣式 // 無法表示的可以用字串表示
55. $(‘#a’).width(); // 取得 #a 的 width 數值 $(‘#a’).height(50); // 設定 #a 的 height 數值 $(‘#a’).offset(); // { top: ..., left: ... } // 取得 #a 的相對母元素位置 $(‘#a’).scrollTop(50); // 設定 #a 的滾動的數值
56. 特效與動畫
57. $(‘#a’).hide(); // 隱藏 #a $(‘#a’).show(); // 顯示 #a
58. $(‘#a’).fadeIn(); // 淡入，預設花費時間為一秒 $(‘#a’).fadeOut(500); // 淡出，設定花費時間為半秒 $(‘#a’).fadeTo(0.5, 500); // 用半秒的時間讓透明度變成 0.5
59. $(‘#a’).slideDown(); // 滑下來，預設花一秒 $(‘#a’).slideUp(500); // 滑上去，設定花費時間為半秒
60. $(‘#a’).animate({ margin: 100, width: 200, ‘font-size’: ‘200%’, fontWeight: ‘bold’ }, 500, function () { console.log(‘animation done’); }); // 花半秒時間變成指定的樣式 // 花費時間，easing，callback 都是可選
61. Ajax
62. 原本瀏覽網頁擷取資料時 會需要切換然後重新載入頁面
63. 現在改由 JS 在背後偷偷去 擷取，就不用更新整個頁面了
64. $.get(‘banana.json’, { data: 123 }, function (data) { console.log(‘data retrieved!’); }, ‘json’); // 回傳的資料一樣是從 callback 的參數傳入 // 除了資源位址，傳送過去的資料，請求成功 // 的 callback 和傳送資料格式都是可選的 $.post( ... ); // 還有 post
65. $.ajax({ url: ‘banana/apple’, data: 100, error: function (error) { console.log(‘failed!’); }, success: function (data) { console.log(‘success!’); } }); // $.get $.post 都是 $.ajax 的簡寫 // 有一大堆可選的東西可以填