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的12招常用技巧分享
Aug 08 Javascript
js的匿名函数使用介绍
Dec 11 Javascript
一个JavaScript递归实现反转数组字符串的实例
Oct 14 Javascript
Node.js开源应用框架HapiJS介绍
Jan 14 Javascript
Kindeditor在线文本编辑器如何过滤HTML
Apr 14 Javascript
浅析$(function) ready和onload 的区别
Sep 03 Javascript
Angularjs实现带查找筛选功能的select下拉框示例代码
Oct 04 Javascript
基于JavaScript实现全选、不选和反选效果
Feb 15 Javascript
vue父组件中获取子组件中的数据(实例讲解)
Sep 27 Javascript
微信小程序视图容器(swiper)组件创建轮播图
Jun 19 Javascript
小程序实现列表删除功能
Oct 30 Javascript
通过扫小程序码实现网站登陆功能
Aug 22 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
Phpbean路由转发的php代码
2008/01/10 PHP
php 静态化实现代码
2009/03/20 PHP
Yii2.0预定义的别名功能小结
2016/07/04 PHP
php实现生成带二维码图片并强制下载功能
2018/02/24 PHP
PHP封装的mysqli数据库操作类示例
2019/02/16 PHP
JavaScript中的几个关键概念的理解-原型链的构建
2011/05/12 Javascript
jquery.uploadify插件在chrome浏览器频繁崩溃解决方法
2015/03/01 Javascript
JS查找字符串中出现次数最多的字符
2016/09/05 Javascript
详解JavaScript常量定义
2017/01/03 Javascript
利用nodejs监控文件变化并使用sftp上传到服务器
2017/02/18 NodeJs
详解Angular 4.x Injector
2017/05/04 Javascript
使用jQuery实现两个div中按钮互换位置的实例代码
2017/09/21 jQuery
深入理解Vue 组件之间传值
2018/08/16 Javascript
详解vue项目中调用百度地图API使用方法
2019/04/25 Javascript
JavaScript实现简单的弹窗效果
2020/05/19 Javascript
jQuery实现带进度条的轮播图
2020/09/13 jQuery
[34:56]Ti4冒泡赛LGD vs Liquid 1
2014/07/14 DOTA
[01:03:22]LGD vs OG 2018国际邀请赛淘汰赛BO3 第一场 8.25
2018/08/29 DOTA
python开发的小球完全弹性碰撞游戏代码
2013/10/15 Python
Python实现带参数与不带参数的多重继承示例
2018/01/30 Python
Python实现SQL注入检测插件实例代码
2019/02/02 Python
python可视化爬虫界面之天气查询
2019/07/03 Python
基于TensorFlow常量、序列以及随机值生成实例
2020/01/04 Python
Python 按比例获取样本数据或执行任务的实现代码
2020/12/03 Python
美国爆米花工厂:The Popcorn Factory
2019/09/14 全球购物
Shopping happy life西班牙:以最优惠的价格提供最好的时尚配饰
2020/03/13 全球购物
金融专业个人的自我评价
2013/10/18 职场文书
我的动漫时代的创业计划书范文
2014/01/27 职场文书
预备党员入党自我评价范文
2014/03/10 职场文书
低碳生活倡议书
2014/04/14 职场文书
保护环境的标语
2014/06/09 职场文书
创先争优承诺书
2015/01/20 职场文书
写作技巧:如何撰写一份优秀的营销策划书
2019/08/13 职场文书
带你了解CSS基础知识,样式
2021/07/21 HTML / CSS
MySQL中int (10) 和 int (11) 的区别
2022/01/22 MySQL
python中的sys模块和os模块
2022/03/20 Python