溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

javascript跟jquery兩者有區(qū)別嗎

發(fā)布時間：2021-09-07 13:35:40 來源：億速云 閱讀：148 作者：chen 欄目：web開發(fā)

這篇文章主要講解了“javascript跟jquery兩者有區(qū)別嗎”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“javascript跟jquery兩者有區(qū)別嗎”吧！


本教程操作環(huán)境：windows7系統(tǒng)、javascript1.8.5&&jquery1.10.0版、Dell G3電腦。

一、本質(zhì)上的區(qū)別

1.JavaScript 是通過<script></script>標(biāo)簽插入到HTML頁面，可由所有的現(xiàn)代瀏覽器執(zhí)行的一種輕量級的編程語言。

2.JQuery是一個JavaScript函數(shù)庫?；蛘哒f是JavaScript中最流行的一種框架。

使用JQuery首先要在 HTML 代碼最前面加上對 jQuery 庫的引用，比如：

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

庫文件既可以放在本地，也可以直接使用知名公司的 CDN，好處是這些大公司的 CDN 比較流行，用戶訪問你網(wǎng)站之前很可能在訪問別的網(wǎng)站時已經(jīng)緩存在瀏覽器中了，所以能加快網(wǎng)站的打開速度。另外一個好處是顯而易見的，節(jié)省了網(wǎng)站的流量帶寬。例如：

<script src=></script>　　//Google

或者：

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

二、語法上的差異

1.操作元素節(jié)點(diǎn)的方法不同

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");　　　　//是一個數(shù)組，即使只有一個元素，使用時需要用[0]取到第一個再使用
　　document.getElementsByName("na");　　　　　　　//是一個數(shù)組，即使只有一個元素，使用時需要用[0]取到第一個再使用　　
　　document.getElementsByTagName("li");　　　　　//是一個數(shù)組，即使只有一個元素，使用時需要用[0]取到第一個再使用　　
　　document.querySelector("#div");　　　　　　　　//是一個元素 　　
　　document.querySelectorAll("#div li");　　　　//是一個數(shù)組，即使只有一個元素，使用時需要用[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對象都是一個數(shù)組，即使只有一個元素被選中,但是在使用時候不一定需要使用:eq(0)來拿到這一個在使用可以直接使用
    $("#first");　　　　　　　　　　　　
    $(".cls");
    $("li type[name='na']");
    $("li");

    $("#div");
    $("#div li");
</script>

2.操作屬性節(jié)點(diǎn)的方法不同

a.JavaScript使用

getAttribute("屬性名") 、 setAttribute("屬性名","屬性值")

<body>
    <ul>
        <li id=>哈哈</li>
    </ul>
