jQuery对象和DOM对象相互转化


Posted in Javascript onApril 24, 2009

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 相关文章推荐
文字溢出实现溢出的部分再放入一个新生成的div中具体代码
May 17 Javascript
获取表单控件原始(初始)值的方法
Aug 21 Javascript
JS控制日期显示的小例子
Nov 23 Javascript
jquery获得option的值和对option进行操作
Dec 13 Javascript
JavaScript中switch判断容易犯错的一个细节
Aug 27 Javascript
JQuery跳出each循环的方法
Apr 16 Javascript
jQuery简单实现点击文本框复制内容到剪贴板上的方法
Aug 01 Javascript
jQuery实现点击任意位置弹出层外关闭弹出层效果
Oct 19 Javascript
javaScript中定义类或对象的五种方式总结
Dec 04 Javascript
javascript 中的try catch应用总结
Apr 01 Javascript
vue.js的状态管理vuex中store的使用详解
Nov 08 Javascript
vue 授权获取微信openId操作
Nov 13 Javascript
JavaScript 学习点滴记录
Apr 24 #Javascript
用JavaScript显示随机图像或引用
Apr 21 #Javascript
JavaScript 无符号右移运算符
Apr 17 #Javascript
JavaScript 无符号右移赋值操作
Apr 17 #Javascript
保证JavaScript和Asp、Php等后端程序间传值编码统一
Apr 17 #Javascript
jQuery autocomplete插件修改
Apr 17 #Javascript
百度 popup.js 完美修正版非常的不错 脚本之家推荐
Apr 17 #Javascript
You might like
用PHP制作静态网站的模板框架
2006/10/09 PHP
详解PHP显示MySQL数据的三种方法
2008/06/05 PHP
PHP连接sql server 2005环境配置及问题解决
2014/08/08 PHP
php 二维数组快速排序算法的实现代码
2017/10/17 PHP
javascript 获取模态窗口的滚动位置代码
2013/08/06 Javascript
20个实用的JavaScript技巧分享
2014/11/28 Javascript
jQuery仿360导航页图标拖动排序效果代码分享
2015/08/24 Javascript
Json解析的方法小结
2016/06/22 Javascript
js 转义字符及URI编码详解
2017/02/28 Javascript
vue中引用阿里字体图标的方法
2018/02/10 Javascript
使用layui实现树形结构的方法
2019/09/20 Javascript
vue resource发送请求的几种方式
2019/09/30 Javascript
vue.js中ref及$refs的使用方法解析
2019/10/08 Javascript
[02:58]魔廷新尊——痛苦女王至宝语音台词节选
2020/06/14 DOTA
Python中的并发编程实例
2014/07/07 Python
wxpython中利用线程防止假死的实现方法
2014/08/11 Python
Python字典操作简明总结
2015/04/13 Python
Python字符串处理函数简明总结
2015/04/13 Python
python 回调函数和回调方法的实现分析
2016/03/23 Python
python3写爬取B站视频弹幕功能
2017/12/22 Python
利用Python2下载单张图片与爬取网页图片实例代码
2017/12/25 Python
python通过elixir包操作mysql数据库实例代码
2018/01/31 Python
解决Ubuntu pip 安装 mysql-python包出错的问题
2018/06/11 Python
Django实现单用户登录的方法示例
2019/03/28 Python
详解python调用cmd命令三种方法
2019/07/08 Python
python字符串查找函数的用法详解
2019/07/08 Python
python3实现mysql导出excel的方法
2019/07/31 Python
Laravel框架表单验证格式化输出的方法
2019/09/25 Python
OpenCV Python实现图像指定区域裁剪
2021/03/12 Python
购买一个高级域名:BuyDomains
2018/03/11 全球购物
中专生毕业自我鉴定
2013/11/01 职场文书
小学生操行评语大全
2014/04/22 职场文书
产品陈列协议书(标准版)
2014/09/17 职场文书
个人批评与自我批评材料
2014/10/17 职场文书
大学生党性分析材料
2014/12/19 职场文书
2016年“5.12”护士节慰问信
2015/11/30 职场文书