jquery对象和DOM对象的相互转换详解


Posted in Javascript onOctober 18, 2016

jquery对象和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操作xml
Nov 04 Javascript
理解Javascript_02_理解undefined和null
Oct 11 Javascript
js 文本滚动效果的实例代码
Aug 17 Javascript
浅析JavaScript基本类型与引用类型
May 28 Javascript
详谈JavaScript内存泄漏
Nov 14 Javascript
vue语法之拼接字符串的示例代码
Oct 25 Javascript
实例学习JavaScript读取和写入cookie
Jan 29 Javascript
详解Vue.js项目API、Router配置拆分实践
Mar 16 Javascript
在vue中使用echarts图表实例代码详解
Oct 22 Javascript
微信小程序与webview交互实现支付功能
Jun 07 Javascript
Angular如何由模板生成DOM树的方法
Dec 23 Javascript
可拖拽组件slider.js使用方法详解
Dec 04 Javascript
原生js实现网易轮播图效果
Apr 10 #Javascript
浅谈bootstrap使用中的一些问题以及解决过程
Oct 18 #Javascript
JSON对象 详解及实例代码
Oct 18 #Javascript
简易的JS计算器实现代码
Oct 18 #Javascript
用自定义图片代替原生checkbox实现全选,删除以及提交的方法
Oct 18 #Javascript
jquery中用jsonp实现搜索框功能
Oct 18 #Javascript
JavaScript排序算法动画演示效果的实现方法
Oct 18 #Javascript
You might like
php读取csv数据保存到数组的方法
2015/01/03 PHP
php显示指定目录下子目录的方法
2015/03/20 PHP
PHP实现的进度条效果详解
2016/05/03 PHP
php基于session锁防止阻塞请求的方法分析
2017/08/07 PHP
php实现微信企业付款到个人零钱功能
2018/10/09 PHP
PHP单例模式数据库连接类与页面静态化实现方法
2019/03/20 PHP
PHP进阶学习之命名空间基本用法分析
2019/06/18 PHP
php模拟post提交请求调用接口示例解析
2020/08/07 PHP
javascript globalStorage类代码
2009/06/04 Javascript
一些相见恨晚的 JavaScript 技巧
2010/04/25 Javascript
node.js中的path.extname方法使用说明
2014/12/09 Javascript
node.js中的fs.exists方法使用说明
2014/12/17 Javascript
TypeError document.getElementById(...) is null错误原因
2015/05/18 Javascript
在for循环中length值是否需要缓存
2015/07/27 Javascript
基于Arcgis for javascript实现百度地图ABCD marker的效果
2015/09/12 Javascript
微信小程序 实战实例开发流程详细介绍
2017/01/05 Javascript
mui上拉加载功能实例详解
2017/04/13 Javascript
解决vue 绑定对象内点击事件失效问题
2018/09/05 Javascript
Node.js JSON模块用法实例分析
2019/01/04 Javascript
JS使用Prim算法和Kruskal算法实现最小生成树
2019/01/17 Javascript
Python对象的深拷贝和浅拷贝详解
2014/08/25 Python
Python 列表list使用介绍
2014/11/30 Python
python获取各操作系统硬件信息的方法
2015/06/03 Python
Python基于pygame实现的弹力球效果(附源码)
2015/11/11 Python
利用Python中unittest实现简单的单元测试实例详解
2017/01/09 Python
详解python调度框架APScheduler使用
2017/03/28 Python
详解Python读取yaml文件多层菜单
2019/03/23 Python
python爬虫 urllib模块发起post请求过程解析
2019/08/20 Python
python动态文本进度条的实例代码
2020/01/22 Python
python 基于opencv 绘制图像轮廓
2020/12/11 Python
西班牙香水和化妆品网上商店:Douglas
2017/10/29 全球购物
Sisley法国希思黎中国官网:享誉全球的奢华植物美容品牌
2019/06/30 全球购物
The Hut英国:英国领先的豪华在线百货商店
2019/07/26 全球购物
实习医生自我评价
2013/09/22 职场文书
《四季》教学反思
2014/04/08 职场文书
小学教师教学反思
2016/02/24 职场文书