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 相关文章推荐
jquery实现动态改变div宽度和高度
May 08 Javascript
javascript实现根据汉字获取简拼
Sep 25 Javascript
jQuery实现倒计时重新发送短信验证码功能示例
Jan 12 Javascript
正则 js分转元带千分符号详解
Mar 08 Javascript
Webpack执行命令参数详解
Jun 17 Javascript
详解jQuery同步Ajax带来的UI线程阻塞问题及解决办法
Aug 09 jQuery
vue.js开发实现全局调用的MessageBox组件实例代码
Nov 22 Javascript
vue中如何让子组件修改父组件数据
Jun 14 Javascript
jQuery实现table表格信息的展开和缩小功能示例
Jul 21 jQuery
vue.js编译时给生成的文件增加版本号
Sep 17 Javascript
Elementui表格组件+sortablejs实现行拖拽排序的示例代码
Aug 28 Javascript
vue页面引入three.js实现3d动画场景操作
Aug 10 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
总集篇&特番节目先行播出!《SAO Alicization War of Underworld》第2季度TV动画4月25日放送!
2020/03/06 日漫
php后台多用户权限组思路与实现程序代码分享
2012/02/13 PHP
PHP的5个安全措施小结
2012/07/17 PHP
phpQuery让php处理html代码像jQuery一样方便
2015/01/06 PHP
PHP中浮点数计算比较及取整不准确的解决方法
2015/01/09 PHP
CodeIgniter实现从网站抓取图片并自动下载到文件夹里的方法
2015/06/17 PHP
用javascript实现的支持lrc歌词的播放器
2007/05/17 Javascript
Javascript 构造函数 实例分析
2008/11/26 Javascript
javascript闭包的理解和实例
2010/08/12 Javascript
javascript 实现简单的table排序及table操作练习
2012/12/28 Javascript
jQuery $.data()方法使用注意细节
2012/12/31 Javascript
关于jQuery对象数据缓存Cache原理以及jQuery.data详解
2013/04/07 Javascript
jQuery - css() 方法示例详解
2014/01/16 Javascript
javascript实现画不相交的圆
2015/04/07 Javascript
Javascript之BOM(window对象)详解
2016/05/25 Javascript
浅谈javascript中的三种弹窗
2016/10/21 Javascript
基于JS脚本语言的基础语法详解
2017/07/22 Javascript
Vue多系统切换实现方案
2018/06/05 Javascript
swiper.js插件实现pc端文本上下滑动功能示例
2018/12/03 Javascript
vue的.vue文件是怎么run起来的(vue-loader)
2018/12/10 Javascript
微信小程序如何修改radio和checkbox的默认样式和图标
2019/07/24 Javascript
extjs图形绘制之饼图实现方法分析
2020/03/06 Javascript
[57:28]2018DOTA2亚洲邀请赛 4.6 淘汰赛 TNC vs Liquid 第一场
2018/04/10 DOTA
在Python中使用全局日志时需要注意的问题
2015/05/06 Python
python冒泡排序简单实现方法
2015/07/09 Python
对numpy中布尔型数组的处理方法详解
2018/04/17 Python
Python爬虫实现抓取京东店铺信息及下载图片功能示例
2018/08/07 Python
Python字符串格式化f-string多种功能实现
2020/05/07 Python
浅谈HTML5中dialog元素尝鲜
2018/10/15 HTML / CSS
可能这些是你想要的H5软键盘兼容方案(小结)
2019/04/23 HTML / CSS
博士生入学考试推荐信
2013/11/17 职场文书
接待员岗位责任制
2014/02/10 职场文书
观看《永远的雷锋》心得体会
2014/03/12 职场文书
婚礼秀策划方案
2014/05/19 职场文书
Python基础之教你怎么在M1系统上使用pandas
2021/05/08 Python
MySQL三种方式实现递归查询
2022/04/18 MySQL