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 事件对象属性小结
Apr 27 Javascript
js实现同一页面多个不同运动效果的方法
Apr 10 Javascript
深入解析JavaScript中的数字对象与字符串对象
Oct 21 Javascript
jquery取消事件冒泡的三种方法(推荐)
May 28 Javascript
JSON与String互转的实现方法(Javascript)
Sep 27 Javascript
JS中数组重排序方法
Nov 11 Javascript
jquery实现异步加载图片(懒加载图片一种方式)
Apr 24 jQuery
jqgrid实现简单的单行编辑功能
Sep 30 Javascript
Angular实现可删除并计算总金额的购物车功能示例
Dec 26 Javascript
jquery.onoff实现简单的开关按钮功能(推荐)
May 24 jQuery
微信小程序 如何保持登录状态
Aug 16 Javascript
layui多图上传实现删除功能的例子
Sep 23 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
thinkphp3.0输出重复两次的解决方法
2014/12/19 PHP
php实现mysql数据库分表分段备份
2015/06/18 PHP
php页面跳转session cookie丢失导致不能登录等问题的解决方法
2016/12/12 PHP
javascript 验证日期的函数
2010/03/18 Javascript
使用UglifyJS合并/压缩JavaScript的方法
2012/03/07 Javascript
Ext JS 4官方文档之三 -- 类体系概述与实践
2012/12/16 Javascript
checkbox使用示例
2013/08/23 Javascript
js中运算符&amp;&amp; 和 || 的使用记录
2014/08/21 Javascript
JS+CSS实现仿msn风格选项卡效果代码
2015/10/22 Javascript
JS实现响应鼠标点击动画渐变弹出层效果代码
2016/03/25 Javascript
jQuery实现鼠标经过购物车出现下拉框代码(推荐)
2016/07/21 Javascript
JavaScript中三个等号和两个等号的区别(== 和 ===)浅析
2016/09/22 Javascript
javascript iframe跨域详解
2016/10/26 Javascript
ajax 提交数据到后台jsp页面及页面跳转问题
2017/01/19 Javascript
原生JS与jQuery编写简单选项卡
2017/10/30 jQuery
angularjs实现table表格td单元格单击变输入框/可编辑状态示例
2019/02/21 Javascript
用 js 写一个 js 解释器过程详解
2019/08/02 Javascript
JS中的算法与数据结构之常见排序(Sort)算法详解
2019/08/16 Javascript
vue-cli4.x创建企业级项目的方法步骤
2020/06/18 Javascript
解决echarts数据二次渲染不成功的问题
2020/07/20 Javascript
python中base64加密解密方法实例分析
2015/05/16 Python
使用Python脚本生成随机IP的简单方法
2015/07/30 Python
python 信息同时输出到控制台与文件的实例讲解
2018/05/11 Python
python日期时间转为字符串或者格式化输出的实例
2018/05/29 Python
python爬取网页内容转换为PDF文件
2020/07/28 Python
使用Django连接Mysql数据库步骤
2019/01/15 Python
python print出共轭复数的方法详解
2019/06/25 Python
python issubclass 和 isinstance函数
2019/07/25 Python
Win10用vscode打开anaconda环境中的python出错问题的解决
2020/05/25 Python
html5 figure和figcaption的使用方法
2018/09/10 HTML / CSS
Petmate品牌官方网站:宠物用品
2018/11/25 全球购物
《窗前的气球》教学反思
2014/04/07 职场文书
广告学专业求职信
2014/06/19 职场文书
优秀应届本科生求职信
2014/07/19 职场文书
单位单身证明样本
2014/10/11 职场文书
Pygame如何使用精灵和碰撞检测
2021/11/17 Python