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 相关文章推荐
网页自动刷新,不产生嗒嗒声的一个解决方法
Mar 27 Javascript
Ext grid 添加右击菜单
Nov 26 Javascript
使用jQuery快速解决input中placeholder值在ie中无法支持的问题
Jan 02 Javascript
innerHTML动态添加html代码和脚本兼容多个浏览器
Oct 11 Javascript
JavaScript Sort 的一个错误用法示例
Mar 20 Javascript
javascript模拟C#格式化字符串
Aug 26 Javascript
javascript实现自动输出文本(打字特效)
Aug 27 Javascript
jquery Banner轮播选项卡
Dec 26 Javascript
详解Puppeteer 入门教程
May 09 Javascript
JS数组实现分类统计实例代码
Sep 30 Javascript
Vue的状态管理vuex使用方法详解
Feb 05 Javascript
vue 函数调用加括号与不加括号的区别
Oct 29 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中加密解密函数与DES加密解密实例
2014/10/17 PHP
使用PHPMailer实现邮件发送代码分享
2014/10/23 PHP
javascript中获取选中对象的类型
2007/04/02 Javascript
JavaScript下申明对象的几种方法小结
2008/10/02 Javascript
jquery 日期分离成年月日的代码
2010/05/14 Javascript
用JS判断IE版本的代码 超管用!
2011/08/09 Javascript
js中switch case循环实例代码
2013/12/30 Javascript
JavaScript实现LI列表数据绑定的方法
2015/08/04 Javascript
详解Node.js模块间共享数据库连接的方法
2016/05/24 Javascript
canvas快速绘制圆形、三角形、矩形、多边形方法介绍
2016/12/29 Javascript
js放大镜放大购物图片效果
2017/01/18 Javascript
JavaScript正则替换HTML标签功能示例
2017/03/02 Javascript
jquery拼接ajax 的json和字符串拼接的方法
2017/03/11 Javascript
基于angular实现三级联动的生日插件
2017/05/12 Javascript
浅谈vue-cli 3.0.x 初体验
2018/04/11 Javascript
微信小程序实现滴滴导航tab切换效果
2018/07/24 Javascript
读懂CommonJS的模块加载
2019/04/19 Javascript
jQuery实现动态加载(按需加载)javascript文件的方法分析
2019/05/31 jQuery
vue实现表格过滤功能
2019/09/27 Javascript
jQuery实现轮播图效果demo
2020/01/11 jQuery
Python selenium文件上传方法汇总
2020/11/19 Python
Python3实现并发检验代理池地址的方法
2016/09/18 Python
Python实现按特定格式对文件进行读写的方法示例
2017/11/30 Python
使用Python开发SQLite代理服务器的方法
2018/12/07 Python
Python面向对象类编写细节分析【类,方法,继承,超类,接口等】
2019/01/05 Python
Python抓新型冠状病毒肺炎疫情数据并绘制全国疫情分布的代码实例
2020/02/05 Python
Python 分布式缓存之Reids数据类型操作详解
2020/06/24 Python
html5视频播放_动力节点Java学院整理
2017/07/13 HTML / CSS
行政部总经理岗位职责
2014/01/04 职场文书
小学生班会演讲稿
2014/01/09 职场文书
离婚财产分隔协议书
2014/10/23 职场文书
2014年教研员工作总结
2014/12/23 职场文书
2015年中学团委工作总结
2015/07/22 职场文书
Java获取e.printStackTrace()打印的信息方式
2021/08/07 Java/Android
Python语言中的数据类型-序列
2022/02/24 Python
css中:last-child不生效的解决方法
2022/08/05 HTML / CSS