2.1
在文件中存在两种对象；
dom对象：使用js代码获取，创建对象。html中的对象都是dom对象。
jQuery对象：使用jQuery获取的对象。
使用两种对象的目的：
需要dom对象的函数或者属性，以及使用jquery中提供的函数和属性。
dom对象和jquery对象可以相互转换。
.1.1dom对象转为jquery对象。
语法：$(dom对象）得到的是一个jquery对象，可以调用jquery中提供的函数
<input type="text" id="t1" />
//通过js函数获取dom对象
var dom=document.getElemenById("t1");
//把dom转为jquery
var jqueryObject.val();
//获取dom对象的value属性值
注：为了区分dom对象和jQuery对象，可以在jquery对象变量名上加一个$,如：$box
举个栗子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>dom对象转为jquery对象</title>
<script type="text/javascript" src="js/jquery-3.6.3.js"></script>
<script type="text/javascript">
function btnClick(){
//获取对象
var obj=document.getElementById("btn");
//转换为jquery类型的对象
var $jobj=$(obj);
//$jobj便是一个jquery对象
//调用jquery的函数
alert($jobj.val());//获取value属性的值
}
</script>
</head>
<body>
<input type="button" id="btn" value="按钮" onclick="btnClick()" />
</body>
</html>
.1.2jquery对象转换为dom对象。
语法：jquery对象是一个数组，数组成员是dom对象。使用[下标]或get(下标)
<input type="text" id="txt1" />
//使用jquery的方式表示这个dom对象
//$("#txt1"):获取id是txt1的dom对象。
var obj =$("#txt1");//obj是一个jquery对象，是一个包含一个成员dom数组。obj[0]就是dom对象
var dom=obj[0]; 或者 obj.get(0)
//使用dom对象的函数或者属性
alert(dom.value)
举个栗子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="js/jquery-3.6.3.js"></script>
<script type="text/javascript">
function btnClick(){
//使用jquery语法，获取jquery对象；
var obj =$("#txt1");
//从数值中获取成员，成员是dom对象
var dom=obj[0];
//var dom=obj.get(0);此方法也是可以的
//调用dom的函数或属性
//alert(dom.value);
var num=dom.value;
dom.value=num*num;
}
</script>
</head>
<body>
<input type="button"id="btn" value="计算平方" onclick="btnClick()"/>
<br />
<input type="text" id="txt1" value="请输入整数"/>
</body>
</html>
评论区