六、教你如何操控網頁元素

6-34 this - 教你如何操作本身元素

為什麼 hover 時,border 後,會推擠到下方元素

6-35 parent() - 找到父階層元素

6-36 siblings() - 同層元素

點擊後,想讓同層的其他人消失

6-37 find() - 輕鬆找到子元素內容

6-38 設計 QA 折疊選單

兩行的寫法

$(this).toggleClass('active').parent().find('p').slideToggle();
$(this).parent().siblings().find('p').slideUp().parent().siblings().find('h3').removeClass('active');

提問

這是這單元的試做,請老師有空時幫我檢查一下了,謝謝老師 https://codepen.io/ayugioh2003/pen/vreJyg

想順便提問一個問題 我在三個 .question 內,都個別再內嵌了一個 iframe ( Youtube 影片) 展開選單後,影片是能正常播放的 但透過 jQuery 讓它們 display: none 後,原先播放的音樂仍會繼續播放 想請問如果想要讓選單被收闔時,播放中音樂就會暫停或停止,jQuery 或原生 JS 有辦法做到這樣的事情嗎 還是這功能必須要搭配 Youtube Player API 才有辦法實現

6-39 二階層折疊選單設計

CSS 選擇器

選單下方的元素會跟著移動,怎解

6-40 使用 html()、text() 載入內容

用 jQuery 動態加入 html 標籤 從開發人員看到的程式碼,不見得都是原始 html,可能是被動態產生的

$(document).ready(function () {

  // innerHtml
  // $('.box').html('<h1>哈哈你看不到我</h1>');

  // textContent
  $('.box h1').text('嗨大家好我是阿明');

  // 用 append 可以用附加的方式寫入,而不是直接覆蓋
  // $('.box').append('<h1>用html載入標籤</h1>'); 

});

為什麼要使用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

 // 點擊 h1,跳出"有效"視窗
  $('h1').click(function (e) { 
    e.preventDefault();
    alert('喔喔喔喔喔,用 click 綁定的!');
  });

  // 用 on,讓事件綁定在欲動作的上層父元素
  $('.wrap').on('click', 'h1', function (e) {
    e.preventDefault();
    alert('嘻嘻,用 on 綁定的');
  });

想請問的是 為什麼在 on() 裡面,如果加了 e.preventDefault(); 這句,後面的 alert 就會失效? 我原先的理解是,這句話應該是讓預設的行為失效 為什麼他反而讓後面的 alert 也是失效了?

6-42 click 與 on 的範例程式碼

$(document).ready(function() {
  // click範例
  $(".box").click(function(event) {
    event.preventDefault();
    //要執行的程式碼
  });

  // on 範例
  $('body').on('click', '.selector', function(event) {
    event.preventDefault();
    //要執行的程式碼
  });
});

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