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 浏览器验证代码(来自discuz)
Jul 17 Javascript
jquery属性过滤选择器使用示例
Jun 18 Javascript
详细解密jsonp跨域请求
Apr 15 Javascript
JS数组array元素的添加和删除方法代码实例
Jun 01 Javascript
javascript单例模式的简单实现方法
Jul 25 Javascript
bootstrap实现弹窗和拖动效果
Jan 03 Javascript
再谈Javascript中的异步以及如何异步
Aug 19 Javascript
ES2015 Symbol 一种绝不重复的值
Dec 25 Javascript
javascript删除html标签函数cIsHTML
Jan 09 Javascript
浅谈js中的变量名和函数名重名
Feb 13 Javascript
详解vue.js数据传递以及数据分发slot
Jan 20 Javascript
js删除对象/数组中null、undefined、空对象及空数组方法示例
Nov 14 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中神奇的fastcgi_finish_request
2011/05/02 PHP
PHP独立Session数据库存储操作类分享
2014/06/11 PHP
根据鼠标的位置动态的控制层的位置
2009/11/24 Javascript
javascript options属性集合操作代码
2009/12/28 Javascript
javascript实现上传图片并预览的效果实现代码
2011/04/11 Javascript
PHPMyAdmin导入时提示文件大小超出PHP限制的解决方法
2015/03/30 Javascript
Bootstrap学习笔记之css样式设计(1)
2016/06/07 Javascript
javascript cookie基础应用之记录用户名的方法
2016/09/20 Javascript
Angular2 环境配置详细介绍
2016/09/21 Javascript
vue数据双向绑定的注意点
2017/06/23 Javascript
ionic环境配置及问题详解
2017/06/27 Javascript
详解webpack自动生成html页面
2017/06/29 Javascript
Angularjs上传文件组件flowjs功能
2017/08/07 Javascript
JScript实现地址选择功能
2017/08/15 Javascript
Vue组件通信实践记录(推荐)
2017/08/15 Javascript
基于vue 添加axios组件,解决post传参数为null的问题
2018/03/05 Javascript
Angular动画实现的2种方式以及添加购物车动画实例代码
2018/08/09 Javascript
javascript中call,apply,callee,caller用法实例分析
2019/07/24 Javascript
《javascript设计模式》学习笔记四:Javascript面向对象程序设计链式调用实例分析
2020/04/07 Javascript
Python实现的简单发送邮件脚本分享
2014/11/07 Python
python3的输入方式及多组输入方法
2018/10/17 Python
Python OpenCV之图片缩放的实现(cv2.resize)
2019/06/28 Python
Python高级特性之闭包与装饰器实例详解
2019/11/19 Python
Python定义函数实现累计求和操作
2020/05/03 Python
python如何求100以内的素数
2020/05/27 Python
夏威夷咖啡公司:Hawaii Coffee Company
2019/09/19 全球购物
如何将字串String转换成整数int
2015/02/21 面试题
自荐信怎么写好
2013/11/11 职场文书
艺术学院毕业生自我评价
2014/03/02 职场文书
幼儿园安全教育月活动总结
2015/05/08 职场文书
交通事故赔偿起诉书
2015/05/20 职场文书
2015年小学数学教师个人工作总结
2015/05/25 职场文书
化工厂员工工作总结
2015/10/15 职场文书
2016感恩父亲节主题广播稿
2015/12/18 职场文书
springboot+WebMagic+MyBatis爬虫框架的使用
2021/08/07 Java/Android
python数字图像处理之图像自动阈值分割示例
2022/06/28 Python