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 相关文章推荐
鼠标移到导航当前位置的LI变色处于选中状态
Aug 23 Javascript
javascript中全局对象的isNaN()方法使用介绍
Dec 19 Javascript
DIV始终居中的js代码
Feb 17 Javascript
js取模(求余数)隔行变色
May 15 Javascript
易被忽视的js事件问题总结
May 14 Javascript
浅谈Javascript中的函数、this以及原型
Oct 09 Javascript
vue2里面ref的具体使用方法
Oct 27 Javascript
JavaScript 点击触发复制功能实例详解
Nov 02 Javascript
基于JS实现web端录音与播放功能
Apr 17 Javascript
Vue使用vue-recoure + http-proxy-middleware + vuex配合promise实现基本的跨域请求封装
Oct 21 Javascript
es6数组includes()用法实例分析
Apr 18 Javascript
解决vue中使用less/sass及使用中遇到无效的问题
Oct 24 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生成静态页
2006/11/25 PHP
php基于curl实现随机ip地址抓取内容的方法
2016/10/11 PHP
ThinkPHP打水印及设置水印位置的方法
2016/10/14 PHP
背景音乐每次刷新都可以自动更换
2007/02/01 Javascript
clientX,pageX,offsetX,x,layerX,screenX,offsetLeft区别分析
2010/03/12 Javascript
Node.js的特点和应用场景介绍
2014/11/04 Javascript
jquery+html5制作超酷的圆盘时钟表
2015/04/14 Javascript
javascript绘制漂亮的心型线效果完整实例
2016/02/02 Javascript
JavaScript实现弹出模态窗体并接受传值的方法
2016/02/12 Javascript
JavaScript实现简单的星星评分效果
2017/05/18 Javascript
react实现换肤功能的示例代码
2018/08/14 Javascript
在vue项目中正确使用iconfont的方法
2018/09/28 Javascript
JS中数据结构之栈
2019/01/01 Javascript
微信小程序中的上拉、下拉菜单功能
2020/03/13 Javascript
使用Python获取并处理IP的类型及格式方法
2018/11/01 Python
Python爬虫实战之12306抢票开源
2019/01/24 Python
python进程和线程用法知识点总结
2019/05/28 Python
python通用读取vcf文件的类(复制粘贴即可用)
2020/02/29 Python
TensorFlow使用Graph的基本操作的实现
2020/04/22 Python
Pycharm安装并配置jupyter notebook的实现
2020/05/18 Python
python实现126邮箱发送邮件
2020/05/20 Python
在keras中对单一输入图像进行预测并返回预测结果操作
2020/07/09 Python
诺心蛋糕官网:LE CAKE
2018/08/25 全球购物
信号量和自旋锁的区别?如何选择使用?
2015/09/08 面试题
视光学专业毕业生推荐信
2013/10/28 职场文书
母亲节演讲稿范文
2014/01/02 职场文书
运动会口号8字
2014/06/07 职场文书
微笑服务标语
2014/06/24 职场文书
班主任与学生安全责任书
2014/07/25 职场文书
竞选班干部演讲稿400字
2014/08/20 职场文书
2014年保管员工作总结
2014/11/18 职场文书
委托证明范本
2014/11/25 职场文书
计算机专业自荐信范文
2015/03/26 职场文书
导游词之清晏园
2019/11/22 职场文书
用Python将库打包发布到pypi
2021/04/13 Python
一次MySQL启动导致的事故实战记录
2021/09/15 MySQL