溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了“javascript跟jquery兩者有區別嗎”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“javascript跟jquery兩者有區別嗎”吧！
本教程操作環境：windows7系統、javascript1.8.5&&jquery1.10.0版、Dell G3電腦。
1.JavaScript 是通過<script></script>標簽插入到HTML頁面，可由所有的現代瀏覽器執行的一種輕量級的編程語言。
2.JQuery是一個JavaScript函數庫。或者說是JavaScript中最流行的一種框架。
使用JQuery首先要在 HTML 代碼最前面加上對 jQuery 庫的引用，比如：
<script src="js/jquery.min.js"></script>
庫文件既可以放在本地，也可以直接使用知名公司的 CDN，好處是這些大公司的 CDN 比較流行，用戶訪問你網站之前很可能在訪問別的網站時已經緩存在瀏覽器中了，所以能加快網站的打開速度。另外一個好處是顯而易見的，節省了網站的流量帶寬。例如：
<script src=></script> //Google 或者： <script src="http://code.jquery.com/jquery-1.6.min.js"></script> //jQuery 官方
1.操作元素節點的方法不同
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]取到第一個再使用
</scriptb.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='na']");
$("li");
$("#div");
$("#div li");
</script>2.操作屬性節點的方法不同
a.JavaScript使用
getAttribute("屬性名") 、 setAttribute("屬性名","屬性值")
<body>
<ul>
<li id=>哈哈</li>
</ul>
</body>
<script>).getAttribute().setAttribute(, document.getElementById("first").removeAttribute("name");
</script>b.JQuery使用
.attr()傳入一個參數獲取，傳入兩個參數設置
.prop()
prop和attr一樣都可以對文本的屬性進行讀取和設置；
兩者的不同 在讀取checked，disabled，等屬性名=屬性值的屬性時
attr返回屬性值或者undefined，當讀取的checked屬性時不會根據是否選中而改變
prop返回true和false 當讀取的checked屬性時會根據是否選中而改變
也就是說attr要取到的屬性必須是在標簽上寫明的屬性，否則不能取到
<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.操作文本節點的方法不同
a.JavaScript使用
innerHTML：取到或設置一個節點的HTML代碼,可以取到css，以文本的形式返回
innerText：取到或設置一個節點的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()取到或設置節點中的html代碼
.text()取到或設置節點中的文本
.val()取到或設置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設置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.操作層次節點
JavaScript:
*1.childNodes：獲取當前節點的所有子節點（包括元素節點和文本節點） * children：獲取當前節點的所有元素子節點（不包括文本節點） *2.parentNode:獲取當前節點的父節點 *3.firstChild:獲取第一個元素節點，包括回車等文本節點 * firstElementChild:獲取第一個元素節點，不包括回車節點 * lastChild、lastElementChild 同理 *4.previousSibling：獲取當前元素的前一個兄弟節點 * previousElementSibling：：獲取當前元素的前一個兄弟節點 * 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.除此之外也提供了對應的函數：
first()
last()
children()
parents()
parent()
siblings()
6.給一個節點綁定事件
JavaScript:
使用了Dom0事件模型和Dom2事件模型，具體內容見我上一篇博客
JQuery：
①.事件綁定的快捷方式
<body>
<button>按鈕</button>
</body>
<script src="js/jquery-1.10.2.js"></script>
<script>
$("button:eq(0)").click(function () {
alert(123);
});</script>②：使用on進行事件綁定
<body>
<button>按鈕</button>
</body>
<script src="js/jquery-1.10.2.js"></script>
<script>
//①使用on進行單事件的綁定
$("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給回調函數傳參，要求是對象格式，傳遞的參數可以在e.data中取到；jquery中的e只能通過參數傳進去，不能用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的文檔就緒函數和window.onload的區別
*①.window.onload必須等待網頁資源（包括圖片等）全部加載完成后，才能執行； * 而文檔就緒函數只需要等到網頁DOM結構加載完成后，即可執行 *②.window.onload在一個頁面中，只能寫一次，寫多次會被最后一次覆蓋 * 而文檔就緒函數在一個頁面中可以有N個
1.JavaScript對象和JQuery對象
① 使用$("")取到的節點為JQuery對象，只能調用JQuery方法，不能調用JavaScript方法；
* $("#p").click(function(){})√
* $("#p").onclick = function(){}× 使用JQuery對象調用JavaScript方法
*
* 同理，使用、document.getElement系列函數取到的對象為JavaScript對象，也不能調用JQery函數2.JavaScript對象和JQuery對象互轉
*① JQuery ---> JavaScript :使用get(index)或者[index]選中的就是JavaScript對象
* $("p").get(0).onclick = function(){}
* $("p").[0].onclick = function(){}
* ② JavaScript ---> JQuery :使用$()包裹JavaScript對象 (我們發現JQuery不管獲得幾個對象都是一個數組，可以直接給整個數組都添加某一事件)
* var p = document.getElementById("p");
* $(p).click(function(){});感謝各位的閱讀，以上就是“javascript跟jquery兩者有區別嗎”的內容了，經過本文的學習后，相信大家對javascript跟jquery兩者有區別嗎這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
