昨天有說明JavaScript比較常抓取的網頁元素有哪些，同時還有針對DOM提出一些簡單的說明，今天會用有限的篇幅來說一下jQuery是什麼。

jQuery是什麼？

有時候你會看到有人在撰寫很夢幻的特效時看到一堆「$」的符號，那有很大的機會是透過jQuery撰寫而成。jQuery本身就是一個由JavaScript撰寫的函式庫，可以透過jQuery來寫很多JavaScript的函數功能。jQuery實際上寫起來非常的短，可以透過以下連結的語法比較與參考。

https://youmightnotneedjquery.com/

jQuery範例toggle

為了演示jQuery的功能，這邊先選擇了toggle這個語法進行演示。toggle這個JavaScript的指令是「切換」，透過設定達到某個動作後會進行切換(0變1、1變0)。本次案例預計點下按鈕後會顯示div，再按一下會隱藏。

建置HTML結構

首先先建置兩個按鈕與兩個div，按鈕1-1會影響區塊1-1，會透過jQuery寫；按鈕1-2會影響區塊1-2，會透過JavaScript寫。

<button id="button1_1">button1-1</button>
<button id="button1_2">button1-2</button>

<div id="box1_1">box1-1 區塊：toggle</div>
<hr />
<div id="box1_2" class="c_box1_2">box1-2 區塊：toggle</div>

建置CSS樣式

為了讓區塊能夠明顯辨識，幫區塊上色，可參考以下語法。

div {
  color:white;
  width: 200px;
  height: 80px;
  background-color:rgba(100,0,200,1);
  margin: 5px;
}

jQuery語法撰寫

為了達到按鈕切換顯示/隱藏區塊1-1的狀態，這邊會開始撰寫jQuery。為了要讓jQuery順利執行，需先安裝jQuery函式庫，可參考其他大大的教學

安裝完後，jQuery語法相關範例與註解如下所示：

$(function(){    //執行一個程式
   $('#button1_1').click(function(){    //指定按鈕1-1，點一下後執行程序
      $('#box1_1').toggle();    //區塊1-1進行切換，顯示/隱藏
   });
});

JavaScript語法撰寫

相關JavaScript的寫法如下所列，相關說明已經加到備註中：

document.querySelector('#button1_2').addEventListener('click' ,run)
//指定按鈕1-2，點一下之後執行程序run

function run(){       //執行run這個程序
  document.getElementById('box1_2').classList.toggle('c_box1_2')
// 指定區塊1-2，並抓取c_box1_2這個class的樣式，進行顯示/隱藏這個class
};

由於該語法抓取class樣式，這邊則加上切換的CSS樣式，若c_box1_2不存在，則區塊1-2會顯示div的樣式，若c_box1_2存在則顯示這邊設定的CSS樣式，這邊的toggle就是抓取c_box1_2樣式的開關。若要達到顯示與隱藏效果，CSS設置語法如下：

.c_box1_2 {
 display:none;
}

jQuery與JavaScript

從上面的例子可以得知，光是一個顯示與隱藏的效果，語法的長度就有些差異。當然JavaScript可能還有其他更簡易的寫法，但在效果應用上通常jQuery的語法和閱讀便利性都勝過JavaScript一籌。

範例參考

以下範例為今天說明內容的實作頁面，顯示兩顆按鈕與兩種語法差異，請參考：
https://codepen.io/hamagawa76/pen/vYjJRqN

是不是很簡單！明天會針對Vue.JS進行簡要說明與應用，我們明天見囉！