今天我们来讲一个小知识点, 之前有个学员问我, jQuery 和 JavaScriptDOM 对象的方法不能互相调用吗? 需要怎么转换? 相信很多初学者都是一直认为, DOM 对象和 jQuery 对象是同一个, 能相互转换使用方法. 那么我们今天就来说说他们的区别, 和转换的方法.
什么是 jQuery 对象?
就是通过 jQuery 包装 DOM 对象后产生的对象. jQuery 对象是 jQuery 独有的, 其可以使用 jQuery 里的方法.
比如:
意思是指: 获取 ID 为 test 的元素内的 html 代码. 其中 html() 是 jQuery 里的方法
这段代码等同于用 DOM 实现代码:
虽然 jQuery 对象是包装 DOM 对象后产生的, 但是 jQuery 无法使用 DOM 对象的任何方法, 同理 DOM 对象也不能使用 jQuery 里的方法. 乱使用会报错.
比如:
之类的写法都是错误的.
还有一个要注意的是: 用 #id 作为选择符取得的是 jQuery 对象与 document.getElementById("id") 得到的 DOM 对象, 这两者并不等价.
请参看如下说的两者间的转换.
既然 jQuery 有区别但也有联系, 那么 jQuery 对象与 DOM 对象也可以相互转换.
在再两者转换前首先我们给一个约定:
如果一个获取的是 jQuery 对象, 那么我们在变量前面加上 $, 如: var $variab = jQuery 对象;
如果获取的是 DOM 对象, 则与习惯普通一样: var variab = DOM 对象;
这么约定只是便于讲解与区别, 实际使用中并不规定.
jQuery 对象转成 DOM 对象:
两种转换方式将一个 jQuery 对象转换成 DOM 对象:[index] 和. get(index);
(1)jQuery 对象是一个数据对象, 可以通过 [index] 的方法, 来得到相应的 DOM 对象.
(2)jQuery 本身提供, 通过. get(index) 方法, 得到相应的 DOM 对象
DOM 对象转成 jQuery 对象:
对于已经是一个 DOM 对象, 只需要用 $() 把 DOM 对象包装起来, 就可以获得一个 jQuery 对象了.$(DOM 对象)
转换后, 就可以任意使用 jQuery 的方法了.
通过以上方法, 可以任意的相互转换 jQuery 对象和 DOM 对象. 需要再强调注意的是:
DOM 对象才能使用 DOM 中的方法, jQuery 对象是不可以用 DOM 中的方法. 最后
这个方法其实很简单, 但是对于初学入门的小白这些细节一直都是没注意的, 在调用 jQuery 方法时做好细节处理, 很多问题都可以迎刃而解了, 好了今天的内容就到这里.
有什么疑问欢迎留言疑问哦, 也可以在留意发表你们对这次教程的看法哦!
前端开发工程师系列教程推荐:
3 分钟带你搞明白 Null 和 Undefined 对象元素的数组去重实现方法分析 轻松提高代码可读性, 写出优秀代码! 文本编辑器的实用技巧和经验分享 JavaScript 循环必备小练习 3 步走带你轻松 Debug 写出高性能 JavaScript 的 10 个技巧 学习 JavaScript 的 10 个难点 JavaScript 干货知识点汇总 理解神奇的 JS 闭包 学习几个简单的 JS 单例模式 代码真的有必要写到完美吗? 8 步走写出优秀 Javascript 代码
别忘了点赞转发 + 关注哦!
来源: http://www.jianshu.com/p/494741f9efd1