> For the complete documentation index, see [llms.txt](https://ayugioh2003.gitbook.io/jquery-learning/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://ayugioh2003.gitbook.io/jquery-learning/liu-3001-jiao-ni-ru-he-cao-kong-wang-ye-yuan-su.md).

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

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

* [HW6-34 this - 教你如何操作本身元素 | jQuery](https://codepen.io/ayugioh2003/pen/zawpyE)

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

* [jQuery this](https://codepen.io/serenana/pen/BVamOb)
* 可使用 outline
* [CSS Outline Properties](https://www.w3schools.com/Css/css_outline.asp)

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

* [HW 6-35 parent() - 找到父階層元素 | jQuery](https://codepen.io/ayugioh2003/pen/KemQey)

## 6-36 siblings() - 同層元素

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

* [HW6-36 6-36 siblings() - 同層元素 | jQuery](https://codepen.io/ayugioh2003/pen/yEbvdq)

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

* [HW6-37 find() - 輕鬆找到子元素內容 | jQuery @ HexSchool](https://codepen.io/ayugioh2003/pen/QxqveK)

## 6-38 設計 QA 折疊選單

兩行的寫法

```javascript
$(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 二階層折疊選單設計

* [HW 6-39 二階層折疊選單設計 | jQuery @HexSchool](https://codepen.io/ayugioh2003/pen/yEzPrE)

CSS 選擇器

* [CSS 選擇器參考手冊](http://www.w3school.com.cn/cssref/css_selectors.ASP)

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

* [A Pen by JrHao](https://codepen.io/hao216/pen/qqeVaP)
* 可考慮用 abosolute
* [CSS - 關於 position 屬性](https://doggy8088.github.io/csslayoutsite/position.html)

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

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

```javascript
$(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 擷取政府資料](https://codepen.io/Wcc723/pen/OXPgxx?editors=1010)，api 已經失效
* [高雄捷運車站基本資料 - 資料集 - 高雄市政府資料開放](https://data.kcg.gov.tw/dataset/mrt-005) 因為換新網址了
* 在網頁上使用javascript其中一個原因就是為了要操控HTML元件、能動態地改變網頁內容;若不想讓人看的敏感內容(交易資料、帳號之類的)，比較不會使用javascript，應該是會寫在伺服器端處理才是。

## 6-41 click()、on() 的差別

`click()` 是放一個 event handler 事件監聽器在想要有動作的元素上 `on()` 則是放一個 event handler 在欲動作元素的父元素上；所以就算目標元素後來才動態產生，父元素還是能幫他監聽事件有沒有發生

如果要用純 js 達到 on() 的效果，動態產生的元素，需要另外添加 addEventListener

* [jQuery to pure JS: Event listeners on dynamically created elements · The Casual Notebook: Notes on software and life by Elliot Jackson](https://elliotekj.com/2016/11/05/jquery-to-pure-js-event-listeners-on-dynamically-created-elements/)

HW6-47 click()、on() 的作業

* [HW6-41 click()、on() 的差別 | jQuery @HexSchool](https://codepen.io/ayugioh2003/pen/BVJgZg)

想請問老師 我在 js 檔裡面，用 jQuery 分別綁定了兩個 event listener 一個是在 h1 用 click() 綁定，在裡面 alert 一個是在 .wrap 用 on() 綁定，然後 h1 發生 click 事件時會 alert

```javascript
 // 點擊 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 的範例程式碼

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

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

## 6-43 總結回顧

Cheat

* [jQuery Cheat Sheet](https://oscarotero.com/jquery/)
* [jQuery API Documentation](https://api.jquery.com/)

有印象的

* 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(),&#x20;
* EFFECTS
  * hide(), show(), toggle()
  * delay(), stop()
  * fadeIn(), fadeOut(), fadeToggle()
  * slideDown(), slideUp(), slideToggle()
* AJAX
* CORE

## Quiz5: 第五章測驗

![](https://i.imgur.com/ewzr98K.png)