JavaScript 與 jQuery 的區別

大部分我們寫的都是jQuery，因爲簡單。這裏主要是做一個對比，認清兩者的區別和聯繫

獲取DOM

JavaScript	jQuery	-
document.getElementById(“id”)	$("#id")	通過元素的id屬性獲取指定的元素
document.getElementByClassName(“cname”)	$(".cname")	獲取所有指定類名的元素
document.getElementsByName	$(“select[name=‘Type’]”)	獲取所有指定屬性的元素
document.getElementsByTagName	$(“a”)	獲取所有指定標籤的元素
document.querySelector("#id")	$("#id")	根據選擇器規則返回第一個符合要求的元素
document.querySelectorAll(“a”)	$(“a”)	根據選擇器規則返回所有符合要求的元素

屬性操作

JavaScript	jQuery	-
document.getElementById("jid").getAttribute("name")	$("#jid").attr("name")	獲取ID爲"jid"的元素的name屬性
	$("#jid").prop("name")
document.getElementById("jid").setAttribute("name","newname")	$("#jid").attr("name","newname")	設置ID爲"jid"的元素的name屬性
	$("#jid").prop("name","newname")
document.getElementById("jid").removeAttribute("name")	$("#jid").removeAttr("name")	刪除ID爲"jid"的元素的name屬性
	$("#jid").removeProp("name")

文本操作

JavaScript	jQuery	-
document.getElementById(“jid”).innerHTML	$("#jid").html()	獲取ID爲"jid"的元素的html代碼
document.getElementById(“jid”).innerHTML="<p>change html<p>"	$("#jid").html("<p>change html<p>")	設置ID爲"jid"的元素的html代碼
document.getElementById(“jid”).innerText	$("#jid").text()	獲取ID爲"jid"的元素的文本
document.getElementById(“jid”).innerText="change text"	$("#jid").text("change text")	設置ID爲"jid"的元素的文本
document.getElementById(“jid”).value	$("#jid").val()	獲取ID爲"jid"的元素的value值
document.getElementById(“jid”).value="123"	$("#jid").val("123")	設置ID爲"jid"的元素的value值

節點操作

JavaScript	jQuery	-
document.getElementById(“jid”).parentNode	$("#jid").parent()	獲取當前節點的父節點
document.getElementById(“jid”).childNodes	$("#jid").children()	獲取當前節點的所有子節點
document.getElementById(“jid”).firstChild	$("#jid").children(‘first’)	獲取當前節點的第一個子節點
document.getElementById(“jid”).lastChild	$("#jid").children(‘last’)	獲取當前節點的最後一個子節點
document.getElementById(“jid”).previousSibling	$("#jid").prev()	獲取當前節點的上一個兄弟節點
document.getElementById(“jid”).nextSibling	$("#jid").next()	獲取當前節點的下一個兄弟節點