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列举css中所有图标的实现代码
Jul 04 Javascript
js中document.write使用过程中的一点疑问解答
Mar 20 Javascript
JavaScript中常见获取元素的方法汇总
Mar 04 Javascript
js实现YouKu的漂亮搜索框效果
Aug 19 Javascript
jQuery 1.9.1源码分析系列(十三)之位置大小操作
Dec 02 Javascript
jQuery的promise与deferred对象在异步回调中的作用
May 03 Javascript
Node.js中npm常用命令大全
Jun 09 Javascript
浅析jsopn跨域请求原理及cors(跨域资源共享)的完美解决方法
Feb 06 Javascript
基于JavaScript实现的希尔排序算法分析
Apr 14 Javascript
vue组件 $children,$refs,$parent的使用详解
Jul 31 Javascript
React Native中导航组件react-navigation跨tab路由处理详解
Oct 31 Javascript
vue 进阶之实现父子组件间的传值
Apr 26 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产生动态的影像图
2006/10/09 PHP
PHP mb_convert_encoding文字编码的转换函数介绍
2011/11/10 PHP
解析PHP留言本模块主要功能的函数说明(代码可实现)
2013/06/25 PHP
php实现的pdo公共类定义与用法示例
2017/07/19 PHP
Django中的cookie与session操作实例代码
2017/08/17 PHP
PHP双向链表定义与用法示例
2018/01/31 PHP
用Javascript数组处理多个字符串的连接问题
2009/08/20 Javascript
JavaScript 事件记录使用说明
2009/10/20 Javascript
JS+CSS实现简易实用的滑动门菜单效果
2015/09/18 Javascript
详解JavaScript中的自定义事件编写
2016/05/10 Javascript
原生js封装二级城市下拉列表的实现代码
2016/06/16 Javascript
JQ中$(window).load和$(document).ready区别与执行顺序
2017/03/01 Javascript
js实现带进度条提示的多视频上传功能
2020/12/13 Javascript
解决Vue使用mint-ui loadmore实现上拉加载与下拉刷新出现一个页面使用多个上拉加载后冲突问题
2017/11/07 Javascript
JS获取今天是本月第几周、本月共几周、本月有多少天、是今年的第几周、是今年的第几天的示例代码
2018/12/05 Javascript
JavaScript面试技巧之数组的一些不low操作
2019/03/22 Javascript
Vue路由前后端设计总结
2019/08/06 Javascript
用js限制网页只在微信浏览器中打开(或者只能手机端访问)
2020/12/24 Javascript
在vue中实现某一些路由页面隐藏导航栏的功能操作
2020/09/21 Javascript
浅谈python jieba分词模块的基本用法
2017/11/09 Python
python实现图书借阅系统
2019/02/20 Python
Python两台电脑实现TCP通信的方法示例
2019/05/06 Python
程序员的七夕用30行代码让Python化身表白神器
2019/08/07 Python
tensorflow 模型权重导出实例
2020/01/24 Python
Python小白不正确的使用类变量实例
2020/05/29 Python
HTML5-WebSocket实现聊天室示例
2016/12/15 HTML / CSS
简单的HTML5初步入门教程
2015/09/29 HTML / CSS
植村秀美国官网:Shu Uemura美国
2019/03/19 全球购物
巴西化妆品商店:Lojas Rede
2019/07/26 全球购物
销售人员自我评价怎么写
2013/09/19 职场文书
触摸春天教学反思
2014/02/03 职场文书
幼儿园中班教师寄语
2014/04/03 职场文书
《沙漠中的绿洲》教学反思
2014/04/24 职场文书
班级出游活动计划书
2014/08/15 职场文书
员工给公司的建议书
2019/06/24 职场文书
python中 .npy文件的读写操作实例
2022/04/14 Python