六、教你如何操控網頁元素
6-34 this - 教你如何操作本身元素
為什麼 hover 時,border 後,會推擠到下方元素
可使用 outline
6-35 parent() - 找到父階層元素
6-36 siblings() - 同層元素
點擊後,想讓同層的其他人消失
6-37 find() - 輕鬆找到子元素內容
6-38 設計 QA 折疊選單
兩行的寫法
提問
這是這單元的試做,請老師有空時幫我檢查一下了,謝謝老師 https://codepen.io/ayugioh2003/pen/vreJyg
想順便提問一個問題 我在三個 .question 內,都個別再內嵌了一個 iframe ( Youtube 影片) 展開選單後,影片是能正常播放的 但透過 jQuery 讓它們 display: none 後,原先播放的音樂仍會繼續播放 想請問如果想要讓選單被收闔時,播放中音樂就會暫停或停止,jQuery 或原生 JS 有辦法做到這樣的事情嗎 還是這功能必須要搭配 Youtube Player API 才有辦法實現
6-39 二階層折疊選單設計
CSS 選擇器
選單下方的元素會跟著移動,怎解
可考慮用 abosolute
6-40 使用 html()、text() 載入內容
用 jQuery 動態加入 html 標籤 從開發人員看到的程式碼,不見得都是原始 html,可能是被動態產生的
為什麼要使用jq 寫html cpde,是為了不讓其他人在chome看見此code呢?還是另有其他的意圖及用途呢?
好處是,可以動態增減內容,比如用 Ajax 從後端抓動態資料,用 js 插入
$.ajax 擷取政府資料,api 已經失效
高雄捷運車站基本資料 - 資料集 - 高雄市政府資料開放 因為換新網址了
在網頁上使用javascript其中一個原因就是為了要操控HTML元件、能動態地改變網頁內容;若不想讓人看的敏感內容(交易資料、帳號之類的),比較不會使用javascript,應該是會寫在伺服器端處理才是。
6-41 click()、on() 的差別
click()
是放一個 event handler 事件監聽器在想要有動作的元素上 on()
則是放一個 event handler 在欲動作元素的父元素上;所以就算目標元素後來才動態產生,父元素還是能幫他監聽事件有沒有發生
如果要用純 js 達到 on() 的效果,動態產生的元素,需要另外添加 addEventListener
HW6-47 click()、on() 的作業
想請問老師 我在 js 檔裡面,用 jQuery 分別綁定了兩個 event listener 一個是在 h1 用 click() 綁定,在裡面 alert 一個是在 .wrap 用 on() 綁定,然後 h1 發生 click 事件時會 alert
想請問的是 為什麼在 on() 裡面,如果加了 e.preventDefault();
這句,後面的 alert 就會失效? 我原先的理解是,這句話應該是讓預設的行為失效 為什麼他反而讓後面的 alert 也是失效了?
6-42 click 與 on 的範例程式碼
6-43 總結回顧
Cheat
有印象的
Selectors
iice
Attributes / CSS
css()
addClass(), removeClass(), ToggleClass()
Manipulation
append()
html(), text()
TRAVERSING
children(), parent()
find()
siblings()
EVENTS
scroll() 滾動的時候,載入動作
ready()
on()
blur(), focus()
keydown(), keypress(), keyup()
click(), dbclick(), hover(),
EFFECTS
hide(), show(), toggle()
delay(), stop()
fadeIn(), fadeOut(), fadeToggle()
slideDown(), slideUp(), slideToggle()
AJAX
CORE
Quiz5: 第五章測驗
Last updated