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 相关文章推荐
如何快速的呈现我们的网页的技巧整理
Jul 01 Javascript
js小技巧--自动隐藏红叉叉
Aug 13 Javascript
jQuery学习7 操作JavaScript对象和集合的函数
Feb 07 Javascript
javascript实现的元素拖动函数宿主为浏览器
Jul 21 Javascript
JavaScript调用客户端Java程序的方法
Jul 27 Javascript
js中substr,substring,indexOf,lastIndexOf,split,replace的用法详解
Nov 09 Javascript
基于百度地图实现产品销售的单位位置查看功能设计与实现
Oct 21 Javascript
jQuery.Form上传文件操作
Feb 05 Javascript
浅谈关于.vue文件中style的scoped属性
Aug 19 Javascript
node thread.sleep实现示例
Jun 20 Javascript
jQuery实现带3D切割效果的轮播图功能示例【附源码下载】
Apr 04 jQuery
Vue退出登录时清空缓存的实现
Nov 12 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
一个多文件上传的例子(原创)
2006/10/09 PHP
PHP实现向关联数组指定的Key之前插入元素的方法
2017/06/06 PHP
PHP实现webshell扫描文件木马的方法
2017/07/31 PHP
JS中彻底删除JSON对象组成的数组中的元素
2020/09/22 PHP
控制打印时页眉角的代码
2007/02/08 Javascript
JavaScript RegExp方法获取地址栏参数(面向对象)
2009/03/10 Javascript
本人自用的global.js库源码分享
2015/02/28 Javascript
JQuery+EasyUI轻松实现步骤条效果
2016/02/22 Javascript
深入理解JavaScript内置函数
2016/06/03 Javascript
Bootstrap Scrollspy源码学习
2017/03/02 Javascript
Nodejs回调加超时限制两种实现方法
2017/06/09 NodeJs
vue.js国际化 vue-i18n插件的使用详解
2017/07/07 Javascript
vue引入jq插件的实例讲解
2017/09/12 Javascript
javascript input输入框模糊提示功能的实现
2017/09/25 Javascript
Nodejs对postgresql基本操作的封装方法
2019/02/20 NodeJs
JavaScript迭代器的含义及用法
2019/06/21 Javascript
在vue-cli 3中给stylus、sass样式传入共享的全局变量
2019/08/12 Javascript
vue实现淘宝购物车功能
2020/04/20 Javascript
js实现弹窗效果
2020/08/09 Javascript
Node.js利用Express实现用户注册登陆功能(推荐)
2020/10/26 Javascript
python实现识别相似图片小结
2016/02/22 Python
Python的时间模块datetime详解
2017/04/17 Python
OpenCV-Python实现轮廓检测实例分析
2018/01/05 Python
Python实现利用163邮箱远程关电脑脚本
2018/02/22 Python
对numpy.append()里的axis的用法详解
2018/06/28 Python
对numpy中的transpose和swapaxes函数详解
2018/08/02 Python
python 字符串追加实例
2019/07/20 Python
Python中Pyspider爬虫框架的基本使用详解
2021/01/27 Python
python 高阶函数简单介绍
2021/02/19 Python
CSS3教程(1):什么是CSS3
2009/04/02 HTML / CSS
顶级宝石首饰网络零售商:Angara
2016/10/25 全球购物
荷兰本土平价百货:HEMA
2017/10/23 全球购物
千元咖啡店的创业计划书范文
2013/12/29 职场文书
保险专业自荐信范文
2014/02/20 职场文书
2015年师德师风承诺书
2015/01/22 职场文书
公司承诺书格式范文
2015/04/28 职场文书