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内存管理介绍
Mar 13 Javascript
JavaScript实现给定时间相加天数的方法
Jan 25 Javascript
JavaScript实战之菜单特效
Aug 16 Javascript
浅谈js数据类型判断与数组判断
Aug 29 Javascript
localStorage实现便签小程序
Nov 28 Javascript
Vue2.0父组件与子组件之间的事件发射与接收实例代码
Sep 19 Javascript
JavaScript如何对图片进行黑白化
Apr 10 Javascript
基于Vue自定义指令实现按钮级权限控制思路详解
May 23 Javascript
vue之将echart封装为组件
Jun 02 Javascript
jQuery.extend 与 jQuery.fn.extend的用法及区别实例分析
Jul 25 jQuery
详解ES6 Fetch API HTTP请求实用指南
Nov 14 Javascript
layui table 表格模板按钮的实例代码
Sep 21 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生成扭曲及旋转的验证码图片
2013/06/07 PHP
php selectradio和checkbox默认选择的实现方法详解
2013/06/29 PHP
PHP中静态变量的使用方法实例分析
2016/12/01 PHP
php curl常用的5个经典例子
2017/01/20 PHP
Ajax+Jpgraph实现的动态折线图功能示例
2019/02/11 PHP
PHP配合fiddler抓包抓取微信指数小程序数据的实现方法分析
2020/01/02 PHP
iframe自适应宽度、高度 ie6 7 8,firefox 3.86下测试通过
2010/07/29 Javascript
各情景下元素宽高的获取实现代码
2011/09/13 Javascript
JavaScript实现x秒后自动跳转到一个页面
2013/01/03 Javascript
jquery实现翻动fadeIn显示的方法
2015/03/05 Javascript
四种参数传递的形式——URL,超链接,js,form表单
2015/07/24 Javascript
微信小程序 wxapp内容组件 text详细介绍
2016/10/31 Javascript
Javascript 判断两个IP是否在同一网段实例代码
2016/11/28 Javascript
prototype.js简单实现ajax功能示例
2017/10/18 Javascript
this.$toast() 了解一下?
2019/04/18 Javascript
layui 实现表格某一列显示图标
2019/09/19 Javascript
微信小程序(订阅消息)功能
2019/10/25 Javascript
小程序实现tab标签页
2020/11/16 Javascript
[01:53]3.19 DOTA2发布会 现场精彩Coser表演
2014/03/25 DOTA
[03:03]2014DOTA2西雅图国际邀请赛 Alliance战队巡礼
2014/07/07 DOTA
[46:25]DOTA2上海特级锦标赛主赛事日 - 4 败者组第五轮 MVP.Phx VS EG第二局
2016/03/05 DOTA
python实现文本文件合并
2015/12/29 Python
Python中print函数简单使用总结
2019/08/05 Python
详解Django-channels 实现WebSocket实例
2019/08/22 Python
Python 实现毫秒级淘宝抢购脚本的示例代码
2019/09/16 Python
Python3 把一个列表按指定数目分成多个列表的方式
2019/12/25 Python
使用Python+selenium实现第一个自动化测试脚本
2020/03/17 Python
pycharm远程连接vagrant虚拟机中mariadb数据库
2020/06/05 Python
ProBikeKit新西兰:自行车套件,跑步和铁人三项装备
2017/04/05 全球购物
New Era英国官网:美国棒球帽品牌
2018/03/21 全球购物
mysql有关权限的表都有哪几个
2015/04/22 面试题
二年级小学生评语
2014/04/21 职场文书
房地产销售经理岗位职责
2015/02/02 职场文书
红旗渠导游词
2015/02/09 职场文书
小学教师党员承诺书
2015/04/27 职场文书
Python Django框架介绍之模板标签及模板的继承
2021/05/27 Python