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

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

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>