## DOM、JQuery、JQuery UI ---- #### 課程聊天室：https://tlk.io/mrtjs #### 範例練習：https://codepen.io/Chad_Z/pen/LYELJZe > ###### 請在任一資料夾，新增兩個檔案，一個是 index.html 一個是 index.css，並將範例程式複製至對應檔案中  --- ## DOM - 文件物件模型 ---- #### [瀏覽器解析 html 過程](https://youtu.be/qjEyIpm6D_Q?t=57)  ---- #### [瀏覽器解析 html 過程](https://youtu.be/qjEyIpm6D_Q?t=57)  ---- #### [瀏覽器解析 css 過程](https://www.youtube.com/watch?v=-CATiyw2-Ns)  ---- #### [結合 DOM 與 CSSOM 後產生 Render Tree](https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-tree-construction)  ---- #### 與 DOM 互動 1. 找到指定的節點 2. 存取、使用此節點的屬性與方法 ---- #### 找到指定的節點 1. 最快的方式: getElementById() 2. 最廣泛的方式：getElementsByTagName() 3. 使用 class 的方式：getElementsByClassName() 4. 最靈活的方式：querySelectorAll(), querySelector() ---- #### 拿到所有 button ```javascript=1 document.getElementsByTagName('button'); ``` ---- #### 拿到所有 class 為 btn 的 button ```javascript=1 document.getElementsByClassName('btn'); ``` ---- #### 拿到所有 class 為 btn 的 button ```javascript=1 document.querySelectorAll('button.btn'); ``` ---- #### 觀察拿到的結果，可以如陣列般操作 > ###### HTMLCollection - 由 element 組成的集合 ---- #### 在 html 上添加事件監聽 - addEventListener ```javascript=1 function handleClick(e) { console.log(e); } const target = document.querySelector('.navigate-up.enabled'); target.addEventListener("click", handleClick); ``` ---- #### 在 html 上添加事件監聽 - addEventListener <!-- 請打開範例 html --> ```javascript=1 function handleClick(e) { console.log(e); } ``` ```html=1 <button onClick="handleClick(event)">Click Me!</button> ``` ---- #### Exercise: > ###### 請打開範例 html，在 class 為 `new-todo` 的 `input` 元素，添加 `keydown` 事件的監聽回呼函示 - `handleInputKeyDown`，並將傳入函式的事件物件 console 出來 ---- #### 觀察 event 物件 1. target - 目標，也就是觸發事件的元素 2. preventDefault - [阻止預設行為](https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_event_preventdefault) 3. stopPropagation - [阻止向外傳遞](https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_event_stoppropagation) 4. key - [按鍵資訊](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key) ( KeyboardEvent 才有) ---- #### Exercise: > ###### 請修改前一範例練習，加上條件判斷，當使用者在 `new-todo` 按下 enter 時，console input 元素的值 > ###### 提示： 值可以從元素的屬性 `value` 拿到 ---- #### 與 input 的互動 ```javascript=1 const value = event.target.value; // get event.target.value = '123' // set ``` ---- #### Short Summary: * 選取元素 * 增加監聽 * 經由監聽拿到元素資訊 * 更改元素資訊 ---- ### 修改 html 1. 移除元素 - `ContainerEl.removeChild(targetElement)` 2. 增加元素 - `ContainerEl.appendChild(targetElement)` 3. 變更內容 - `targetElement.innerHTML` ---- #### Exercise: > ###### 接續上一練習，當使用者按 enter 時，呼叫函式 `addListItem` 並將 input 拿到的值傳入，並修正 `addListItem`，找到需要修改的 list ，對其新增設定好的 html（請使用 innerHTML)。 >> ###### 如果想要用 appendChild 也可以 >> ###### 但需要用到[這篇文章](appendChild)裡的技巧 - [ ] 當使用者按 enter 時，呼叫函式 `addListItem` - [ ] 將 input 拿到的值傳入 - [ ] 修正 `addListItem`，找到需要修改的 list - [ ] 對其新增 html ---- #### 刪除功能實踐 ---- #### Exercise: > ###### 請在 `class` 為 `destroy` 的 `button` 元素上，添加 `click` 事件的監聽回呼函示 `destroy`，並將傳入事件物件 console 出來 ---- #### [Template literals](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Template_literals) ```javascript=1 function wave(name) { const value = `hello ${name}`; return value; } wave('Chad'); ``` ---- #### 兩種思路找到要刪除的元素 1. 利用元素間的關係 1. Node.firstChild 2. Node.lastChild 3. Node.chilNodes 4. Node.nextSibling 5. Node.parentElement 6. Node.previousSibling 7. Node.removeChild 2. 利用特徵尋找 ---- #### Exercise: > ###### 請在每次新增一個 item 後，遞增全局的變數 `itemId`，並將此`itemId` 賦值給 `li` 的[客製化屬性](https://developer.mozilla.org/zh-CN/docs/Web/Guide/HTML/Using_data_attributes) `data-id`，並在 `destroy` 函式中，console 出 `li` 的 `data-id` ---- #### 客製屬性的選取 ```javascript=1 document.querySelector(`li[客製屬性名稱="屬性值"]`) ``` ---- #### Exercise: > ###### 請完成 `destroy` 函式，當使用者按下 x 時，刪除該 `li`，及其底下的元素 ---- #### Short Summary: * 更改、刪除、新增元素內容 * 利用客製屬性選取元素 * 使用 Template literals 產生不同的 html --- JQuery ---- #### 選取功能 ###### 回傳所有符合條件的元素，並且可對所有選中的元素進行操作 ```javascript=1 $('選擇器') $('選擇器')[0] // 如果用 index 的方式選取單一元素後 // 將不再經過 jQuery 的包裝，拿到的是 html 元件節點 $('選擇器').eq(0) // 回傳經 jQuery 的包裝過的物件 ``` > #### page: 336, 341 有相關尋訪 DOM 的 api ---- #### 元素屬性取得、修改 * attr(); `$('li').attr('data-id');` * addClass(); `$('ul').addClass('newClass');` * removeClass(); `$('ul').removeClass('newClass');` ---- #### 元素屬性取得、修改 * css(); `$('ul').css({'color': '#ffffff'});` `$('ul').css('color');` * toggleClass(); `$('ul').toggleClass('newClass');` ---- #### Exercise: > ###### 請接續上一範例，在 todo 網頁中，新增兩個事項，並在瀏覽器的開發者工具 console 分頁中，利用 jQuery 將 `li` 元素全部選取出來，並添加 class 'completed' ---- #### 元素結構修改 * append() `$('目標對象').append('欲新增的結構');` * remove() `$('目標對象').remove()` * html() `$('目標對象').html('html 結構')` ---- #### Exercise: > ###### 請接續上一範例，把函式 `addListItem` 和 `destroy`，中與 dom 的互動邏輯改成使用 jQuery 進行 ---- #### Exercise: > ###### 請在 type 為 checkbox, class 為 toggle 的 input 上監聽 change 事件，並在 change 觸發時，反覆更新元素 `li` 的 class `completed` ---- #### Exercise: > ###### 請不要讓 input 值為空字串時， > ###### 也能觸發新增的邏輯 ---- #### Exercise: > ###### 請完成右下角的 clear Completed 功能 ---- #### jQuery 的事件監聽 - on ```javascript=1 $('指定元素').on('事件名稱', function(event){}) ``` ---- #### jQuery 的事件監聽 - ready > ###### 瀏覽器已將 dom 樹建立完成 ```javascript=1 $( document ).ready(function() {}) $(function() {}) $( document ).on('DOMContentLoaded',function() {}) ``` ---- #### jQuery 的事件監聽 - load > ###### 圖片, css, js 都完成載入 ```javascript=1 $( window ).on('load', function() { }) ``` ---- #### Exercise: > ###### 請使用 jQuery 的 on api 完成右下角的 clear Completed 功能，不要直接在 html 上綁定事件監聽 --- ### JQuery UI > ###### JQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library. Whether you're building highly interactive web applications or you just need to add a date picker to a form control, jQuery UI is the perfect choice. > 以 JQuery 為底打造的元件庫 ---- ### 使用方式 1. 引入 jquery-ui (.js / .css) 1. CDN 2. Download (建議) 2. 找到需要的效果 / 元件 ---- ### 使用方式 3. 前往該效果 / 元件點開 `View Source`  ---- ### 使用方式 4. 如果需要細部調整，可以點開 API documentation  ---- ### 示範 Sortable ---- ### Exercise > ###### 請完成將 class 為 new-todo 的 input 加入 autocomplete 的功能，並且設定選項為 work, sleep, read ---- ### 盡量只載所需要功能  > ###### moment.js 完整功能約 67.8kb ---- Ref: 1. [瀏覽器解析 html 過程](https://youtu.be/qjEyIpm6D_Q?t) 2. [瀏覽器解析 css 過程](https://www.youtube.com/watch?v=-CATiyw2-Ns) 3. [Render-tree Construction, Layout, and Paint ](https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-tree-construction) 4. [preventDefault demo ](https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_event_preventdefault) 5. [stopPropagation demo ](https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_event_stoppropagation) 6. [MDN KeyboardEvent.key](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key) 7. [Create a DOM node from an HTML string](https://grrr.tech/posts/create-dom-node-from-html-string/) 8. [Template literals](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Template_literals) 9. [客製化屬性](https://developer.mozilla.org/zh-CN/docs/Web/Guide/HTML/Using_data_attributes) 10. [todomvc-vanillajs](http://todomvc.com/examples/vanillajs/#/) 11. [jQuery UI](https://jqueryui.com/) 12. [DOM 的事件傳遞機制：捕獲與冒泡](https://blog.techbridge.cc/2017/07/15/javascript-event-propagation/) ---- #### [範例練習](https://hackmd.io/@ChadZ/JS-MRT-3-EXERCISE) ---- # DOM、JQuery、JQuery UI https://github.com/changda0616/JS-TODO