table of Contents
jQuery object
jQuery object: The object that obtains the DOM elements of the page through the jQuery library's own method is called the jQuery object , and the variable that saves the jQuery object usually starts with $ : var $userName = $("#user_name"); $userName.val("Tom" );
The jQuery object is unique to jQuery. The object cannot use any method in the DOM object; the same DOM object cannot use any method in jQuery.
jQuery object to DOM object
1. **DOM object: ** is the native HTML element object in JavaScript.
The jQuery object is an array object, and the corresponding DOM object can be obtained through the jQuery object [index]:
Code example:
<!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
The results show that:
2. The corresponding DOM object can be obtained by calling the get(index) method of the jQuery object
<!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>
The result is the same as the first method
DOM object to jQuery object
1. The DOM object can be converted into a jQuery object through $(DOM object)
<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>
Result display:
