站長資訊網(wǎng)
區(qū)別：1、JavaScript是一種輕量級的編程語言，而JQuery是一個(gè)JavaScript函數(shù)庫；2、js是利用DOM方法創(chuàng)建元素節(jié)點(diǎn)，jQuery使用$就可以直接創(chuàng)建DOM元素；3、操作元素節(jié)點(diǎn)的方法不同；4、操作屬性節(jié)點(diǎn)的方法不同。
本教程操作環(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是一個(gè)JavaScript函數(shù)庫。或者說是JavaScript中最流行的一種框架。
使用JQuery首先要在 HTML 代碼最前面加上對 jQuery 庫的引用，比如：
<script src="js/jquery.min.js"></script>
庫文件既可以放在本地，也可以直接使用知名公司的 CDN，好處是這些大公司的 CDN 比較流行，用戶訪問你網(wǎng)站之前很可能在訪問別的網(wǎng)站時(shí)已經(jīng)緩存在瀏覽器中了，所以能加快網(wǎng)站的打開速度。另外一個(gè)好處是顯而易見的，節(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"); //是一個(gè)元素 document.getElementsByClassName("cls"); //是一個(gè)數(shù)組，即使只有一個(gè)元素，使用時(shí)需要用[0]取到第一個(gè)再使用 document.getElementsByName("na"); //是一個(gè)數(shù)組，即使只有一個(gè)元素，使用時(shí)需要用[0]取到第一個(gè)再使用 document.getElementsByTagName("li"); //是一個(gè)數(shù)組，即使只有一個(gè)元素，使用時(shí)需要用[0]取到第一個(gè)再使用 document.querySelector("#div"); //是一個(gè)元素 document.querySelectorAll("#div li"); //是一個(gè)數(shù)組，即使只有一個(gè)元素，使用時(shí)需要用[0]取到第一個(gè)再使用 </script
b.JQuery使用
大量的選擇器同時(shí)使用$()包裹選擇器
<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對象都是一個(gè)數(shù)組，即使只有一個(gè)元素被選中,但是在使用時(shí)候不一定需要使用:eq(0)來拿到這一個(gè)在使用可以直接使用 $("#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()傳入一個(gè)參數(shù)獲取，傳入兩個(gè)參數(shù)設(shè)置
.prop()
prop和attr一樣都可以對文本的屬性進(jìn)行讀取和設(shè)置；
兩者的不同 在讀取checked，disabled，等屬性名=屬性值的屬性時(shí)
attr返回屬性值或者undefined，當(dāng)讀取的checked屬性時(shí)不會(huì)根據(jù)是否選中而改變
prop返回true和false 當(dāng)讀取的checked屬性時(shí)會(huì)根據(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è)置一個(gè)節(jié)點(diǎn)的HTML代碼,可以取到css，以文本的形式返回
innerText：取到或設(shè)置一個(gè)節(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添加一個(gè)class選擇器 * document.getElementById("third").className = "san"; * 3.使用.style.樣式直接修改單個(gè)樣式。注意樣式名必須使用駝峰命名法 * 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:獲取第一個(gè)元素節(jié)點(diǎn)，包括回車等文本節(jié)點(diǎn) * firstElementChild:獲取第一個(gè)元素節(jié)點(diǎn)，不包括回車節(jié)點(diǎn) * lastChild、lastElementChild 同理 *4.previousSibling：獲取當(dāng)前元素的前一個(gè)兄弟節(jié)點(diǎn) * previousElementSibling：：獲取當(dāng)前元素的前一個(gè)兄弟節(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.給一個(gè)節(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同時(shí)給同一對象綁定多個(gè)事件 $("button:eq(0)").on("click dblclick mouseover",function () { console.log(123); }); //③使用on，給一個(gè)對象綁定多個(gè)事件 $("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在一個(gè)頁面中，只能寫一次，寫多次會(huì)被最后一次覆蓋 * 而文檔就緒函數(shù)在一個(gè)頁面中可以有N個(gè)
三、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不管獲得幾個(gè)對象都是一個(gè)數(shù)組，可以直接給整個(gè)數(shù)組都添加某一事件) * var p = document.getElementById("p"); * $(p).click(function(){});
【推薦學(xué)習(xí)：javascript高級教程】
