jquery对象和DOM对象的任意相互转换


Posted in Javascript onFebruary 21, 2016

什么是jQuery对象?
---就是通过jQuery包装DOM对象后产生的对象。jQuery对象是jQuery独有的,其可以使用jQuery里的方法。
比如:
$("#test").html() 意思是指:获取ID为test的元素内的html代码。其中html()是jQuery里的方法
这段代码等同于用DOM实现代码:

document.getElementById("id").innerHTML;

虽然jQuery对象是包装DOM对象后产生的,但是jQuery无法使用DOM对象的任何方法,同理DOM对象也不能使用jQuery里的方法.乱使用会报错。比如:$("#test").innerHTML、document.getElementById("id").html()之类的写法都是错误的。
还有一个要注意的是:用#id作为选择符取得的是jQuery对象与document.getElementById("id")得到的DOM对象,这两者并不等价。请参看如下说的两者间的转换。
既然jQuery有区别但也有联系,那么jQuery对象与DOM对象也可以相互转换。在再两者转换前首先我们给一个约定:如果一个获取的是jQuery对象,那么我们在变量前面加上$,如:var $variab = jQuery对象;如果获取的是DOM对象,则与习惯普通一样:var variab = DOM对象;这么约定只是便于讲解与区别,实际使用中并不规定。

在讨论jquery对象和DOM对象的相互转换之前,先约定好定义变量的风格如果获取的是jquery对象,那么在变量前面加上$,例如

var $varible = jquery对象;

如果获取的是DOM对象,则定义如下:

var varible = DOM对象;

1.jquery对象转成DOM对象:

jquery对象不能使用DOM中的方法,但如果对jquery对象所提供的方法不熟悉,或者没有jquery想封装的方法,不得不使用DOM对象,即【index】和get[index].

(1)jquery对象是一个数组对象,可以通过【index】的方法得到相应的DOM对象。

jquery的代码如下

<body>
  <p>my</p>
  <p>my</p>
<script src="jquery-2.1.4.min.js"></script>
<script>
  var $cr = $("p");  //jquery对象
  var cr = $cr[1];  //dom对象
  var ct = $cr.get(0)  //第二种转换为DOM对象的方式
  cr.innerHTML = "you"  //检测是否转换成功,可以用DOM方法 输出结果为第二个my改成了you
  ct.innerHTML = 'fuck'  //输出结果第一个my改成了fuck
</script>
</body>

(2).DOM对象转换为jquery对象:

对于一个DOM对象,只需要用$()把DOM对象给包装起来,就可以获得一个jquery对象了,方式为$(DOM对象)。

jquery代码如下:

<body>
  <p>my</p>
  <p>my</p>
<script src="jquery-2.1.4.min.js"></script>
<script>
  var cr = document.getElementsByTagName("p") //DOM对象
  var $cr = $(cr);   //jquery对象
  $cr.eq(0).("fuck"); //检测是否转换成功,可以用jquery方法 输出结果为第二个my改成了fuck
  $cr.eq(1).html("you"); //输出结果为my改成you
</script>
</body>

转换后,可以任意使用jquery方法。

 通过以上方法,可以任意的相互转换jquery对象和DOM对象。

最后再次强调,DOM对象才能使用DOM方法,jquery对象不能使用DOM中的方法,但jquery对象提供了一套更加完善的工具用于操作DOM。

希望大家会喜欢本文。

Javascript 相关文章推荐
Javascript 垃圾收集机制介绍理解
May 14 Javascript
jQuery bxCarousel实现图片滚动切换效果示例代码
May 15 Javascript
node.js中的fs.chown方法使用说明
Dec 16 Javascript
jquery简单图片切换显示效果实现方法
Jan 14 Javascript
JavaScript使用ActiveXObject访问Access和SQL Server数据库
Apr 02 Javascript
javascript创建对象、对象继承的实用方式详解
Mar 08 Javascript
JavaScript里 ==与===区别详解
Aug 16 Javascript
js实现登录验证码
Dec 22 Javascript
微信小程序之电影影评小程序制作代码
Aug 03 Javascript
简化版的vue-router实现思路详解
Oct 19 Javascript
微信小程序在线客服自动回复功能(基于node)
Jul 03 Javascript
vue使用exif获取图片旋转,压缩的示例代码
Dec 11 Vue.js
jQuery实现div拖拽效果实例分析
Feb 20 #Javascript
jQuery实现简单隔行变色的方法
Feb 20 #Javascript
jQuery实现元素拖拽并cookie保存顺序的方法
Feb 20 #Javascript
jQuery获得字体颜色16位码的方法
Feb 20 #Javascript
jQuery实现的文字hover颜色渐变效果实例
Feb 20 #Javascript
jQuery+PHP+MySQL实现无限级联下拉框效果
Feb 19 #Javascript
js面向对象的写法
Feb 19 #Javascript
You might like
苏联队长,苏联超人蝙蝠侠,这些登场的“山寨”英雄真的很严肃
2020/04/09 欧美动漫
用PHP与XML联手进行网站编程代码实例
2008/07/10 PHP
mysql desc(DESCRIBE)命令实例讲解
2016/09/24 PHP
laravel框架中路由设置,路由参数和路由命名实例分析
2019/11/23 PHP
js鼠标滑过弹出层的定位IE6bug解决办法
2012/12/26 Javascript
jQuery实现鼠标移到元素上动态提示消息框效果
2013/10/20 Javascript
JS中把字符转成ASCII值的函数示例代码
2013/11/21 Javascript
一种基于浏览器的自动小票机打印实现方案(js版)
2016/07/26 Javascript
ExtJS 4.2 Grid组件单元格合并的方法
2016/10/12 Javascript
vue2.0.js的多级联动选择器实现方法
2018/02/09 Javascript
使用vue2实现购物车和地址选配功能
2018/03/29 Javascript
基于webpack4.X从零搭建React脚手架的方法步骤
2018/12/23 Javascript
页面内锚点定位及跳转方法总结(推荐)
2019/04/24 Javascript
JavaScript实现商品评价五星好评
2020/11/30 Javascript
[05:13]TI4 中国战队 机场出征!!
2014/07/07 DOTA
使用Python标准库中的wave模块绘制乐谱的简单教程
2015/03/30 Python
Python的多态性实例分析
2015/07/07 Python
python中enumerate函数遍历元素用法分析
2016/03/11 Python
python flask实现分页效果
2017/06/27 Python
Python 高级专用类方法的实例详解
2017/09/11 Python
通过python+selenium3实现浏览器刷简书文章阅读量
2017/12/26 Python
Python实现打印实心和空心菱形
2019/11/23 Python
基于Python的OCR实现示例
2020/04/03 Python
Python dict的常用方法示例代码
2020/06/23 Python
HTML5单页面手势滑屏切换原理
2016/03/21 HTML / CSS
HTML5仿微信聊天界面、微信朋友圈实例代码
2018/01/29 HTML / CSS
The Athlete’s Foot新西兰:新西兰最大的运动鞋零售商
2019/12/23 全球购物
Ajax实现页面无刷新留言效果
2021/03/24 Javascript
致标枪运动员广播稿
2014/02/06 职场文书
校园绿化美化方案
2014/06/08 职场文书
档案工作汇报材料
2014/08/21 职场文书
学习十八大的心得体会
2014/09/12 职场文书
标准版离职证明书
2014/09/12 职场文书
网吧温馨提示
2015/07/17 职场文书
小学生法制教育心得体会
2016/01/14 职场文书
机关单位2016年法制宣传日活动总结
2016/04/01 职场文书