jQuery 教程：使用 JavaScript 庫
簡介
HTML、CSS 和 JavaScript 是 Web 的三種基本語言。我們使用 HTML 構建網站，使用 CSS 設置樣式，並使用 JavaScript 添加交互功能。大多數動畫以及由於用戶單擊、懸停或滾動而發生的任何動作都與 JavaScript 一起使用。
jQuery 是“少寫多做”的 JavaScript 庫。它不是一種編程語言，而是一種用於大大簡化編寫常見 JavaScript 任務的工具。 jQuery 具有跨瀏覽器兼容的額外好處，這意味著您可以確定您的代碼輸出將在任何現代瀏覽器中按預期呈現。
通過比較一個簡單的“Hello, World!”在這兩種語言的例子中，我們可以看到 JavaScript 和 jQuery 編寫方式的不同。
document.getElementById('demo').innerHTML = 'Hello, World!'$('#demo').html('Hello, World!')如您所見，jQuery 比普通的 JavaScript 更容易讀寫。
目標
本指南假定您沒有 jQuery 的先驗知識，將涵蓋以下主題：
- 了解如何在 Web 項目中安裝 jQuery。
- 了解 API、DOM 和 CDN 等重要 Web 開發概念的定義。
- 查看常見的 jQuery 選擇器。
- 了解 jQuery 事件和效果，並製作一些簡單、實用的示例。
先決條件
在開始本指南之前，您需要以下內容：
- HTML 和 CSS 的基本知識。您應該已經知道如何建立一個簡單的網站，並且了解 CSS 選擇器，例如 id、類和偽元素。
- 了解編程的基礎知識。雖然在沒有 JavaScript 高級知識的情況下也可以開始編寫 jQuery，但熟悉變量和數據類型以及數學和邏輯的概念會有很大幫助。
安裝 jQuery
jQuery 只是一個 JavaScript 文件，您將在 HTML 中鏈接到該文件。在項目中包含 jQuery 有兩種方法：下載本地副本，或通過 CDN 鏈接到文件。
如果您想下載它，您可以從官方網站獲取一份副本。但是，鏈接到 Google 託管庫中的副本更加容易。
首先，製作一個 HTML 骨架。
<!DOCTYPE html>
<html lang="en">
<head>
<title>jQuery Demo</title>
<link rel="stylesheet" href="css/styles.css" />
</head>
<body></body>
</html>
在結束 </body> 之前鏈接到 jQuery CDN 標記，後跟您自己的自定義 JavaScript 文件 scripts.js .
<!DOCTYPE html>
<html lang="en">
<head>
<title>jQuery Demo</title>
<link rel="stylesheet" href="css/styles.css" />
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="js/scripts.js"></script>
</body>
</html>此時，jQuery 庫正在加載到您的站點中，並且您可以完全訪問 jQuery API。
使用 jQuery
jQuery 的核心是通過 DOM 連接瀏覽器中的 HTML 元素。
文檔對像模型 (DOM) 是 JavaScript（和 jQuery）與瀏覽器中的 HTML 交互的方法。要準確查看 DOM 是什麼，請在瀏覽器中右鍵單擊頁面並選擇 Inspect .您在那裡看到的 HTML 代碼是 DOM。每個 HTML 元素都被視為一個 節點 在 DOM 中 - JavaScript 可以觸摸的對象。 JavaScript 可以添加、刪除和更改任何這些元素。
DOM 的最外層是 document 目的。要開始使用 jQuery 操作頁面，我們需要首先確保文檔“準備就緒”。
在你的 JavaScript 文件 scripts.js ，輸入以下代碼。
$(document).ready(function () {
// all custom jQuery will go here
})
您的整個文件將包含在上面的代碼中，您編寫的任何自定義 jQuery 都將包含在其中。為了減少這些示例中的代碼量，假設所有 HTML 代碼都放在 <body> 中 標籤，所有的jQuery都包裹在上面的ready()中 方法。
在本文的介紹中，我們看到了一個簡單的“Hello, World！”。腳本。要使用 jQuery 啟動此腳本並將文本打印到瀏覽器，首先我們將創建一個 ID 為 demo 的空塊級元素 應用到它。
<p id="demo"></p>
jQuery 使用美元符號 ($ ）。我們主要使用 CSS 語法通過 jQuery 訪問 DOM，並通過方法應用操作。一個基本的 jQuery 示例遵循這種格式。
$('selector').method()
由於 id 由哈希符號 (# ) 在 CSS 中，我們將使用選擇器 #demo 訪問演示 id . html() 是一種改變元素內 HTML 的方法。
$('#demo').html('Hello, World!')
一旦文檔準備好，代碼就會執行。如果一切正常，DOM 現在將顯示 <p id="demo">Hello, World!</p> .
選擇器
大多數 jQuery 選擇器與我們在 CSS 中使用的相同，只是添加了一些特定於 jQuery 的選項。完整的 jQuery 選擇器列表可以在這裡找到。
下面是一些最常用的選擇器的簡要概述。
$("*")- 通配符： 選擇每個元素。$(this)- 當前： 選擇函數中正在操作的當前元素。$("p")- 元素： 選擇<p>的每個實例 標記。$(".example")- 類： 選擇具有example的每個元素 應用到它的類。$("#example")- 身份證號： 選擇唯一example的單個實例 身份證。$("[type='text']")- 屬性： 選擇具有text的任何元素 應用於type屬性。$("p:first-of-type")- 偽元素： 選擇第一個<p>.
一般來說，classes 和 ids 是你會遇到的最多的——classes 當你想要選擇多個元素時，ids 當你只想選擇一個元素時。
jQuery 事件
在“你好，世界！”例如，一旦頁面加載並且文檔準備就緒，代碼就會運行，因此不需要用戶交互。顯然，在這種情況下，我們可以輕鬆地將文本直接寫入 HTML，而無需使用 jQuery。
但是，如果我們想通過單擊按鈕使文本出現在頁面上，我們將需要使用 jQuery。我們可以在 HTML 中添加一個按鈕來觸發事件。
<button id="trigger">Click me</button>
<p id="demo"></p>
現在我們可以使用 click() 方法來調用包含我們的“Hello, World!”的函數代碼。
$('#trigger').click(function () {
$('#demo').html('Hello, World!')
})如果一切順利，點擊按鈕就會出現文字。
可以在此處找到完整的 jQuery 事件方法列表。一個事件 是用戶與瀏覽器交互的任何時間。我們剛剛學習了 click()，單擊鼠標即可執行。
下面是一些最常用的事件方法的簡要概述。
-
hover() - 懸停 當鼠標懸停在元素上時執行。 mouseenter() 和 mouseleave() 分別只適用於鼠標進入或離開元素。
-
提交() - 提交 在提交表單時執行。
-
滾動（） - 滾動 在屏幕滾動時執行。
-
keydown() - Keydown 當您按下鍵盤上的某個鍵時執行。
jQuery 效果
jQuery 效果通過輕鬆地允許您在頁面上添加動畫和以其他方式操作元素來與事件協同工作。
我們將舉一個例子，我們打開和關閉一個覆蓋/彈出模式。雖然我們可以使用兩個 id - 一個打開模態，另一個關閉它 - 我們將使用一個類來輕鬆打開和關閉具有相同功能的模態。
<button class="trigger">Open</button>
<section class="overlay">
<button class="trigger">Close</button>
</section>
我們將使用最少量的 CSS 來隱藏 overlay 與 display: none 並在屏幕上居中。
.overlay {
display: none;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 200px;
width: 200px;
background: gray;
}
最後，我們將使用 toggle() 方法，它將切換 CSS display none 之間的屬性 和 block , 點擊時隱藏和顯示疊加層。
$('.trigger').click(function () {
$('.overlay').toggle()
})
您現在可以通過單擊按鈕來切換模式的可見性。您可以更改 toggle() 到 fadeToggle() 或 slideToggle() 看看其他一些內置的 jQuery 效果。
下面簡要介紹一些最常用的效果方法。
- toggle() - 切換 切換一個或多個元素的可見性。 show() 和 hide() 是相關的單向效果。
- fadeToggle() - 淡入淡出切換 切換可見性並為一個或多個元素的不透明度設置動畫。 fadeIn() 和 fadeOut() 是相關的單向效果。
- slideToggle() - 幻燈片切換 切換具有滑動效果的一個或多個元素的可見性。 slideDown() 和 slideup() 是相關的單向效果。
- animate() - 動畫 對元素的 CSS 屬性執行自定義動畫效果。
結論
在本指南中，我們了解了很多非常重要的 Web 開發概念，包括 API、CDN 和 DOM 的定義。我們還學習瞭如何使用 jQuery 選擇和操作元素，以及事件和效果如何協同工作，為用戶提供交互式 Web 體驗。
從這裡開始，你應該對 jQuery 的能力有了更深入的了解，並開始編寫自己的代碼。
