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 和 document.all 分别什么时候用
Jun 22 Javascript
Js四则运算函数代码
Jul 21 Javascript
JQuery获取或设置ckeditor的数据(示例代码)
Nov 15 Javascript
js操作输入框中选择内容兼容IE及其他主流浏览器
Apr 22 Javascript
jQuery中get()方法用法实例
Dec 27 Javascript
详解Bootstrap四种图片样式
Jan 04 Javascript
JS中常用的输出方式(五种)
Jun 12 Javascript
解决webpack -p压缩打包react报语法错误的方法
Jul 03 Javascript
vue-router2.0 组件之间传参及获取动态参数的方法
Nov 10 Javascript
微信小程序授权登录及解密unionId出错的方法
Sep 26 Javascript
vue 子组件修改data或调用操作
Aug 07 Javascript
解决antd datepicker 获取时间默认少8个小时的问题
Oct 29 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函数
2010/01/11 PHP
PHP的PSR规范中文版
2013/09/28 PHP
php+ajax实时刷新简单实例
2015/02/25 PHP
PHP错误和异常处理功能模块示例
2016/11/12 PHP
PHP 实现 WebSocket 协议原理与应用详解
2020/04/22 PHP
php实现将数组或对象写入到文件的方法小结【三种方法】
2020/04/22 PHP
javascript 放大镜效果js组件 qsoft.PopBigImage.v0.35 加入了chrome支持
2009/04/07 Javascript
来自qq的javascript面试题
2010/07/24 Javascript
js页面跳转常用的几种方式
2010/11/25 Javascript
JS图像无缝滚动脚本非常好用
2014/02/10 Javascript
js读取并解析JSON类型数据的方法
2015/11/14 Javascript
Js动态设置rem来实现移动端字体的自适应代码
2016/10/14 Javascript
jQuery实现简单日期格式化功能示例
2017/09/19 jQuery
Node.js实现mysql连接池使用事务自动回收连接的方法示例
2018/02/03 Javascript
VUE引入第三方js包及调用方法讲解
2019/03/01 Javascript
vue.js 2.*项目环境搭建、运行、打包发布的详细步骤
2019/05/01 Javascript
[04:36]DOTA2国际邀请赛 ti3精彩集锦
2013/08/19 DOTA
[02:45]DOTA2英雄基础教程 伐木机
2013/12/23 DOTA
[01:20]辉夜杯背景故事宣传片《辉夜传说》
2015/12/25 DOTA
[02:37]TI8勇士令状不朽珍藏II视频展示
2018/06/23 DOTA
探究Python中isalnum()方法的使用
2015/05/18 Python
python 实现红包随机生成算法的简单实例
2017/01/04 Python
python使用邻接矩阵构造图代码示例
2017/11/10 Python
Python读取系统文件夹内所有文件并统计数量的方法
2018/10/23 Python
Python pandas用法最全整理
2019/08/04 Python
python使用opencv实现马赛克效果示例
2019/09/28 Python
pandas实现DataFrame显示最大行列,不省略显示实例
2019/12/26 Python
python实现人机五子棋
2020/03/25 Python
Python xlwt模块使用代码实例
2020/06/10 Python
Python3+PyCharm+Django+Django REST framework配置与简单开发教程
2021/02/16 Python
阿巴庭院:Abba Patio
2019/06/18 全球购物
2014年宣传思想工作总结
2014/12/10 职场文书
讲座开场白台词和结束语
2015/05/29 职场文书
电力安全学习心得体会
2016/01/18 职场文书
VUE之图片Base64编码使用ElementUI组件上传
2022/04/09 Vue.js
USB TYPE-C 或将成为所有智能手机充电标准
2022/04/21 数码科技