</body>
<script>).getAttribute().setAttribute(,　　document.getElementById("first").removeAttribute("name");
</script>

b.JQuery使用

.attr()傳入一個參數(shù)獲取，傳入兩個參數(shù)設(shè)置

.prop()

prop和attr一樣都可以對文本的屬性進(jìn)行讀取和設(shè)置；

兩者的不同 在讀取checked，disabled，等屬性名=屬性值的屬性時

attr返回屬性值或者undefined，當(dāng)讀取的checked屬性時不會根據(jù)是否選中而改變

prop返回true和false 當(dāng)讀取的checked屬性時會根據(jù)是否選中而改變

也就是說attr要取到的屬性必須是在標(biāo)簽上寫明的屬性，否則不能取到

<body>
    <ul>
        <li id="first">哈哈</li>
    </ul>
</body><script src="js/jquery.js"></script>
<script>
　　$("#first").attr("id");
　　$("#first").attr("name","nafirst");　　$("#first").removeAttr("name");
　　$("#first").prop("id"); 　　$("#first").prop("name","nafirst"); 　　$("#first").removeProp("name");
</script>

3.操作文本節(jié)點(diǎn)的方法不同

a.JavaScript使用

innerHTML：取到或設(shè)置一個節(jié)點(diǎn)的HTML代碼,可以取到css，以文本的形式返回

innerText：取到或設(shè)置一個節(jié)點(diǎn)的HTML代碼，不能取到css

value:取到input[type='text']輸入的文本

<body>
    <ul>
        <li id="serven_times" ><span style="color: chartreuse">嘿嘿</span></li>
        <li id="eight_times" ><span style="color: chartreuse">嘿嘿</span> </li>
    </ul>
     姓名：<input type="text" id="input">
</body>
<script>
    document.getElementById("serven_times").innerHTML;
    document.getElementById("serven_times").innerHTML = "<span style='color: #ff3a29'>呵呵</span>";
    document.getElementById("eight_times").innerText;
    document.getElementById("eight_times").innerText = "啦啦";
    document.getElementById("input").value;
</script>

b.JQuery使用

.html()取到或設(shè)置節(jié)點(diǎn)中的html代碼
.text()取到或設(shè)置節(jié)點(diǎn)中的文本
.val()取到或設(shè)置input的value屬性值

<body>
    <ul>
        <li id="serven_times" ><span style="color: chartreuse">嘿嘿</span></li>
        <li id="eight_times" ><span style="color: chartreuse">嘿嘿</span> </li>
    </ul>
     姓名：<input type="text" id="input">
</body>
<script src="/js/jquery.min.js"></script>
<script>
    $("#serven_times").html();
    $("#serven_times").html("<span style='color: #ff3a29'>呵呵</span>");
    $("#eight_times").text();
    $("#eight_times").text("啦啦");
    $("#input").val();
    $("#input").val("哈哈");
</script>

4.操作css樣式的方法不同

JavaScript:

* 1.使用setAttribute設(shè)置class和style
*   document.getElementById("first").setAttribute("style","color:red");
* 2.使用.className添加一個class選擇器
*   document.getElementById("third").className = "san";
* 3.使用.style.樣式直接修改單個樣式。注意樣式名必須使用駝峰命名法
*   document.getElementById("four_times").style.fontWeight = "900";
* 4.使用.style或.style.cssText添加一串行級樣式：
*   document.getElementById("five_times").style = "color: blue;";//IE不兼容
*   document.getElementById("six_times").style.cssText = "color: yellow;font-size : 60px;";

JQuery:

$("#p2").css("color","yellow");

$("#p2").css({
    "color" : "white",
    "font-weight" : "bold",
    "font-size" : "50px",
});

5.操作層次節(jié)點(diǎn)

JavaScript:

*1.childNodes：獲取當(dāng)前節(jié)點(diǎn)的所有子節(jié)點(diǎn)（包括元素節(jié)點(diǎn)和文本節(jié)點(diǎn)）
*  children：獲取當(dāng)前節(jié)點(diǎn)的所有元素子節(jié)點(diǎn)（不包括文本節(jié)點(diǎn)）
*2.parentNode:獲取當(dāng)前節(jié)點(diǎn)的父節(jié)點(diǎn)
*3.firstChild:獲取第一個元素節(jié)點(diǎn)，包括回車等文本節(jié)點(diǎn)
*  firstElementChild:獲取第一個元素節(jié)點(diǎn)，不包括回車節(jié)點(diǎn)
*  lastChild、lastElementChild 同理
*4.previousSibling：獲取當(dāng)前元素的前一個兄弟節(jié)點(diǎn)
*  previousElementSibling：：獲取當(dāng)前元素的前一個兄弟節(jié)點(diǎn)
*  nextSibling、nextElementSibling

JQuery:

1.提供了大量的選擇器：

  • :first-child

  • :first-of-type1.9+

  • :last-child

  • :last-of-type1.9+

  • :nth-child

  • :nth-last-child()1.9+

  • :nth-last-of-type()1.9+

  • :nth-of-type()1.9+

  • :only-child

  • :only-of-type1.9+

2.除此之外也提供了對應(yīng)的函數(shù)：

  • first()　　　　

  • last()　　

  • children()　　

  • parents()　　

  • parent()　　

  • siblings()

6.給一個節(jié)點(diǎn)綁定事件

JavaScript:

　　使用了Dom0事件模型和Dom2事件模型，具體內(nèi)容見我上一篇博客

JQuery：

　?、?事件綁定的快捷方式

<body>
    <button>按鈕</button>
</body>
<script src="js/jquery-1.10.2.js"></script>
<script>
     $("button:eq(0)").click(function () {
        alert(123);
     });</script>

　　②：使用on進(jìn)行事件綁定

<body>
    <button>按鈕</button>
</body>
<script src="js/jquery-1.10.2.js"></script>
<script>
    //①使用on進(jìn)行單事件的綁定
     $("button:eq(0)").on("click",function () {
        alert(456);
    });
     //②使用on同時給同一對象綁定多個事件
    $("button:eq(0)").on("click dblclick mouseover",function () {
        console.log(123);
    });
    //③使用on，給一個對象綁定多個事件
    $("button:eq(0)").on({
        "click":function () {
            console.log("click");
        },
        "mouseover":function () {
            console.log("mouseover");
        },
        "mouseover":function () {
            console.log("mouseover2");
        }
    });
    //④使用on給回調(diào)函數(shù)傳參，要求是對象格式，傳遞的參數(shù)可以在e.data中取到；jquery中的e只能通過參數(shù)傳進(jìn)去，不能用window.event
    $("button:eq(0)").on("click",{"name":"zhangsan","age":15},function (e) {
        console.log(e);
        console.log(e.data);
        console.log(e.data.name);
        console.log(e.data.age);
        console.log(window.event);//js中的事件因子

    });
    
</script>

7.JQuery的文檔就緒函數(shù)和window.onload的區(qū)別

*①.window.onload必須等待網(wǎng)頁資源（包括圖片等）全部加載完成后，才能執(zhí)行；
*      而文檔就緒函數(shù)只需要等到網(wǎng)頁DOM結(jié)構(gòu)加載完成后，即可執(zhí)行
*②.window.onload在一個頁面中，只能寫一次，寫多次會被最后一次覆蓋
*      而文檔就緒函數(shù)在一個頁面中可以有N個

三、JavaScript對象和JQuery對象的方法不能混用。

1.JavaScript對象和JQuery對象

① 使用$("")取到的節(jié)點(diǎn)為JQuery對象，只能調(diào)用JQuery方法，不能調(diào)用JavaScript方法；
*      $("#p").click(function(){})√
*      $("#p").onclick = function(){}× 使用JQuery對象調(diào)用JavaScript方法
*
*      同理，使用、document.getElement系列函數(shù)取到的對象為JavaScript對象，也不能調(diào)用JQery函數(shù)

2.JavaScript對象和JQuery對象互轉(zhuǎn)

*① JQuery --->  JavaScript :使用get(index)或者[index]選中的就是JavaScript對象
*  $("p").get(0).onclick = function(){}
*  $("p").[0].onclick = function(){}
* ② JavaScript ---> JQuery :使用$()包裹JavaScript對象        (我們發(fā)現(xiàn)JQuery不管獲得幾個對象都是一個數(shù)組，可以直接給整個數(shù)組都添加某一事件)
*  var p = document.getElementById("p");
*  $(p).click(function(){});

感謝各位的閱讀，以上就是“javascript跟jquery兩者有區(qū)別嗎”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對javascript跟jquery兩者有區(qū)別嗎這一問題有了更深刻的體會，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識點(diǎn)的文章，歡迎關(guān)注！

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手