JavaScript 與 jQuery 的區別
阿新 • • 發佈：2018-12-17
大部分我們寫的都是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() | 獲取當前節點的下一個兄弟節點 |