---
# System prepended metadata

title: Day 20 不只阿嬤會動！元素也會動！（上）

---

# Day 20 不只阿嬤會動！元素也會動！（上）

嗨嘍大家

上一章我們題到了他的好兄弟，DOM 先生，而為啥我會說它倆是兄弟呢？因為網頁設計的形成
其中有一部分就是 JQuery 和 DOM 的相輔相成！若沒了他倆，這會使得網頁沒有靈魂，設計網頁
這一方面就會變得更艱難，但還是有一些大佬不使用 JQuery 和 DOM ，照樣設計出網頁來，但這樣
厲害的大佬比較少見（應該啦哈）So JQuery 和 DOM 的存在，對大部分新手來說，根本就是救命恩人！！

## 啥子是 jQuery ???

「阿嬤 JQuery 是啥阿？？？？？？？」沒事我來一一跟你們講解。

jQuery ，簡單來講是一個 JavaScript 函式庫，基本上是用來簡化 HTML 與 JavaScript 之間的溝通與操作的。
寫 jQuery 通常用`$`，並且偷偷用簡單的 CSS 解釋器來存取 DOM 節點的效果
像是`$('#Joanne是美女')`用來搜索 ID 名為 「Joanne是美女」的元素，是不是很簡單，等等，
你現在腦子裡想的不會是「ㄟ這跟 DOM 好像喔」嗯嗯沒錯！j嗯嗯沒錯！ 的出現不只幫助 DOM 實現能 "手舞足蹈" 的夢想，還可以簡化，還可以簡化 DOM 的程式碼，果然，我就說 jQuery 是一個大好人吧！

## 怎麼使用 jQuery 大大呢？

若想使用 jQuery 函式庫的話，必須要調用如下 HTML 程式碼才能使用 jQuery ：
```
<script src="https://code.jquery.com/jquery-2.1.0.js"></script>
```
要查看 jQuery 函式庫，訪問這個 URL，當添加了` <script> `標籤，就會看到已經加載了相應的
JavaScript 庫。但是呢，整個函式庫有超過 9000 行複雜的程式碼，所以先不要想說去理解裡頭的東西。

## 利用 jQuery 來修改標題

在上一章，我們用 DOM 來修改文字，這次我們要來用 jQuery 修改文字，要怎麼撰寫程式碼呢？

```
<!DOCTYPE html>
<html>
<head>
  <title>屋嗚嗚</title>
</head>
<body>
  <h1 id="標題">我要講什麼</h1>
  
  
  <script src="https://code.jquery.com/jquery-2.1.0.js"></script>
  
  <script>
    var 新的標題 = prompt("給標題取個名字吧！");
    $('#標題').text(新的標題);
   </script>
</body>
</html>
```
看起來是不是比 DOM 更容易理解、簡單明瞭了呢？的確，我們來跑一下看看：

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

一樣會彈出一個視窗，因為我們在裡面加了一個`prompt`元素
此時不管你在視窗裡輸入啥子，輸出結果都會是你打的字：

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

像是我輸入了：ji ni tai mei，輸出的結果就會像這樣

## 小總結

我們今天學會了 jQuery 的基礎，也用了它來修改標題，下一章我們會講到如何用 jQuery 讓 DOM
元素舞蹈起來，請敬請期待！！！