二、jQuery入門

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

• 瀏覽器可以解析 html 和 css

• JS 可以處理瀏覽器的行為

• 但會有兼容問題

• 像房屋搖動的行為，各瀏覽器可能行為不一樣

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

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

jquery 兼容很多 JS 的語法

• 動畫效果、滑動效果、AJAX、CSS屬性、HTML插入

• 物件選擇器、jQuery核心、Plugin加載、淡入淡出、HTML屬性...

如果換成 jQuery 寫法

$(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 引擎

$('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

$(document).ready(function(){

})

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

<div>123</div>

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

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

• script tag 屬性 async defer 差別 | 阿沙布魯 - 點部落

• JS 屬性 async 和 defer 的作用和區别 - 簡書

• script tag 屬性 async defer 差別 @ Vexed's Blog :: 隨意窩 Xuite 日誌

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

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

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

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

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

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

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

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

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

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

Quize 1: 第一章測驗