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 相关文章推荐
Some tips of wmi scripting in jscript (1)
Apr 03 Javascript
js点击页面其它地方将某个显示的DIV隐藏
Jul 12 Javascript
javascript获取和判断浏览器窗口、屏幕、网页的高度、宽度等
May 08 Javascript
javascript实现控制浏览器全屏
Mar 30 Javascript
jquery validate.js表单验证入门实例(附源码)
Nov 10 Javascript
详解JS几种变量交换方式以及性能分析对比
Nov 25 Javascript
JS使用cookie实现只出现一次的广告代码效果
Apr 22 Javascript
Vue SPA单页应用首屏优化实践
Jun 28 Javascript
Javascript 实现 Excel 导入生成图表功能
Oct 22 Javascript
创建Vue项目以及引入Iview的方法示例
Dec 03 Javascript
Vue源码学习之关于对Array的数据侦听实现
Apr 23 Javascript
Vue常用传值方式、父传子、子传父及非父子实例分析
Feb 24 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 自定义错误处理函数trigger_error()
2013/03/26 PHP
php分页示例分享
2014/04/30 PHP
浅谈PHP中单引号和双引号到底有啥区别呢?
2015/03/04 PHP
typecho插件编写教程(三):保存配置
2015/05/28 PHP
由php中字符offset特征造成的绕过漏洞详解
2017/07/07 PHP
基于jquery的checkbox下拉框插件代码
2010/06/25 Javascript
extjs ColumnChart设置不同的颜色实现代码
2013/05/17 Javascript
解析javascript系统错误:-1072896658的解决办法
2013/07/08 Javascript
javascript自定义的addClass()方法
2014/05/28 Javascript
JavaScript使用shift方法移除素组第一个元素实例分析
2015/04/06 Javascript
整理Javascript流程控制语句学习笔记
2015/11/29 Javascript
Position属性之relative用法
2015/12/14 Javascript
jQuery与JS加载事件用法分析
2016/09/04 Javascript
JS去掉字符串前后空格、阻止表单提交的实现代码
2017/06/08 Javascript
浅谈vue-lazyload实现的详细过程
2017/08/22 Javascript
10行原生JS实现文字无缝滚动(超简单)
2018/01/02 Javascript
vue中父子组件注意事项,传值及slot应用技巧
2018/05/09 Javascript
微信网页授权并获取用户信息的方法
2018/07/30 Javascript
解决vue动态为数据添加新属性遇到的问题
2018/09/18 Javascript
angularJs在多个控制器中共享服务数据的方法
2018/09/30 Javascript
微信小程序 select 下拉框组件功能
2019/09/09 Javascript
Javascript如何实现扩充基本类型
2020/08/26 Javascript
[00:43]拉比克至宝魔导师密钥展示
2018/12/20 DOTA
讲解python参数和作用域的使用
2013/11/01 Python
python线程中同步锁详解
2018/04/27 Python
详解python Todo清单实战
2018/11/01 Python
Django 实现外键去除自动添加的后缀‘_id’
2019/11/15 Python
python针对Oracle常见查询操作实例分析
2020/04/30 Python
python语言是免费还是收费的?
2020/06/15 Python
Python使用requests模块爬取百度翻译
2020/08/25 Python
Fox Racing官方网站:越野摩托车和山地自行车装备和服装
2019/12/23 全球购物
什么是方法的重载
2013/06/24 面试题
四好少年事迹材料
2014/01/12 职场文书
《画杨桃》教学反思
2014/04/13 职场文书
公文写作:教你写“建议书”
2019/05/07 职场文书
Jpa Specification如何实现and和or同时使用查询
2021/11/23 Java/Android