jquery怎麼使用

jquery的使用方法：先透過CDN載入或本機載入檔案的方式來載入jquery檔案；然後透過jquery檔案來執行jQuery程式碼即可。

本文操作環境：Windows7系統、Dell G3電腦、jquery3.2.1版。

怎麼使用jquery？本篇文章跟大家介紹什麼是jquery？為什麼要使用jquery？如何使用jquery？讓大家了解jquery的使用方法，希望對你們有幫助。

什麼是jQuery？

jQuery不是一種語言，但它是一個編寫良好的JavaScript程式碼，它是一個快速而簡潔的JavaScript庫，簡化了HTML文檔遍歷，事件處理，動畫和Ajax交互，以實現快速Web開發。

為什麼選擇jQuery？

jQuery是一個非常緊湊且編寫良好的JavaScript程式碼，它透過編寫非常少量的程式碼使它們能夠實現關鍵的UI功能，從而提高了開發人員的工作效率。

jQuery的優點是：

1、不需要學習使用jQuery的全新語法，要了解簡單的JavaScript語法就夠了。

2、程式碼簡單明了，無需寫多行程式碼即可實現複雜功能。

3、有助於提升應用程式的效能。

4、它有助於開發大多數瀏覽器相容的網頁。

5、它有助於實現與UI相關的關鍵功能，而無需編寫數百行程式碼。

怎麼使用jQuery？

#1、載入jQuery檔案

jQuery通常會以單一JavaScript檔案出現，其中包含jQuery開箱即用的所有內容。它可以使用以下方式包含在網頁中：

1）、載入本機jQuery檔案

首先需要下載jQuery檔案到本機，jQuery JavaScript檔案可從jQuery 官方網站下載，網址：http://www.jquery.com。

然後是載入jQuery檔案

<script type="text/javascript" src="jQuery-1.4.1-min.js"></script>

2）、從CDN載入jQuery

什麼是CDN？

CDN代表Content  Distribution Network，也稱為Content  Delivery  Network是一組放置在與包含資料檔案的副本網路中存取資料以最大化頻寬連接的各個點的電腦。在CDN中，客戶端存取更靠近客戶端位置的資料副本，而不是從特定伺服器存取的所有客戶端。這有助於實現客戶端更好的資料檢索效能。

有兩個主要的CDN可用來託管jQuery檔案：

#a、從Microsoft AJAX CDN載入jQuery

可以從Microsoft AJAX CDN載入jQuery檔。更多細節可在此處獲得。您需要在頁面中保留以下標記。

<script type="text/javascript" language="Javascript"  src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.4.1.min.js"></script>

b、從Google Libraries API載入jQuery

可以從Google CDN載入jQuery檔案。您需要在頁面中保留以下標記。

<script type="text/javascript" language="Javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"> </script>

從CDN載入jQuery的好處：

#1、由於無需下載jQuery文件，因此頁面載入速度更快

2、由於未從伺服器載入jQuery文件，因此節省了頻寬

3、可擴展，通常CDN將這些文件放在位於世界不同地理位置的伺服器上，以便加載速度更快，因此無論用戶在何處瀏覽頁面，您的應用程式都可以正常運作。

註：

一般情況下從CDN載入jQuery和從本地載入jQuery文件，這兩種方法都要寫上，防止用於載入jQuery文件的CDN不可用。因此，可以寫下以下程式碼行：

<!-- START - jQuery Reference -->
<script type="text/javascript" language="Javascript" 

    src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.4.1.min.js"></script>
    <script type=&#39;text/javascript&#39;>//<![CDATA[
        if (typeof jQuery == &#39;undefined&#39;) {
            document.write(unescape("%3Cscript 
    src=&#39;/Script/jquery-1.4.1.min.js&#39; type=&#39;text/javascript&#39; %3E%3C/script%3E"));
}//]]>
</script>
<!-- END - jQuery Reference -->

2、執行jQuery程式碼

我們可能有兩種方法來執行jQuery程式碼。

1、當頁面載入時，執行jQuery程式碼：

<script language="javascript" type="text/javascript">
$(function () {
$("#div1").css("border", "2px solid green");
});
</script>

或：

<script language="javascript" type="text/javascript">
$("#div1").css("border", "2px solid green");
</script>

以這種方式執行jQuery程式碼的好處是它不會等待整個頁面完全加載，因此如果您希望用戶在加載相應元素後立即查看效果，您可以使用它。

但缺點是如果jQuery必須執行的元素沒有加載，那麼它將會出錯或你不會得到所需的結果; 因此，在使用這種執行jQuery程式碼的方式時，您必須確保首先載入要使用jQuery的元素（您可以將jQuery程式碼放在HTML元素之後）。

2、僅在完整的DOM物件（已載入完整頁面）時執行jQuery。此時必須將程式碼包裝在.ready函數中。

<script language="javascript" type="text/javascript">
$(document).ready(function () {
$("#div1").css("border", "2px solid green");
});
</script>

这是执行jQuery的更好，更安全的方法。这样可以确保只有在浏览器中加载完整页面时才会执行jQuery代码，因此可以放心，用户不会在页面上看到任何不需要的行为。

总结：以上就是本篇文章的全部内容，希望能对大家的学习有所帮助。

以上是jquery怎麼使用的詳細內容。更多資訊請關注PHP中文網其他相關文章！