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之undefined篇(上)
Nov 22 Javascript
两个比较有用的Javascript工具函数代码
Feb 17 Javascript
Bootstrap编写一个在当前网页弹出可关闭的对话框 非弹窗
Jun 30 Javascript
Vue.js快速入门实例教程
Oct 15 Javascript
浅析location.href跨窗口调用函数
Nov 22 Javascript
引入JavaScript时alert弹出框显示中文乱码问题
Sep 16 Javascript
浅谈React Event实现原理
Sep 20 Javascript
微信小程序实现拍照画布指定区域生成图片
Jul 18 Javascript
vue.js实现图书管理功能
Sep 24 Javascript
浅谈vue中组件绑定事件时是否加.native
Nov 09 Javascript
Vue如何将页面导出成PDF文件
Aug 17 Javascript
详解vue中v-for的key唯一性
May 15 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-Fcgi下PHP的执行时间设置方法
2013/08/02 PHP
PHP面向对象之旅:深入理解static变量与方法
2014/01/06 PHP
PHP函数getenv简介和使用实例
2014/05/12 PHP
PHP中开启gzip压缩的2种方法
2015/01/31 PHP
php微信开发接入
2016/08/27 PHP
jQuery Lightbox 图片展示插件使用说明
2010/04/25 Javascript
jquery 插件开发 extjs中的extend用法小结
2013/01/04 Javascript
jquery入门—访问DOM对象方法
2013/01/07 Javascript
JQuery设置时间段下拉选择实例
2014/12/30 Javascript
JavaScript编程中的Promise使用大全
2015/07/28 Javascript
在Web项目中引入Jquery插件报错的完美解决方案(图解)
2016/09/19 Javascript
浅谈js函数的多种定义方法与区别
2016/11/29 Javascript
js实现短信发送倒计时功能(正则验证)
2017/02/10 Javascript
javascript设计模式之单体模式学习笔记
2017/02/15 Javascript
简单谈谈require模块化jquery和angular的问题
2017/06/23 jQuery
vue router demo详解
2017/10/13 Javascript
javaScript日期工具类DateUtils详解
2017/12/08 Javascript
ant design实现圈选功能
2019/12/17 Javascript
Vue 一键清空表单的实现方法
2020/02/07 Javascript
Python下singleton模式的实现方法
2014/07/16 Python
pycharm远程调试openstack代码
2017/11/21 Python
urllib和BeautifulSoup爬取维基百科的词条简单实例
2018/01/17 Python
Python3.7中安装openCV库的方法
2018/07/11 Python
浅谈python之新式类
2018/08/12 Python
使用Python实现将list中的每一项的首字母大写
2019/06/11 Python
opencv+python实现鼠标点击图像,输出该点的RGB和HSV值
2020/06/02 Python
PyQt5的QWebEngineView使用示例
2020/10/20 Python
乌克兰香水和化妆品网站:Notino.ua
2018/03/26 全球购物
介绍一下如何利用路径遍历进行攻击及如何防范
2014/01/19 面试题
营销与策划专业毕业生求职信
2013/11/01 职场文书
数学系毕业生的自我评价
2014/01/10 职场文书
《童年》教学反思
2014/02/18 职场文书
2014企业领导班子四风对照检查材料思想汇报
2014/09/17 职场文书
个人工作能力自我评价
2015/03/05 职场文书
《打电话》教学反思
2016/02/22 职场文书
DSP接收机前端设想
2022/04/05 无线电