Javascript & JQuery
網站互動設計程式進化之道
#4
2018.12.1

透過註冊 ( 訂閱 ) 獲取通知觸發程式碼

244

事件與元件關聯方式

250

• HTML 事件處理器
  

• DOM 事件處理器

• 事件偵聽

事件流程

260

• 事件氣泡

• 事件捕捉

事件委派

266

• 於父層註冊偵聽

• 透過事件氣泡獲取元件

• 新元件不影響功能正確性

事件發生的元件

270

• this

• currentTarget

jQuery

294

• DOM ​選取器

• DOM ​操作

• 程式碼簡化

Why Jquery

300

write less, do more

確認頁面準備完成

312

$(document).ready()

元件內容

314

html() v.s. text()

變更內容

316

• html()

• text()

• replaceWith()

• remove()

插入內容

318

• before() / after()

• prepend() / append()

• prependTo() / appendTo()

屬性操作

320

• attr() / removeAttr()

• css()

• addClass / removeClass() / toggleClass()

元件與迴圈

324

each()

事件處理

326

• on() / off() / one()

• 事件縮寫

事件處理器參數

330

• events

• selector

• data

• handler

轉場特效

332

• 內建特效

• animate()

• delay()

• stop()

DOM尋訪

336

元件篩選

338

依索引找尋元件

340

• 排序篩選

• eq()

• index()

表單元件篩選

342

移除與複製元件

346

• empty()

• unwrap()

• clone()

元件大小

348

瀏覽器與捲軸

350

網頁座標系

351

• position()

• offset()

JQUERY 引入

354

• 專案內引入

• CDN 引入