> 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/san-3001-xuan-ze-qi-yu-shi-jian-ff1a-kai-shi-rang-ni-de-wang-ye-ju-you-hu-dong-xing-ba-ff01.md).

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

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

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

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

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

## 3-12 選擇器範例程式碼

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

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

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

DOM 是什麼

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

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

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

```markup
    <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() 方法](http://www.w3school.com.cn/jsref/event_preventdefault.asp)
* [jQuery 事件 - preventDefault() 方法](http://www.w3school.com.cn/jquery/event_preventdefault.asp)
* [\[jQuery\] event.preventDefault() 與 event.stopPropagation() 的差異 | Harry's Tech World - 點部落](https://dotblogs.com.tw/harry/2016/09/10/131956)
* [\[javascript\] e.preventDefault(); @ 碎碎念 :: 隨意窩 Xuite 日誌](http://blog.xuite.net/dizzy03/murmur/60790342-%5Bjavascript%5D+e.preventDefault%28%29%3B)
* [JavaScript 停止冒泡和阻止瀏覽器默認行爲 - 前端開發博客](http://caibaojian.com/javascript-stoppropagation-preventdefault.html)
* [event.preventDefault() : 如果調用這個方法，默認事件行爲將不再觸發。 - jQuery API 中文文檔 | jQuery 中文網](https://www.jquery123.com/event.preventDefault/)
* [表單提交 (submit) 時使用 preventDefault 可能產生的問題](http://www.mrmu.com.tw/2011/04/12/preventdefault-submit-problems/)

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

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

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

```markup
<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](http://jsbin.com/dezehosage/edit?html,css,js,output)

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

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

## Quiz2: 第二章測驗

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

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