[jQuery]

Cheling Liao

Published in

Coding Cheling

Nov 15, 2019

jQuery是一套跨瀏覽器的JavaScript函式庫，簡化HTML 與 JavaScript 之間的操作。

使用jQuery最大的好處就是選擇器(selector)。
除了一些新潮的架構設計與套件完全使用Javascript 來長出網頁內容外，大部分使用時機是改變HTML 元件的顏色、文字、狀態。也就是改變HTML 元件的CSS、HTML本身的屬性(Attributes)或是HTML 容器的內容。
jQuery是一套 JavaScript 的 Library，可幫助JavaScript 與HTML 元素進行交互。
jQuery 是針對 JavaScript 內在不足的地方加以增進，你仍然需要自己寫一些程式來完成你需要的各種功能，不同的是，正確地使用了 jQuery 可以讓你的程式碼更精簡、更優雅的表達出來，這在後續的範例中可以看到，更重要的是，應該也會讓你更快速的開發出你要的功能。
jQuery 主要是用在 DOM 文件的操作。

要使用jQuery 必須要先加載jQuery

例如：

<script src=’https://code.jquery.com/jquery-3.1.0.min.js'></script>

如果您觀察上什麼的Google URL — 在URL 中規定了jQuery 版本(1.8.0)。如果您希望使用最新版本的jQuery，也可以從版本字符串的末尾（比如本例1.8）刪除一個數字，谷歌會返回1.8 系列中最新的可用版本（1.8.0、1.8.1 等等），或者也可以只剩第一個數字，那麼谷歌會返回1 系列中最新的可用版本（從1.1.0 到1.9.9）。

許多用戶在訪問其他站點時，已經從谷歌或微軟加載過jQuery。所有結果是，當他們訪問您的站點時，會從緩存中加載jQuery，這樣可以減少加載時間。同時，大多數CDN 都可以確保當用戶向其請求文件時，會從離用戶最近的服務器上返迴響應，這樣也可以提高加載速度。

將程式寫在 $(document).ready() 方法中，確保網頁載入完畢才執行程式

$(document).ready(function() {
  // Your code here
});

也可以縮寫為：

$(function() {
  // Your code here
});

將程式置於網頁最後(在 </body> 之前)，也有相同效果。

如果網站包含許多頁面，並且希望 jQuery 函數易於維護，那麼請把 jQuery 函數放到獨立的 .js 文件中。把它們放到一個單獨的文件中會更好，就像這樣（通過src 屬性來引用文件）：

<head> 
<script type =“ text / javascript” src =“ jquery.js”> </ script> 
<script type =“ text / javascript” src =“ my_jquery_functions.js”> </ script> 
</ head>

語法: $(“#id”)，短短的一句話就可以用id 抓到物件，用Class 的話可以用$(“.className”) 去找，跟CSS的寫法是一模一樣的。
我們可以確保我們的頁面已準備就緒$(document).ready()。然後，我們可以傳遞一個函數，ready該函數將在頁面加載時執行。
jQuery 使用與CSS 相同的選擇器名稱。
我們可以使用隱藏元素hide，並使用顯示它們show。
我們可以使用來使元素出現fadeIn。
on('click')函數使我們能夠使HTML元素可點擊。單擊元素後，click函數將執行我們提供的函數。它的完整sytnax看起來像：

$('.example-class').on('click', function() {
   // Execute when .example-class is clicked 
   });

toggle 將在頁面上切換元素。
$(this) 如果將其放置在click 函數中，它將選擇被單擊的特定元素。
this 是JavaScript 內的keyword ，因此不需加引號。
toggleClass 可以打開和關閉CSS class。
我們可以使用選擇彼此相鄰的元素.next。
text 將DOM元素的文本替換為我們指定的文本。
slideToggle 將使元素隨動畫一起滑入和滑出頁面。

推薦閱讀：
jQuery 總結與進階
w3school jQuery 教程

[jQuery]

要使用jQuery 必須要先加載jQuery

Written by Cheling Liao