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 闭包在封装函数时的简单分析
Nov 28 Javascript
js 多种变量定义(对象直接量,数组直接量和函数直接量)
May 24 Javascript
JS实现模仿微博发布效果实例代码
Dec 16 Javascript
通过隐藏iframe实现文件下载的js方法介绍
Feb 26 Javascript
JS 排序输出实现table行号自增前端动态生成的tr
Aug 13 Javascript
javascript使用window.open提示“已经计划系统关机”的原因
Aug 15 Javascript
JavaScript中的数组操作介绍
Dec 30 Javascript
jQuery实现带延迟的二级tab切换下拉列表效果
Sep 01 Javascript
深入探讨Vue.js组件和组件通信
Sep 12 Javascript
浅谈jQuery this和$(this)的区别及获取$(this)子元素对象的方法
Nov 29 Javascript
Element Card 卡片的具体使用
Jul 26 Javascript
js代码编写无缝轮播图
Sep 13 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
PHP+Ajax实现上传文件进度条动态显示进度功能
2018/06/04 PHP
php 使用 __call实现重载功能示例
2019/11/18 PHP
B/S开发中常用javaScript技术与代码
2007/03/09 Javascript
js 弹出框 替代浏览器的弹出框
2010/10/29 Javascript
jQuery实现用方向键控制层的上下左右移动
2013/01/13 Javascript
当滚动条滚动到页面底部自动加载增加内容的js代码
2014/05/13 Javascript
js窗口关闭提示信息(兼容IE和firefox)
2015/10/23 Javascript
JavaScript知识点总结之如何提高性能
2016/01/15 Javascript
微信小程序 时间格式化(util.formatTime(new Date))详解
2016/11/16 Javascript
深入理解ES7的async/await的用法
2017/09/09 Javascript
在vue-cli搭建的项目中增加后台mock接口的方法
2018/04/26 Javascript
Node.js 如何利用异步提升任务处理速度
2019/01/07 Javascript
微信小程序封装多张图片上传api代码实例
2019/12/30 Javascript
如何HttpServletRequest文件对象并储存
2020/08/14 Javascript
[01:14:41]DOTA2-DPC中国联赛定级赛 iG vs Magma BO3第一场 1月8日
2021/03/11 DOTA
python多进程操作实例
2014/11/21 Python
Python守护进程(daemon)代码实例
2015/03/06 Python
python通过urllib2获取带有中文参数url内容的方法
2015/03/13 Python
Python2.7简单连接与操作MySQL的方法
2016/04/27 Python
浅谈Python数据类型判断及列表脚本操作
2016/11/04 Python
python简单商城购物车实例代码
2018/03/15 Python
浅谈Python脚本开头及导包注释自动添加方法
2018/10/27 Python
详解centos7+django+python3+mysql+阿里云部署项目全流程
2019/11/15 Python
Python Numpy数组扩展repeat和tile使用实例解析
2019/12/09 Python
pytorch 彩色图像转灰度图像实例
2020/01/13 Python
keras训练浅层卷积网络并保存和加载模型实例
2020/07/02 Python
CSS3解决移动页面上点击链接触发色块的问题
2016/06/03 HTML / CSS
CSS3 filter(滤镜)实现网页灰色或者黑色模式的示例代码
2021/02/24 HTML / CSS
HTML5几个设计和修改的页面范例分享
2015/09/29 HTML / CSS
解析浏览器的一些“滚动”行为鉴赏
2019/09/16 HTML / CSS
标准化管理实施方案
2014/02/25 职场文书
预备党员学习十八届三中全会精神思想汇报
2014/09/13 职场文书
2014年维稳工作总结
2014/11/18 职场文书
2015年计划生育协会工作总结
2015/05/13 职场文书
运输公司工作总结
2015/08/11 职场文书
详细聊聊Oracle表碎片对性能有多大的影响
2022/03/19 Oracle