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>
本文来自博客园,作者:taotooler,转载请注明原文链接:https://www.cnblogs.com/taolo/p/17225856.html
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· ollama系列1:轻松3步本地部署deepseek,普通电脑可用
· 按钮权限的设计及实现
· 【杂谈】分布式事务——高大上的无用知识?