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 相关文章推荐
js截取函数(indexOf,join等)
Sep 01 Javascript
Jquery刷新页面背景图片随机变换的实现方法
Mar 15 Javascript
js判断选择时间不能小于当前时间的示例代码
Sep 24 Javascript
JS禁用浏览器退格键实现思路及代码
Oct 29 Javascript
解决node-webkit 不支持html5播放mp4视频的方法
Mar 11 Javascript
JS原型链 详解及示例代码
Sep 06 Javascript
JavaScript组成、引入、输出、运算符基础知识讲解
Dec 08 Javascript
使用vue与jquery实时监听用户输入状态的操作代码
Sep 19 jQuery
Vue.js实现tab切换效果
Jul 24 Javascript
解决VUE mounted 钩子函数执行时 img 未加载导致页面布局的问题
Jul 27 Javascript
JavaScript事件概念详解(区分静态注册和动态注册)
Feb 05 Javascript
vue封装数字翻牌器
Apr 20 Vue.js
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检测用户语言的方法
2015/06/15 PHP
php 生成签名及验证签名详解
2016/10/26 PHP
PHP静态延迟绑定和普通静态效率的对比
2017/10/20 PHP
使用PHPStorm+XDebug搭建单步调试环境
2017/11/19 PHP
PHP ADODB实现事务处理功能示例
2018/05/25 PHP
jQuery 行背景颜色的交替显示(隔行变色)实现代码
2009/12/13 Javascript
javascript sudoku 数独智力游戏生成代码
2010/03/27 Javascript
JQuery入门——用bind方法绑定事件处理函数应用介绍
2013/02/05 Javascript
jquery的live使用注意事项
2014/02/18 Javascript
莱鸟介绍window.print()方法
2016/01/06 Javascript
javascript实现移动端上的触屏拖拽功能
2016/03/04 Javascript
javascript类型系统——undefined和null全面了解
2016/07/13 Javascript
基于JavaScript实现购物网站商品放大镜效果
2016/09/06 Javascript
JQuery 获取Dom元素的实例讲解
2017/07/08 jQuery
jQuery封装placeholder效果实现方法,让低版本浏览器支持该效果
2017/07/08 jQuery
利用require.js与angular搭建spa应用的方法实例
2017/07/19 Javascript
vue 项目常用加载器及配置详解
2018/01/22 Javascript
使用elementUI实现将图片上传到本地的示例
2018/09/04 Javascript
CKEditor4配置与开发详细中文说明文档
2018/10/08 Javascript
JavaScript实现密码强度实时验证
2020/03/18 Javascript
jQuery实时统计输入框字数及限制
2020/06/24 jQuery
初学python数组的处理代码
2011/01/04 Python
下载给定网页上图片的方法
2014/02/18 Python
使用pandas将numpy中的数组数据保存到csv文件的方法
2018/06/14 Python
pytorch中的上采样以及各种反操作,求逆操作详解
2020/01/03 Python
Scrapy爬虫文件批量运行的实现
2020/09/30 Python
加拿大在线眼镜零售商:SmartBuyGlasses加拿大
2019/05/25 全球购物
德国W家官网,可直邮中国的母婴商城:Windeln.de
2021/03/03 全球购物
斯福泰克软件测试面试题
2015/02/16 面试题
是否可以从一个static方法内部发出对非static方法的调用?
2014/08/18 面试题
中层竞聘演讲稿
2014/01/09 职场文书
程序员求职信
2014/04/16 职场文书
活动倡议书范文
2014/05/13 职场文书
2015中秋节慰问信范文
2015/03/23 职场文书
工会经费申请报告
2015/05/15 职场文书
2019假期福利管理制度!
2019/07/15 职场文书