目次
jQueryオブジェクト
jQueryオブジェクト：jQueryライブラリの独自のメソッドを介してページのDOM要素を取得するオブジェクトはjQueryオブジェクトと呼ばれ、jQueryオブジェクトを保存する変数は通常$で始まります：
var $ userName = $（ "＃user_name"）;
$ userName.val（ "Tom"）;
jQueryオブジェクトはjQueryに固有です。オブジェクトはDOMオブジェクトのメソッドを使用できません。同じDOMオブジェクトはjQueryのメソッドを使用できません。
jQueryオブジェクトからDOMオブジェクトへ
1. ** DOMオブジェクト：**はJavaScriptのネイティブHTML要素オブジェクトです。
jQueryオブジェクトは配列オブジェクトであり、対応するDOMオブジェクトはjQueryオブジェクト[インデックス]から取得できます。
コード例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
</head>
<body>
<input type="text" name="name" id="name" value="admin" />
<script>
/*var element = document.getElementById("name");
console.log(element.value);*/
console.log($("#name").val());
console.log($("#name"));//jQuery对象
console.log($("#name")[0]);//jQuery对象对应的JavaScript原生HTML对象
/*element = $("#name").get(0);//等价于$("#name")[0]*/
console.log(document.getElementById("name"));//JavaScript原生HTML对象
console.log($(document.getElementById("name")));//jQuery对象
</script>
</body>
</html
結果は次のことを示しています。
2.対応するDOMオブジェクトは、jQueryオブジェクトのget（index）メソッドを呼び出すことで取得できます。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
</head>
<body>
<input type="text" name="name" id="name" value="admin" />
<script>
console.log($("#name")[0]);//jQuery对象对应的JavaScript原生HTML对象
var element = $("#name").get(0);//等价于$("#name")[0]
console.log(element);
</script>
</body>
</html>
結果は最初の方法と同じです
DOMオブジェクトからjQueryオブジェクトへ
1. DOMオブジェクトは$（DOMオブジェクト）を介してjQueryオブジェクトに変換できます
<script>
$("#user_name").val("Tom");
$(document.getElementById("user_name")).val("Tom");
</script><script>
$("#user_name").val("Tom");
$(document.getElementById("user_name")).val("Tom");
console.log($("#user_name"));
console.log($("#user_name").val("Tom"));
console.log($(document.getElementById("user_name")).val("Tom"));
</script>
結果表示：
