在 HTML 中新增 JQuery

1. 在 HTML 中使用 JQuery CDN 包含 JQuery
2. 下載 JQuery 並將其包含在 HTML 中

本文將指導你在 HTML 頁面上新增或編寫 jQuery 程式碼。

在 HTML 中使用 JQuery CDN 包含 JQuery

JQeury 是最流行的 JavaScript 庫之一。

該庫通過 DOM 遍歷和操作、CSS 操作、事件處理、動畫和 AJAX 呼叫等功能簡化了網站中的許多工作。我們可以使用 jQuery 少寫多做，這是主要優勢。

我們可以使用 jQuery 而不是常規的 JavaScript 以更少的程式碼進行操作。現在，我們將討論如何在 HTML 頁面上使用 jQuery。

在 HTML 文件中包含 jQuery 的最常見方法是使用內容交付網路 (CDN)。CDN 是一個伺服器網路，通過將內容快取在離使用者更近的網路位置，為終端使用者提供所請求的內容。

這樣，使用者將快速準確地獲得所請求的資料。我們可以從 Google CDN 和 Microsoft CDN 等各種來源獲取 jQuery CDN。

我們可以在 script 標籤中包含 jQuery CDN URL，並在 HTML 中使用 jQuery。我們可以將 jQuery 寫在單獨的 .js 檔案中並將其包含在 HTML 檔案中，或者將 jQuery 寫在 script 標記中。

首先，進入 JQuery CDN網站，選擇最新的穩定版 jQuery。為了演示，我們使用的是未壓縮的版本。

然後網站將輸出如下所示的標籤。

<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>

接下來，複製標籤並將其放入 HTML 檔案中。然後，建立一個 ID 為 text 的 p 標籤，並且不要在標籤之間寫入任何內容。

在 p 標籤下方，建立一個 ID 為 button 的按鈕，並在 value 屬性中寫入文字 Click here。HTML 部分已經結束，現在我們將編寫 jQuery。

在 script 標籤內，編寫 ready() jQuery 方法。選擇 button id 並在方法內呼叫 click() 方法。

同樣，在 click() 方法中選擇 text id 並呼叫 html() 方法。將文字 clicked 寫入 html() 引數。

在本節中，我們將瞭解這些不同的 jQuery 方法。ready() 方法包含所有其他方法。

當 DOM 完全載入時，方法中的其他內容將被執行。同樣，當單擊選定元素時執行 click() 方法。html() 方法將內容設定為所選元素。

在下面的示例中，單擊按鈕時會顯示已單擊的文字。這樣，我們就可以在使用 CDN 的 HTML 文件中使用 jQuery。

示例程式碼：

<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>

<p id="text"> </p>
<input type='button' id='button' value='Click here' />

<script>
$(document).ready(function(){
 $('#button').click(function(){
 $('#text').html("clicked");
 });
});
</script>

下載 JQuery 並將其包含在 HTML 中

用 HTML 編寫 jQuery 的另一種方法是下載 jQuery 檔案並將其包含在 HTML 檔案中。

我們可以從這裡連結下載檔案。在將下載的 .js 檔案包含在 script 標記中後，我們將在 HTML 中編寫 jQuery 程式碼。

例如，從上面給出的連結下載 jQuery 檔案。接下來，在 HTML 檔案中，在 script 標籤的 src 屬性中寫入 jQuery 檔案的檔案路徑。

這是我們必須對上述方法中的示例進行的唯一更改。我們將使用相同的 HTML 和 jQuery 程式碼進行演示。

當我們單擊按鈕時，將產生文字 clicked，如上例所示。這樣，我們就可以下載 jQuery 檔案並將其包含在 HTML 中。

示例程式碼：

<script src="jquery-3.6.0.min.js"></script>
<p id="text"> </p>
<input type='button' id='button' value='Click here' />

<script>
$(document).ready(function(){
 $('#button').click(function(){
 $('#text').html("clicked");
 });
});
</script>