jquery和javascript的差別有哪些-js教程-PHP中文網

jquery和javascript的差別有哪些

coldplay.xixi

發布： 2023-01-04 09:35:41

原創

6302 人瀏覽過

jquery和javascript的差別：1、js是透過【<script>】標籤插入HTML頁面，而JQuery是JavaScript函數庫；2、js使用getElement系列，而JQuery使用【$()】包裹選擇器。 </p></blockquote> <p><img src="https://img.php.cn/upload/article/202104/09/2021040914272277637.jpg" alt="jquery和javascript的差別有哪些" ></p> <p>本教學操作環境：windows7系統、javascript1.8.5版，DELL G3電腦。 </p> <p><strong>jquery和javascript的區別：</strong></p> <p><strong>一、本質上的差異</strong></p> <p>1.JavaScript 是透過<script&gt ;</script>標籤插入到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中文網其他相關文章！