jQuery对象和DOM对象的相互转化实现代码


Posted in Javascript onMarch 02, 2010

jQuery对象和DOM对象相互转化
jQuery对象和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 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对象
alert(v.checked) //检测这个checkbox是否被选中

Javascript 相关文章推荐
js 未结束的字符串常量错误解决方法
Jun 13 Javascript
随窗体滑动的小插件sticky源码
Jun 21 Javascript
利用JS延迟加载百度分享代码,提高网页速度
Jul 01 Javascript
jQuery 获取和设置select下拉框的值实现代码
Nov 08 Javascript
javascript学习笔记(四)function函数部分
Sep 30 Javascript
深入解析桶排序算法及Node.js上JavaScript的代码实现
Jul 06 Javascript
详解Vue.js中.native修饰符
Apr 24 Javascript
小程序实现五星点评效果
Nov 03 Javascript
通过实例了解JS 连续赋值
Sep 24 Javascript
高性能js数组去重(12种方法,史上最全)
Dec 21 Javascript
vuex入门最详细整理
Mar 04 Javascript
vue实现把接口单独存放在一个文件方式
Aug 13 Javascript
Javascript 自定义类型方法小结
Mar 02 #Javascript
Javascript Cookie读写删除操作的函数
Mar 02 #Javascript
28个JS验证函数收集
Mar 02 #Javascript
用js脚本控制asp.net下treeview的NodeCheck的实现代码
Mar 02 #Javascript
javascript 静态对象和构造函数的使用和公私问题
Mar 02 #Javascript
新老版本juqery获取radio对象的方法
Mar 01 #Javascript
几个比较经典常用的jQuery小技巧
Mar 01 #Javascript
You might like
php数组函数序列 之array_count_values() 统计数组中所有值出现的次数函数
2011/10/29 PHP
php读取csv实现csv文件下载功能
2013/12/18 PHP
Thinkphp中import的几个用法详细介绍
2014/07/02 PHP
ThinkPHP模板替换与系统常量及应用实例教程
2014/08/22 PHP
PHP中auto_prepend_file与auto_append_file用法实例分析
2014/09/22 PHP
详解PHP中的Traits
2015/07/29 PHP
php用户密码加密算法分析【Discuz加密算法】
2016/10/12 PHP
javascript是怎么继承的介绍
2012/01/05 Javascript
JS获取月份最后天数、最大天数与某日周数的方法
2015/12/08 Javascript
Javascript中引用类型传递的知识点小结
2017/03/06 Javascript
node.js(express)中使用Jcrop进行图片剪切上传功能
2017/04/21 Javascript
JS一个简单的注册页面实例
2017/09/05 Javascript
基于require.js的使用(实例讲解)
2017/09/07 Javascript
基于Bootstrap table组件实现多层表头的实例代码
2017/09/07 Javascript
JS实现网页抢购功能(触发,终止脚本)
2017/11/27 Javascript
bootstrap treeview 树形菜单带复选框及级联选择功能
2018/06/08 Javascript
vue内置组件transition简单原理图文详解(小结)
2018/07/12 Javascript
一文读懂ES7中的javascript修饰器
2019/05/06 Javascript
微信小程序表单验证插件WxValidate的二次封装功能(终极版)
2019/09/03 Javascript
vue实现选中效果
2020/10/07 Javascript
JS实现百度搜索框
2021/02/25 Javascript
Python装饰器decorator用法实例
2014/11/10 Python
Python函数式编程指南(四):生成器详解
2015/06/24 Python
Python实现复杂对象转JSON的方法示例
2017/06/22 Python
Python实现的批量修改文件后缀名操作示例
2018/12/07 Python
python批量从es取数据的方法(文档数超过10000)
2018/12/27 Python
一步步教你用python的scrapy编写一个爬虫
2019/04/17 Python
Python numpy.zero() 初始化矩阵实例
2019/11/27 Python
python实现用类读取文件数据并计算矩形面积
2020/01/18 Python
python实现三种随机请求头方式
2021/01/05 Python
Farfetch美国:奢侈品牌时尚购物平台
2019/05/02 全球购物
alice McCALL官网:澳大利亚时尚品牌
2020/11/16 全球购物
赔偿协议书怎么写
2015/01/28 职场文书
2015年建筑工程工作总结
2015/05/13 职场文书
教师研修随笔感言
2015/11/18 职场文书
漫画「处刑少女的生存之道」第3卷封面公开
2022/03/21 日漫