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 相关文章推荐
JS加ASP二级域名转向的代码
May 17 Javascript
Js,alert出现乱码问题的解决方法
Jun 19 Javascript
js数字转换为float,取N位小数
Feb 08 Javascript
javascript的数组和常用函数详解
May 09 Javascript
jQuery事件绑定on()、bind()与delegate() 方法详解
Jun 03 Javascript
jQuery切换所有复选框选中状态的方法
Jul 02 Javascript
JavaScript人脸识别技术及脸部识别JavaScript类库Tracking.js
Sep 14 Javascript
JavaScript中最容易混淆的作用域、提升、闭包知识详解(推荐)
Sep 05 Javascript
基于百度地图实现产品销售的单位位置查看功能设计与实现
Oct 21 Javascript
微信小程序 实现动态显示和隐藏某个控件
Apr 27 Javascript
微信小程序日历组件calendar详解及实例
Jun 08 Javascript
浅析JavaScript中的事件委托机制跟深浅拷贝
Jan 20 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
AJAX for PHP简单表数据查询实例
2007/01/02 PHP
PHP 读取大文件的X行到Y行内容的实现代码
2013/06/24 PHP
PHP IE中下载附件问题解决方法
2014/01/07 PHP
PHP批量上传图片的具体实现方法介绍.
2014/02/26 PHP
让CodeIgniter数据库缓存自动过期的处理的方法
2014/06/12 PHP
php+Mysqli利用事务处理转账问题实例
2015/02/11 PHP
jquery 弹出层实现代码
2009/10/30 Javascript
JQuery获取元素文档大小、偏移和位置和滚动条位置的方法集合
2010/01/12 Javascript
javascript解析xml实现省市县三级联动的方法
2015/07/25 Javascript
js实现简洁大方的二级下拉菜单效果代码
2015/09/01 Javascript
每个程序员都需要学习 JavaScript 的7个理由小结
2016/09/03 Javascript
整理关于Bootstrap列表组的慕课笔记
2017/03/29 Javascript
原生JavaScript实现精美的淘宝轮播图效果示例【附demo源码下载】
2017/05/27 Javascript
详解JS获取HTML DOM元素的8种方法
2017/06/17 Javascript
mui框架移动开发初体验详解
2017/10/11 Javascript
JS实现图片轮播效果实例详解【可自动和手动】
2019/04/04 Javascript
实例详解vue中的$root和$parent
2019/04/29 Javascript
微信小程序服务器日期格式化问题
2020/01/07 Javascript
vue+elementUi 实现密码显示/隐藏+小图标变化功能
2020/01/18 Javascript
[43:35]TI4 循环赛第二日Liquid vs Fnatic
2014/07/11 DOTA
[44:04]OG vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
在Python中关于中文编码问题的处理建议
2015/04/08 Python
Python实现利用最大公约数求三个正整数的最小公倍数示例
2017/09/30 Python
python中print()函数的“,”与java中System.out.print()函数中的“+”功能详解
2017/11/24 Python
Python获取数据库数据并保存在excel表格中的方法
2019/06/12 Python
pygame实现五子棋游戏
2019/10/29 Python
python实现MySQL指定表增量同步数据到clickhouse的脚本
2021/02/26 Python
从一次项目重构说起CSS3自定义变量在项目的使用方法
2021/03/01 HTML / CSS
html5 figure和figcaption的使用方法
2018/09/10 HTML / CSS
路易威登和香奈儿手袋:LuxeDH
2017/01/12 全球购物
预备党员入党思想汇报
2014/01/04 职场文书
法制宣传月活动总结
2014/04/29 职场文书
教师查摆问题自查报告
2014/10/11 职场文书
2015大学迎新晚会策划书
2015/07/16 职场文书
《狼牙山五壮士》教学反思
2016/02/17 职场文书
拙作再改《我的收音机情缘》
2022/04/05 无线电