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实现文本框中焦点在最后位置
Mar 04 Javascript
JavaScript获取当前网页标题(title)的方法
Apr 03 Javascript
解决angular的$http.post()提交数据时后台接收不到参数值问题的方法
Dec 10 Javascript
Bootstrap入门书籍之(零)Bootstrap简介
Feb 17 Javascript
javascript封装addLoadEvent实现页面同时加载执行多个函数的方法
Jul 25 Javascript
JavaScript的兼容性与调试技巧
Nov 22 Javascript
原生JS实现幻灯片
Feb 22 Javascript
微信小程序开发之map地图实现教程
Jun 08 Javascript
对angularJs中自定义指令replace的属性详解
Oct 09 Javascript
jquery操作select常见方法大全【7种情况】
May 28 jQuery
JavaScript常用内置对象用法分析
Jul 09 Javascript
压缩Vue.js打包后的体积方法总结(Vue.js打包后体积过大问题)
Feb 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
phpmyadmin配置文件现在需要绝密的短密码(blowfish_secret)的2种解决方法
2014/05/07 PHP
PHP函数getenv简介和使用实例
2014/05/12 PHP
php自定义中文字符串截取函数substr_for_gb2312及substr_for_utf8示例
2016/05/28 PHP
Laravel网站打开速度优化的方法汇总
2017/07/16 PHP
将光标定位于输入框最右侧实现代码
2012/12/04 Javascript
jQuery查询数据返回object和字符串影响原因是什么
2013/08/09 Javascript
javascript简单实现图片预加载
2014/12/03 Javascript
深入理解(function(){... })();
2016/08/16 Javascript
jquery.tableSort.js表格排序插件使用方法详解
2020/08/12 Javascript
jQuery点击头像上传并预览图片
2017/02/23 Javascript
基于js文件加载优化(详解)
2018/01/03 Javascript
JavaScript find()方法及返回数据实例
2020/04/30 Javascript
js事件机制----捕获与冒泡机制实例分析
2020/05/22 Javascript
Postman参数化实现过程及原理解析
2020/08/13 Javascript
从零学python系列之浅谈pickle模块封装和拆封数据对象的方法
2014/05/23 Python
讲解Python中fileno()方法的使用
2015/05/24 Python
详解python之配置日志的几种方式
2017/05/22 Python
解决pycharm remote deployment 配置的问题
2019/06/27 Python
python中比较两个列表的实例方法
2019/07/04 Python
python 视频逐帧保存为图片的完整实例
2019/12/10 Python
Java如何基于wsimport调用wcf接口
2020/06/17 Python
Python Selenium模块安装使用教程详解
2020/07/09 Python
Python3爬虫中pyspider的安装步骤
2020/07/29 Python
PyCharm2020.3.2安装超详细教程
2021/02/08 Python
新百伦折扣店:Joe’s New Balance Outlet
2016/08/20 全球购物
美国演唱会订票网站:Ticketmaster美国
2017/10/05 全球购物
美国在线眼镜店:GlassesShop
2018/11/15 全球购物
JSP和EJB可以共享HttpSession么?EJB里面可以改变session里面的内容
2013/06/05 面试题
ruby如何进行集成操作?Ruby能进行多重继承吗?
2013/10/16 面试题
寄语十八大感言
2014/02/07 职场文书
土地转让协议书范本
2014/04/15 职场文书
导师工作推荐信范文
2014/05/17 职场文书
幼儿园秋季开学寄语
2014/08/02 职场文书
创先争优活动心得体会
2014/09/04 职场文书
大学团日活动新闻稿
2014/09/10 职场文书
文明上网主题班会
2015/08/14 职场文书