三、選擇器與事件：開始讓你的網頁具有互動性吧！

3-11 選擇器：設定 CSS 般指定要操控的網頁元素

可以用 css 選擇器的方式選取 DOM 元素

<div class="header">
    <h1>hihi</h1>
</div>

<script>
$(document).ready(function () {
  $('.header h1').slideUp();
});
</script>

3-12 選擇器範例程式碼

// HTML 標籤選擇
$('h1').hide();

// Class 選擇
$('.header').hide();

// ID 選擇
$('#box').hide();

DOM 是什麼

• 可以想成 HTML 文件上的任何物件。操作操作 DOM，也就是透過 Javascript 操作 HTML 物件一般來說，最常見的就是透過 jQuery 來操作 HTML 物件

3-13 輕鬆撰寫第一個網頁設計互動效果

來些互動性的功能吧，像是按個按鈕隱藏某個元素

    <input type="button" value="隱藏標題" class="button">
    <h1>1234</h1>

<script>
$(document).ready(function () {
  $('.button').click(function (e) { 
    e.preventDefault();
    $('.wrap h1').slideUp();
  });
});
</script>

preventDefault

• preventDefault() 方法

• jQuery 事件 - preventDefault() 方法

• [jQuery] event.preventDefault() 與 event.stopPropagation() 的差異 | Harry's Tech World - 點部落

• [javascript] e.preventDefault(); @ 碎碎念 :: 隨意窩 Xuite 日誌

• JavaScript 停止冒泡和阻止瀏覽器默認行爲 - 前端開發博客

• event.preventDefault() : 如果調用這個方法，默認事件行爲將不再觸發。 - jQuery API 中文文檔 | jQuery 中文網

• 表單提交 (submit) 時使用 preventDefault 可能產生的問題

3-14 點擊事件範例程式碼

$(document).ready(function() {
  $('.button').click(function(event) {
    $('h1').hide();
  });
});

3-15 使用 toggle 切換開啟或隱藏效果

<input type="button" value="隱藏標題" class="button">
<h1>1234</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias asperiores consequuntur quidem veniam iure sunt? Soluta deleniti possimus maiores sapiente!</p>

<script>
$(document).ready(function () {
  $('.button').click(function (e) { 
    e.preventDefault();
    $('.wrap h1, .wrap p').toggle();
  });
});
</script>

3-16 教你如何除錯 jQuery

• 可以用 Chrome 開發者工具的 console 除錯

• 雖然我都用 VS code XD

• code 寫多會眼花，可註解提醒

想隱藏時保留原有空間

• 可使用 visibility、opacity 屬性

• JS Bin - Collaborative JavaScript Debugging

3-17 jQuery 辭典、輕鬆查詢功能一把抓

• jQuery Cheat Sheet

Quiz2: 第二章測驗