大部分我们写的都是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() | 获取当前节点的下一个兄弟节点 |