菜菜菜的前端學習日誌 - Day23

jQuery

好的，前面都是講 javascript原生的語法，今天要來講 jQuery

jQuery呢是一個 js 的 library，是一個非常好用的工具

它其實已經在網頁領域行之有年，大多數的網站都能看到 jQuery的蹤跡

它的語法讓開發者能夠更容易地去操作 DOM 來執行各樣作業

就來看看要怎麼去使用它呢～

引入

要使用 jQurey 就必須先引入他的檔案

可以先至它的官方網站下載後，再將它的 js 檔引入

官方有提供 CDN 的方式 jQuery CDN就能夠直接引入，不需要下載

<script
  src="https://code.jquery.com/jquery-3.2.1.js"
  integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
  crossorigin="anonymous"></script>

前面提到了 jQuery 是一個透過選取 DOM 來去執行動作

他的基本語法如下

$(selector).action()

它以 $ 定義jQuery語法

前面的 selector 就是要選取的 DOM 例如：".Andy"或"#Andy"等等

而後面的action()就是要執行的動作了，後面會在介紹有哪些動作夠使用

小範例

$(document).ready(function(){
    $("#Andy").hide();
});

前面會以$(document).ready()開頭是因為避免網頁尚未加載完畢就執行可能會導致失敗，例如可能 DOM 元素還沒出現你就要操作它。

下面就是我們選取的一個 ID 為 Andy 的元素讓它消失

在一個範例

我新增了一個 list 想要讓它的文字顏色變成紅色

$(document).ready(function(){
    $("ul li").css("color","red");
});

這樣子文字顏色就變成紅色囉～

當然我們在改總會需要改多個 CSS 總不能寫好幾組吧
所以我們可以將要改的屬性以object的形式來寫

$(document).ready(function(){
  $("ul li").css({"color":"red","font-size":"50px","list-style":"none"});
});

這樣子我們就夠一次改許多屬性囉～