在 HTML 中新增 JQuery
本文將指導你在 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>
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