首頁 > 文章 > web前端 > jquery和javascript的差別有哪些

jquery和javascript的差別有哪些

coldplay.xixi原創: 2021-04-09 14:30:366285瀏覽

jquery和javascript的差別：1、js是透過【3f1c4e4b6b16bbbd69b2ee476dc4f83a】標籤插入HTML頁面，而JQuery是JavaScript函數庫；2、js使用getElement系列，而JQuery使用【$()】包裹選擇器。

本教學操作環境：windows7系統、javascript1.8.5版，DELL G3電腦。

jquery和javascript的區別：

一、本質上的差異

1.JavaScript 是透過79ceee2a08ef528e8bd31f17ab8ef86a標籤插入到HTML頁面，可由所有的現代瀏覽器執行的一種輕量級的程式語言。

2.JQuery是一個JavaScript函數函式庫。或者說是JavaScript中最受歡迎的一種框架。

使用JQuery首先要在HTML 程式碼最前面加上jQuery 函式庫的引用，例如：

<script src="js/jquery.min.js"></script>

函式庫檔案既可以放在本地，也可以直接使用知名公司的CDN，好處是這些大公司的CDN 比較流行，用戶造訪你網站之前很可能在造訪別的網站時已經快取在瀏覽器中了，所以能加快網站的開啟速度。另一個好處是顯而易見的，節省了網站的流量頻寬。例如：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>　　//Google

或：

<script src="http://code.jquery.com/jquery-1.6.min.js"></script> 　　//jQuery 官方

二、語法上的差異

操作元素節點

a. JavaScript使用

getElement系列、query系列

<body>
    <ul>
        <li id="first">哈哈</li>
        <li class="cls" name ="na">啦啦</li>
        <li class="cls">呵呵</li>
        <li name ="na">嘿嘿</li>
    </ul>
    <div id="div">
        <ul>
            <li class="cls">呵呵</li>
            <li>嘿嘿</li>
        </ul>
    </div>
</body>
<script>
　　document.getElementById("first");　　　　　　　　//是一个元素
　　document.getElementsByClassName("cls");　　　　//是一个数组，即使只有一个元素，使用时需要用[0]取到第一个再使用
　　document.getElementsByName("na");　　　　　　　//是一个数组，即使只有一个元素，使用时需要用[0]取到第一个再使用
　　document.getElementsByTagName("li");　　　　　//是一个数组，即使只有一个元素，使用时需要用[0]取到第一个再使用
　　document.querySelector("#div");　　　　　　　　//是一个元素 
　　document.querySelectorAll("#div li");　　　　//是一个数组，即使只有一个元素，使用时需要用[0]取到第一个再使用
</script>

b.JQuery使用

大量的選擇器同時使用$()包裹選擇器

<body>
    <ul>
        <li id="first">哈哈</li>
        <li class="cls" name ="na">啦啦</li>
        <li class="cls">呵呵</li>
        <li name ="na">嘿嘿</li>
    </ul>
    <div id="div">
        <ul>
            <li class="cls">呵呵</li>
            <li>嘿嘿</li>
        </ul>
    </div>
</body>
<script src="http://code.jquery.com/jquery-1.6.min.js"></script>
<script>
　　//使用JQuery取到的是jquery对象都是一个数组，即使只有一个元素被选中,但是在使用时候不一定需要使用:eq(0)来拿到这一个在使用可以直接使用
    $("#first");　　　　　　　　　　　　
    $(".cls");
    $("li type[name=&#39;na&#39;]");
    $("li");
    $("#div");
    $("#div li");
</script>

相關免費學習推薦：javascript學習教學

以上是jquery和javascript的差別有哪些的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：javascript正規表示式如何替換下一篇：javascript正規表示式如何替換

看更多