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()
現在のノードの次の兄弟ノードを取得