02-jQuery的对象分类

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>
posted @   taotooler  阅读(6)  评论(0)  编辑  收藏  举报  
点击右上角即可分享
微信分享提示