專(zhuān)注Java教育14年
全國(guó)咨詢/投訴熱線：400-8080-105
更新時(shí)間：2021-12-02 10:09:06 來(lái)源：動(dòng)力節(jié)點(diǎn) 瀏覽1152次
jQuery 是一個(gè)開(kāi)源功能豐富的 Javascript 庫(kù)，旨在簡(jiǎn)化 HTML DOM 樹(shù)遍歷和操作、事件處理和 CSS 動(dòng)畫(huà)。它因其重量輕、速度快、體積小等特點(diǎn)而廣受歡迎，使其更易于使用。使用 jQuery 的目的是讓 javascript 代碼在網(wǎng)站上易于執(zhí)行，因?yàn)?jQuery 將用 javascript 編寫(xiě)的多行代碼包裝成一個(gè)可以用一行代碼調(diào)用的方法。出于這個(gè)原因，很多需要 javascript 的常見(jiàn)任務(wù)都可以由 jQuery 完成。
在本文中，我們將看到如何為我們的網(wǎng)頁(yè)執(zhí)行 jQuery 代碼。執(zhí)行 jQuery 代碼非常簡(jiǎn)單，只需要處理幾個(gè)步驟，然后我們就可以開(kāi)始了。在跳轉(zhuǎn)到主要主題之前，我們將首先了解如何在我們的網(wǎng)頁(yè)中添加和使用 jQuery。有兩種方法可以將 jQuery 添加到我們的網(wǎng)頁(yè)/網(wǎng)站：
從官方下載jQuery庫(kù)網(wǎng)
在線使用 jQuery CDN 鏈接
讓我們開(kāi)始我們的第一種方法，即從網(wǎng)站下載庫(kù)。
下載庫(kù)。我們需要下載開(kāi)發(fā)版本以進(jìn)行開(kāi)發(fā)和測(cè)試。其余版本用于生產(chǎn)目的。單擊下載后，它會(huì)將您帶到包含可用鏈接的頁(yè)面，單擊所需鏈接，然后右鍵單擊該頁(yè)面并保存文件。請(qǐng)注意，我們使用的文件是一個(gè) javascript 文件，我們可以通過(guò)查看它的擴(kuò)展名來(lái)檢查它。現(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)頁(yè)所需要做的全部工作。現(xiàn)在我們可以編寫(xiě)一些 jQuery 代碼并使用它。
示例 2：在此示例中，我們將編寫(xiě)一些 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>
輸出：在本例中，我們編寫(xiě)了更改文本顏色的代碼。要運(yùn)行此代碼，請(qǐng)?jiān)跒g覽器中打開(kāi)此 HTML 文件。
讓我們開(kāi)始使用 jQuery CDN 添加 jQuery 的下一個(gè)方法。
這種使用 jQuery 的方法非常簡(jiǎn)單，我們不需要下載任何東西，但讓我們簡(jiǎn)要介紹一下 CDN。CDN 代表內(nèi)容交付網(wǎng)絡(luò)，基本上，它是一個(gè)全球分布式服務(wù)器組，用于不同類(lèi)型的 Web 服務(wù)，為互聯(lián)網(wǎng)內(nèi)容提供快速交付。例如，jQuery CDN 擁有與 jQuery 相關(guān)的所有必要信息，任何用戶都可以隨時(shí)從他們的服務(wù)器直接訪問(wèn)它。這個(gè)方法比較可靠，而且更新很快，為了使用jQuery的CDN或任何其他庫(kù)，我們必須連接網(wǎng)絡(luò)。現(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)绾问褂靡恍┖?jiǎn)單的方法來(lái)執(zhí)行我們的 jQuery。如果大家想了解更多相關(guān)知識(shí)，不妨來(lái)關(guān)注一下動(dòng)力節(jié)點(diǎn)的jQuery教程，里面的內(nèi)容詳細(xì)，通俗易懂，適合沒(méi)有基礎(chǔ)的小伙伴學(xué)習(xí)，希望對(duì)大家能夠有所幫助。
Java實(shí)驗(yàn)班
0基礎(chǔ) 0學(xué)費(fèi) 15天面授
Java就業(yè)班
有基礎(chǔ) 直達(dá)就業(yè)
Java夜校直播班
業(yè)余時(shí)間 高薪轉(zhuǎn)行
Java在職加薪班
工作1~3年，加薪神器
Java架構(gòu)師班
工作3~5年，晉升架構(gòu)
提交申請(qǐng)后，顧問(wèn)老師會(huì)電話與您溝通安排學(xué)習(xí)
京公網(wǎng)安備 11030102010736號(hào)