在 HTML 中新增 JQuery

Sushant Poudel 2023年2月19日 2022年4月22日
  1. 在 HTML 中使用 JQuery CDN 包含 JQuery
  2. 下載 JQuery 並將其包含在 HTML 中
在 HTML 中新增 JQuery

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

在 HTML 中使用 JQuery CDN 包含 JQuery

JQeury 是最流行的 JavaScript 庫之一。

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

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

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

這樣,使用者將快速準確地獲得所請求的資料。我們可以從 Google CDNMicrosoft 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 為 textp 標籤,並且不要在標籤之間寫入任何內容。

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>
Sushant Poudel avatar Sushant Poudel avatar

Sushant is a software engineering student and a tech enthusiast. He finds joy in writing blogs on programming and imparting his knowledge to the community.

LinkedIn