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

14th鐵人賽

anquan

2022-10-04 23:03:27

375 瀏覽

分享至

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 更容易理解、簡單明瞭了呢？的確，我們來跑一下看看：