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 相关文章推荐
document.compatMode介绍
May 21 Javascript
本地对象Array的原型扩展实现代码
Dec 04 Javascript
数组方法解决JS字符串连接性能问题有争议
Jan 12 Javascript
JavaScript高级程序设计 阅读笔记(十四) js继承机制的实现
Aug 14 Javascript
[原创]Javascript 实现广告后加载 可加载百度谷歌联盟广告
May 11 Javascript
JS函数修改html的元素内容,及修改属性内容的方法
Oct 28 Javascript
JavaScript数据结构中栈的应用之表达式求值问题详解
Apr 11 Javascript
JS中使用new Option()实现时间联动效果
Dec 10 Javascript
Vue 表情包输入组件的实现代码
Jan 21 Javascript
微信小程序实现手势滑动效果
Aug 26 Javascript
原生javascript实现类似vue的数据绑定功能示例【观察者模式】
Feb 24 Javascript
小程序实现背景音乐播放和暂停
Jun 19 Javascript
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
如何开发一个虚拟域名系统
2006/10/09 PHP
PHP提取数据库内容中的图片地址并循环输出
2010/03/21 PHP
php将字符串转换成16进制的方法
2015/03/17 PHP
PHP 绘制网站登录首页图片验证码
2016/04/12 PHP
laravel-admin表单提交隐藏一些数据,回调时获取数据的方法
2019/10/08 PHP
Laravel6.0.4中将添加计划任务事件的方法步骤
2019/10/15 PHP
豆瓣网的jquery代码实例
2008/06/15 Javascript
js实现的map方法示例代码
2014/01/13 Javascript
使用jQuery将多条数据插入模态框的实现代码
2014/10/08 Javascript
浅谈JavaScript中null和undefined
2015/07/09 Javascript
Bootstrap每天必学之栅格系统(布局)
2015/11/25 Javascript
Bootstrap3学习笔记(三)之表格
2016/05/20 Javascript
JavaScript实现简单的拖动效果
2016/07/02 Javascript
微信小程序 icon组件详细及实例代码
2016/10/25 Javascript
JavaScript数组去重的6个方法
2017/01/21 Javascript
JavaScript基础之this详解
2017/06/04 Javascript
Vue学习笔记进阶篇之函数化组件解析
2017/07/21 Javascript
JavaScript数据结构之优先队列与循环队列实例详解
2017/10/27 Javascript
vue 中swiper的使用教程
2018/05/22 Javascript
vue实现评论列表功能
2019/10/25 Javascript
Vue绑定用户接口实现代码示例
2020/11/04 Javascript
Python3.x和Python2.x的区别介绍
2013/02/12 Python
Python 编码处理-str与Unicode的区别
2016/09/06 Python
Python基于递归实现电话号码映射功能示例
2018/04/13 Python
对python中list的拷贝与numpy的array的拷贝详解
2019/01/29 Python
python实现给微信指定好友定时发送消息
2019/04/29 Python
解决pycharm运行程序出现卡住scanning files to index索引的问题
2019/06/27 Python
Python使用turtle库绘制小猪佩奇(实例代码)
2020/01/16 Python
python实现梯度法 python最速下降法
2020/03/24 Python
13个Pandas实用技巧,助你提高开发效率
2020/08/19 Python
利用python为PostgreSQL的表自动添加分区
2021/01/18 Python
美国最大的万圣节服装网站:HalloweenCostumes.com
2017/10/12 全球购物
市场部管理制度
2014/02/02 职场文书
优秀技术工人先进材料
2014/02/17 职场文书
成绩单评语
2015/01/04 职场文书
送给自己的励志语句:要安静的优秀,悄无声息的坚强
2019/11/26 职场文书