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 onkeypress与onkeydown 事件区别详细说明
Dec 13 Javascript
html+css+js实现xp window界面及有关功能
Mar 26 Javascript
你未必知道的JavaScript和CSS交互的5种方法
Apr 02 Javascript
不使用ajax实现无刷新提交表单
Dec 21 Javascript
JavaScript简单实现弹出拖拽窗口(二)
Jun 17 Javascript
概述一个页面从输入URL到页面加载完的过程
Dec 16 Javascript
用javascript获取任意颜色的更亮或更暗颜色值示例代码
Jul 21 Javascript
ES6入门教程之Array.from()方法
Mar 23 Javascript
教你30秒发布一个TypeScript包到NPM的方法步骤
Jul 22 Javascript
Vue 中使用富文本编译器wangEditor3的方法
Sep 26 Javascript
在vue中实现某一些路由页面隐藏导航栏的功能操作
Sep 21 Javascript
vue使用echarts画组织结构图
Feb 06 Vue.js
原生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数组函数序列之ksort()对数组的元素键名进行升序排序,保持索引关系
2011/11/02 PHP
PHP实现简单汉字验证码
2015/07/28 PHP
php短信接口代码
2016/05/13 PHP
php常用日期时间函数实例小结
2019/07/04 PHP
早该知道的7个JavaScript技巧
2013/03/27 Javascript
JavaScript将相对地址转换为绝对地址示例代码
2013/07/19 Javascript
javascript 中的 delete及delete运算符
2015/11/15 Javascript
基于Vue.js实现数字拼图游戏
2016/08/02 Javascript
jQuery实现可拖拽的许愿墙效果【附demo源码下载】
2016/09/14 Javascript
IE8利用自带的setCapture和releaseCapture解决iframe的拖拽事件方法
2016/10/25 Javascript
JScript实现地址选择功能
2017/08/15 Javascript
Vue中使用的EventBus有生命周期
2018/07/12 Javascript
layer.msg()去掉默认时间,实现手动关闭的方法
2019/09/12 Javascript
IDEA配置jQuery, $符号不再显示黄色波浪线的问题
2020/10/09 jQuery
[58:25]VP vs RNG 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
在Django的模型中添加自定义方法的示例
2015/07/21 Python
详解Python3操作Mongodb简明易懂教程
2017/05/25 Python
numpy中矩阵合并的实例
2018/06/15 Python
python使用folium库绘制地图点击框
2018/09/21 Python
深度辨析Python的eval()与exec()的方法
2019/03/26 Python
python里运用私有属性和方法总结
2019/07/08 Python
django框架F&amp;Q 聚合与分组操作示例
2019/12/12 Python
Python第三方库的几种安装方式(小结)
2020/04/03 Python
基于Python中Remove函数的用法讨论
2020/12/11 Python
彪马日本官网:PUMA日本
2019/01/31 全球购物
时尚、社区、科技:SEVENSTORE
2019/04/26 全球购物
Viking比利时:购买办公用品
2019/10/30 全球购物
外语系毕业生找工作的求职信
2013/11/28 职场文书
学习两会精神心得范文
2014/03/17 职场文书
乡村卫生服务一体化管理实施方案
2014/03/30 职场文书
无房证明范本
2014/09/17 职场文书
老公给老婆的检讨书(精华篇)
2014/10/18 职场文书
2016中秋节广告语
2016/01/28 职场文书
Vue项目中如何封装axios(统一管理http请求)
2021/05/02 Vue.js
Spring Boot 使用 Spring-Retry 进行重试框架
2022/04/24 Java/Android
Mybatis-Plus 使用 @TableField 自动填充日期
2022/04/26 Java/Android