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 @ 2023-01-19 10:10 taotooler 阅读(4) 评论(0) 编辑收藏举报来源

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· 06-jquery函数

· 03-jquery基本选择器

· jQuery--DOM对象与jQuery对象

· 在JavaScript中,DOM对象与jQuery对象的区别与转换

· DOM对象和jJQuery对象

阅读排行：
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型，支持深度思考和联网搜索！
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· ollama系列1：轻松3步本地部署deepseek，普通电脑可用
· 按钮权限的设计及实现
· 【杂谈】分布式事务——高大上的无用知识？

公告

昵称： taotooler
园龄： 5年3个月
粉丝： 2
关注： 0

+加关注

2025年3月

日

一

二

三

四

五

六

taotooler

02-jQuery的对象分类

2.1

.1.1dom对象转为jquery对象。

举个栗子：

.1.2jquery对象转换为dom对象。

举个栗子：

公告

搜索

常用链接

我的标签

随笔分类 (21)

随笔档案 (78)

阅读排行榜

	<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>

	<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)