jquery对象和javascript对象即DOM对象相互转换
jQuery 对象是通过 jQuery 包装DOM 对象后产生的对象。jQuery 对象是 jQuery 独有的,其可以使用 jQuery 里的方法,但是不能使用 DOM 的方法;例如: $("#img").attr("src","test.jpg"); 这里的 $("#img")就是 jQuery 对象。
DOM对象就是Javascript 固有的一些对象操作。DOM 对象能使用Javascript 固有的方法,但是不能使用 jQuery 里的方法。例如:document.getElementById("img").src = “test.jpg";这里的document.getElementById("img") 就是DOM 对象。
$("#img").attr("src","test.jpg"); 和 document.getElementById("img").src = "test.jpg"; 是等价的,是正确的,但是 $("#img").src = "test.jpg" ;或者 document.getElementById("img").attr("src","test.jpg"); 都是错误的。
再说一个例子,就是this, 在写 jQuery 时经常这样写: this.attr("src","test.jpg");可是就是出错,其实this 是DOM对象,而.attr("src","test.jpg") 是 jQuery 方法,所以出错了。要解决这个问题就要将 DOM对象转换成 jQuery 对象,例如 $(this).attr("src","test.jpg");
1. DOM 对象转成 jQuery 对象
对于已经是一个 DOM 对象,只需要用 $() 把DOM对象包装起来,就可以获得一个 jQuery 对象了,$(DOM 对象) 注: var是定义变量
如:
var v = document.getElementById("v"); //DOM对象 var $v = $(v); //jQuery 对象
转换后,就可以任意使用 jQuery 的方法。
2. jQuery 对象转成 DOM 对象
两种转换方式讲一个 jQuery 对象转换成 DOM 对象: [index] 和 .get(index);
(1) jQuery 对象是一个数据对象,可以通过 [index] 的方法,来得到相应的 DOM 对象。
如:
var $v = $("#v"); //jQuery 对象 var v = $v[0]; //DOM 对象 alert(v.checked); //检测这个checkbox是否被选中
(2) jQuery 本身提供,通过.get(index) 方法得到相应的 DOM 对象
如:
var $v = $("#v"); //jQuery 对象 var v = $v.get(0); //DOM对象 ( $v.get()[0] 也可以 ) alert(v.checked); //检测这个 checkbox 是否被选中
通过以上方法,可以任意的相互转换 jQuery 对象和 DOM 对象,需要再强调的是: DOM 对象才能使用DOM 中的方法,jQuery 对象是不可以使用DOM中的方法。
- JavaScript文档对象模型DOM
- JavaScript Dom对象的操作
- JavaScript 中的文档对象模型 DOM
- JavaScript变量Dom对象的所有属性
- JS实现访问DOM对象指定节点的方法示例
- 浅谈JS读取DOM对象(标签)的自定义属性
- js基础之DOM中document对象的常用属性方法详解
- js基础之DOM中元素对象的属性方法详解
- JavaScript实现DOM对象选择器
- JavaScript DOM 对象深入了解
- JavaScript——DOM操作——Window.document对象详解
- js对象关系图 方便dom操作
- javascript DOM对象的学习实例代码
- JavaScript操作DOM对象详解
相关文章
jQuery实现横向带缓冲的水平运动效果(附demo源码下载)
这篇文章主要介绍了jQuery实现横向带缓冲的水平运动效果,涉及jQuery中鼠标事件及animate方法使用技巧,并附带demo源码供读者下载参考,需要的朋友可以参考下2016-01-01jquery实现自定义树形表格的方法【自定义树形结构table】
这篇文章主要介绍了jquery实现自定义树形表格的方法,结合实例形式分析了jQuery创建自定义树形结构table的相关操作技巧,需要的朋友可以参考下2019-07-07jQuery Ajax 仿AjaxPro.Utility.RegisterTypeForAjax辅助方法
我们都知道在AjaxPro的方法AjaxPro.Utility.RegisterTypeForAjax(typeof(所在类的类名));会将标记有[Ajax.AjaxMethod]方法注册在客户端。2011-09-09jquery实现异步文件上传ajaxfileupload.js
这篇文章主要为大家详细介绍了jquery实现异步文件上传ajaxfileupload.js,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下2020-10-10jQuery EasyUI Layout实现tabs标签的实例
这篇文章主要介绍了jQuery EasyUI Layout实现tabs标签的实例的相关资料,希望通过本文能帮助到大家实现这样的功能,需要的朋友可以参考下2017-09-09
最新评论