jquery-210811-03—dom对象和jquery对象相互转换
dom对象和jquery介绍
用 JavaScript 语法创建的对象叫做 JavaScript 对象，也叫做dom对象，js对象，
**JavaScript对象只能调用JavaScript 对象的 API。**
var obj = document.getElementById("txt01"); ---> obj就是dom对象，也叫js对象。
用 JQuery 语法创建的对象叫做 JQuery 对象,
**jQuery 对象只能调用 jQuery 对象的 API。**
jQuery 对象是一个数组。在数组中存放本次定位的 DOM 对象。
var obj = ${"#txt01"}; ---> obj就是jquery对象，
它是一个数组，现在数组中就一个值。
JQuery对象与 JavaScript对象是可以互相转化的，
由于 Jquery 用起来更加方便，
我们都是将 JavaScript 对象转化成 Jquery 对象。
dom对象转为jquery对象语法：
${dom对象}
jquery对象转为dom对象语法：
从数组中获取第一个对象，第一个对象就是dom对象，
使用[0] 或者 get{0} （下标的方法）
jqurey-test-04-01.html（dom对象转为jquery对象）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>dom对象转为jquery对象</title>
<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
<script type="text/javascript">
function btnClick(){
var dom_obj = document.getElementById("btn");
var $jquery_obj = $(dom_obj);
alert($jquery_obj.val());
}
</script>
</head>
<body>
<input type="button" id="btn" value="btn" onclick="btnClick()" />
</body>
</html>
jqurey-test-04-02.html（jquery对象转为dom对象）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jquery对象转为dom对象</title>
<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
<script type="text/javascript">
function btnClick(){
var dom_obj = $("#txt").get(0);
var count = dom_obj.value;
dom_obj.value = count * count;
}
</script>
</head>
<body>
<input type="text" id="txt" value="填写整数" /><br />
<input type="button" id="btn" value="点击计算" onclick="btnClick()" />
</body>
</html>
|