# 二、jQuery入門

## 2-2 JavaScript 與 jQuery 傻傻分不清楚？讓我們來教你！

* 瀏覽器可以解析 html 和 css
* JS 可以處理瀏覽器的行為
* 但會有兼容問題
* 像房屋搖動的行為，各瀏覽器可能行為不一樣

```javascript
var house;
house = document.getElementById("house");
house.搖動();

function 搖動(){
    // ...
}
```

jquery 兼容很多 JS 的語法

* 動畫效果、滑動效果、AJAX、CSS屬性、HTML插入
* 物件選擇器、jQuery核心、Plugin加載、淡入淡出、HTML屬性...

如果換成 jQuery 寫法

```javascript
$(document).ready(function(){
    $("#house").搖動();
})
```

問題: JS 現在還有跨瀏覽器兼容問題嘛，很多人在提倡用 vanilla.js 了 回答：現在 DOM 選擇器成熟，寫 es6、原生語法應該就行了 但 jQuery 除了 DOM 方便指定，還有簡化事件綁定、AJAX的設計

## 2-3 六角學院線上問答會資訊

## 2-4 初探 jQuery 強大之處 (練習流程)

開無痕

## 2-5 初探 jQuery 強大之處

去 jQuery 官網晃晃 <https://jquery.com/> V8 引擎

```javascript
$('a').hide()
$('a').show()

$('a').slideUp()
$('a').slideDown()

$('a').slideUp(1500)
$('a').fadeOut(1500)
$('a').fadeIn(1500)
```

引號的統一

* html 建議用雙引號，js 建議用單引號

## 2-6 下載 jQuery 檔案，介紹 1.x 與 2.x 的差別

jQuery 2.x 支援 IE9 以上

## 2-7 設定 jQuery 環境好簡單

先來起手式，確定網頁準備好後，載入 jQuery

```javascript
$(document).ready(function(){

})
```

嘗試看看載入成功沒有，把 p 隱藏看看

```markup
<div>123</div>

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

Emmet 展開 script，有時會出現 defer 和 async，那是什麼，好像會影響 jQuery

* [script tag 屬性 async defer 差別 | 阿沙布魯 - 點部落](https://dotblogs.com.tw/brooke/2016/03/21/052715)
* [JS 屬性 async 和 defer 的作用和區别 - 簡書](https://www.jianshu.com/p/343762bb97c5)
* [script tag 屬性 async defer 差別 @ Vexed's Blog :: 隨意窩 Xuite 日誌](http://webcache.googleusercontent.com/search?q=cache:JCbqDweFKi0J:blog.xuite.net/vexed/tech/61308318-script%2Btag%2B%25E5%25B1%25AC%25E6%2580%25A7%2Basync%2Bdefer%2B%25E5%25B7%25AE%25E5%2588%25A5+\&cd=1\&hl=zh-TW\&ct=clnk\&gl=tw)

為什麼 jQuery 不放在 body 尾端，這樣不會影響嗎

* 因為包了 document ready，會等 DOM 載入後才執行 code

## 2-8 jQuery 環境建置範例程式碼

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

## 2-9 小叮嚀(win 熱鍵提醒)：使用 Sublime 插件提昇寫 jQuery 效率

VScode 搜尋 jQuery 找最多人裝的就好

## 2-10 使用 Sublime 插件提昇 jQuery 效率

vscode 的插件，輸入 jq 就會有自動提示，只輸入 j 的話也有 記得要先 jqready 啊 例如，想使用 click 事件函式，就輸入 jclick 讓機器幫你打 code，節省自己的時間

```markup
  <button class="button">點我來隱藏下面的內容</button>
  <h1>要隱藏的內容</h1>
```

```javascript
$(document).ready(function () {
  $('.button').click(function (e) {
    $('h1').slideUp(500);
  });
});
```

## Quize 1: 第一章測驗

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