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  阅读(4)  评论(0编辑  收藏  举报  
相关博文:
阅读排行:
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· ollama系列1:轻松3步本地部署deepseek,普通电脑可用
· 按钮权限的设计及实现
· 【杂谈】分布式事务——高大上的无用知识?
点击右上角即可分享
微信分享提示