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页面上使用动态时间具体实现
Mar 18 Javascript
详解JavaScript ES6中的模板字符串
Jul 28 Javascript
基于jQuery Bar Indicator 插件实现进度条展示效果
Sep 30 Javascript
React操作真实DOM实现动态吸底部的示例
Oct 23 Javascript
vue注册组件的几种方式总结
Mar 08 Javascript
jQuery简单实现的HTML页面文本框模糊匹配查询功能完整示例
May 09 jQuery
解决vue-cli单页面手机应用input点击手机端虚拟键盘弹出盖住input问题
Aug 25 Javascript
vue服务端渲染缓存应用详解
Sep 12 Javascript
微信小程序发送短信验证码完整实例
Jan 07 Javascript
使用ThinkJs搭建微信中控服务的实现方法
Aug 08 Javascript
Vue中keep-alive的两种应用方式
Jul 15 Javascript
javascript中导出与导入实现模块化管理教程
Dec 03 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格式化工具Beautify PHP小小BUG
2008/04/24 PHP
php使用递归计算文件夹大小
2014/12/24 PHP
Laravel 5框架学习之向视图传送数据(进阶篇)
2015/04/08 PHP
php伪静态验证码不显示的解决方案
2019/09/26 PHP
TP5框架实现签到功能的方法分析
2020/04/05 PHP
JS获取IUSR_机器名和IWAM_机器名帐号的密码
2006/12/06 Javascript
IE6、IE7中setAttribute不支持class/for/rowspan/colspan等属性
2011/08/28 Javascript
jquery插件开发注意事项小结
2013/06/04 Javascript
文件编码导致jquery失效的解决方法
2013/06/26 Javascript
jquery ui dialog实现弹窗特效的思路及代码
2013/08/03 Javascript
JQuery页面图片切换和新闻列表滚动效果的具体实现
2013/09/26 Javascript
JS采用绝对定位实现回到顶部效果完整实例
2016/06/20 Javascript
JS中绑定事件顺序(事件冒泡与事件捕获区别)
2017/01/24 Javascript
基于vue实现swipe轮播组件实例代码
2017/05/24 Javascript
原生JS实现留言板功能
2020/02/08 Javascript
[01:10:16]DOTA2上海特级锦标赛B组资格赛#2 Fnatic VS Spirit第一局
2016/02/27 DOTA
[55:18]Liquid vs Chaos 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
Django发送html邮件的方法
2015/05/26 Python
Python模拟用户登录验证
2017/09/11 Python
python 3.5实现检测路由器流量并写入txt的方法实例
2017/12/17 Python
一篇文章彻底搞懂Python中可迭代(Iterable)、迭代器(Iterator)与生成器(Generator)的概念
2019/05/13 Python
解决python中导入win32com.client出错的问题
2019/07/26 Python
如何使用python实现模拟鼠标点击
2020/01/06 Python
Python Selenium异常处理的实例分析
2021/02/28 Python
美国男士和女士奢侈品折扣手表购物网站:Certified Watch Store
2018/06/13 全球购物
女孩每月服装订阅盒:kidpik
2019/04/17 全球购物
党员入党表决心的话
2014/03/11 职场文书
巾帼建功标兵事迹材料
2014/05/11 职场文书
北京奥运会主题口号
2014/06/13 职场文书
敬老院标语
2014/06/27 职场文书
2015年医院科室工作总结范文
2015/05/26 职场文书
2015年教师节主持词
2015/07/03 职场文书
2016春季运动会通讯稿
2015/07/18 职场文书
python使用glob检索文件的操作
2021/05/20 Python
微软Win11有哪些隐藏功能? windows11多个功能汇总
2021/11/21 数码科技
MySQL视图概念以及相关应用
2022/04/19 MySQL