專注Java教育14年
全國咨詢/投訴熱線：400-8080-105
更新時(shí)間：2021-12-02 10:09:06 來源：動力節(jié)點(diǎn) 瀏覽1321次
jQuery 是一個(gè)開源功能豐富的 Javascript 庫，旨在簡化 HTML DOM 樹遍歷和操作、事件處理和 CSS 動畫。它因其重量輕、速度快、體積小等特點(diǎn)而廣受歡迎，使其更易于使用。使用 jQuery 的目的是讓 javascript 代碼在網(wǎng)站上易于執(zhí)行，因?yàn)?jQuery 將用 javascript 編寫的多行代碼包裝成一個(gè)可以用一行代碼調(diào)用的方法。出于這個(gè)原因，很多需要 javascript 的常見任務(wù)都可以由 jQuery 完成。
在本文中，我們將看到如何為我們的網(wǎng)頁執(zhí)行 jQuery 代碼。執(zhí)行 jQuery 代碼非常簡單，只需要處理幾個(gè)步驟，然后我們就可以開始了。在跳轉(zhuǎn)到主要主題之前，我們將首先了解如何在我們的網(wǎng)頁中添加和使用 jQuery。有兩種方法可以將 jQuery 添加到我們的網(wǎng)頁/網(wǎng)站：
從官方下載jQuery庫網(wǎng)
在線使用 jQuery CDN 鏈接
讓我們開始我們的第一種方法，即從網(wǎng)站下載庫。
下載庫。我們需要下載開發(fā)版本以進(jìn)行開發(fā)和測試。其余版本用于生產(chǎn)目的。單擊下載后，它會將您帶到包含可用鏈接的頁面，單擊所需鏈接，然后右鍵單擊該頁面并保存文件。請注意，我們使用的文件是一個(gè) javascript 文件，我們可以通過查看它的擴(kuò)展名來檢查它?，F(xiàn)在，我們將看到如何將 jQuery 添加到我們的 HTML 文件中。確保 jQuery 文件必須放在工作區(qū)中。
在<head>標(biāo)記部分內(nèi)的<script>標(biāo)記中聲明 jQuery 文件路徑。
<script src="jquery-3.6.0.min.js"></script>
示例 1：創(chuàng)建一個(gè) HTML 文件并將以下代碼添加到您的 HTML 文件中。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<script src="jquery-3.6.0.min.js"></script>
</head>
<body>
<p>GeeksforGeeks</p>
</body>
</html>
輸出：
GeeksforGeeks
在上面的代碼中，我們使用<script>
標(biāo)簽添加了 jQuery 文件。基本上，這就是將 jQuery 添加到我們的網(wǎng)頁所需要做的全部工作?，F(xiàn)在我們可以編寫一些 jQuery 代碼并使用它。
示例 2：在此示例中，我們將編寫一些 jQuery 代碼并查看如何執(zhí)行它。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<script src="jquery-3.6.0.min.js"></script>
<!-- jQuery code starts from here, the
code will change the color of text
when button is pressed -->
<script>
$(document).ready(function () {
$("button").click(function () {
$("p").css("color", "green");
});
});
</script>
<button>
Change the color of the text to Green
</button>
</head>
<body>
<p>GeeksforGeeks</p>
</body>
</html>
輸出：在本例中，我們編寫了更改文本顏色的代碼。要運(yùn)行此代碼，請?jiān)跒g覽器中打開此 HTML 文件。
讓我們開始使用 jQuery CDN 添加 jQuery 的下一個(gè)方法。
這種使用 jQuery 的方法非常簡單，我們不需要下載任何東西，但讓我們簡要介紹一下 CDN。CDN 代表內(nèi)容交付網(wǎng)絡(luò)，基本上，它是一個(gè)全球分布式服務(wù)器組，用于不同類型的 Web 服務(wù)，為互聯(lián)網(wǎng)內(nèi)容提供快速交付。例如，jQuery CDN 擁有與 jQuery 相關(guān)的所有必要信息，任何用戶都可以隨時(shí)從他們的服務(wù)器直接訪問它。這個(gè)方法比較可靠，而且更新很快，為了使用jQuery的CDN或任何其他庫，我們必須連接網(wǎng)絡(luò)?，F(xiàn)在讓我們看看如何使用它。我們必須在我們的 HTML 文件中添加<script>
標(biāo)簽，如下所示。將以下 CDN 代碼粘貼到 HTML 的 head 部分。
jQuery CDN 鏈接：
<script src=”https://code.jquery.com/jquery-3.6.0.min.js”integrity=”sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=”crossorigin=”anonymous”></script>
示例：我們將在此處使用示例 2 和 jQuery CDN 鏈接以查看更改。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<!--jQuery CDN link-->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous">
</script>
<!--jQuery code-->
<script>
$(document).ready(function () {
$("button").click(function () {
$("p").css("color", "green");
});
});
</script>
<button>
Change the color of the text to Green
</button>
</head>
<body>
<p>GeeksforGeeks</p>
</body>
</html>
輸出：
我們已經(jīng)添加了 CDN 代碼，現(xiàn)在我們準(zhǔn)備再次使用 jQuery。所以，這就是我們?nèi)绾问褂靡恍┖唵蔚姆椒▉韴?zhí)行我們的 jQuery。如果大家想了解更多相關(guān)知識，不妨來關(guān)注一下動力節(jié)點(diǎn)的jQuery教程，里面的內(nèi)容詳細(xì)，通俗易懂，適合沒有基礎(chǔ)的小伙伴學(xué)習(xí)，希望對大家能夠有所幫助。
初級 202925
初級 203221
初級 202629
初級 203743
官方微信
官方抖音
Java實(shí)驗(yàn)班
Java就業(yè)班
Java夜校直播班
Java在職加薪班
Java架構(gòu)師班
京公網(wǎng)安備 11030102010736號