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 相关文章推荐
利用JS延迟加载百度分享代码,提高网页速度
Jul 01 Javascript
JavaScript变量声明详解
Nov 27 Javascript
jquery实现对联广告的方法
Feb 05 Javascript
完美实现八种js焦点轮播图(上篇)
Jul 18 Javascript
Vue自定义指令介绍(2)
Dec 08 Javascript
jquery实现下拉框多选方法介绍
Jan 03 Javascript
jQuery代码实现实时获取时间
Jan 29 Javascript
a标签置灰不可点击的实现方法
Feb 06 Javascript
JS实现双击内容变为可编辑状态
Mar 03 Javascript
JavaScript Canvas实现验证码
Aug 02 Javascript
使用RN Animated做一个“添加购物车”动画的方法
Sep 12 Javascript
js中自定义react数据验证组件实例详解
Oct 19 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实现用户认证及管理完全源码
2007/03/11 PHP
深入php中var_dump方法的使用详解
2013/06/24 PHP
php实现文件下载(支持中文文名)
2013/12/04 PHP
PHP中的排序函数sort、asort、rsort、krsort、ksort区别分析
2014/08/18 PHP
PHP使用星号隐藏用户名,手机和邮箱的实现方法
2016/09/22 PHP
Laravel手动分页实现方法详解
2016/10/09 PHP
php支付宝系列之电脑网站支付
2018/05/30 PHP
Yii2框架加载css和js文件的方法分析
2019/05/25 PHP
一个用js实现控制台控件的代码
2007/09/04 Javascript
用JS将搜索的关键字高亮显示实现代码
2013/11/08 Javascript
webapp框架AngularUI的demo改造之路
2014/12/21 Javascript
浅谈javascript面向对象程序设计
2015/01/21 Javascript
jQuery对象初始化的传参方式
2015/02/26 Javascript
jQuery中Ajax全局事件引用方式及各个事件(全局/局部)执行顺序
2016/06/02 Javascript
JavaScript必知必会(五) eval 的使用
2016/06/08 Javascript
html中鼠标滚轮事件onmousewheel的处理方法
2016/11/11 Javascript
基于jQuery实现文字打印动态效果
2017/04/21 jQuery
详解Node.js项目APM监控之New Relic
2017/05/12 Javascript
详解在vue-cli中引用jQuery、bootstrap以及使用sass、less编写css
2017/11/08 jQuery
Angular4学习教程之DOM属性绑定详解
2018/01/04 Javascript
在vscode中统一vue编码风格的方法
2018/02/22 Javascript
Vue中使用vux配置代码详解
2018/09/16 Javascript
highCharts提示框中显示当前时间的方法
2019/01/18 Javascript
微信小程序利用swiper+css实现购物车商品删除功能
2019/03/06 Javascript
javascript跳转与返回和刷新页面的实例代码
2019/11/20 Javascript
Python中使用logging模块打印log日志详解
2015/04/05 Python
关于pytorch多GPU训练实例与性能对比分析
2019/08/19 Python
Django自定义模板过滤器和标签的实现方法
2019/08/21 Python
python解释器spython使用及原理解析
2019/08/24 Python
python2.7实现复制大量文件及文件夹资料
2019/08/31 Python
HTML5 绘制图像(上)之:关于canvas元素引领下一代web页面的问题
2013/04/24 HTML / CSS
护理专业毕业生推荐信
2013/10/31 职场文书
洗发露广告词
2014/03/14 职场文书
IT工程师岗位职责
2014/07/04 职场文书
高中教师个人工作总结
2015/02/10 职场文书
dubbo服务整合zipkin详解
2021/07/26 Java/Android