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=" change html "	$("#jid").html(" change html ")	设置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()	获取当前节点的下一个兄弟节点