这个问题源自上一次的工作室讨论班,主题是“jQuery选择器的使用”,在讨论班的结尾,我留了一个思考题: jQuery获取到的对象和直接调用原生Javascript方法获得的对象有何区别呢? 这个思考题所引申出的内容就是今天的主题了: 关于DOM对象与jQuery对象的那些事~
一、DOM对象与jQuery对象
jQuery是前端领域最流行的插件库之一了,是前端人员必学的技术之一。其强大的选择器、方便快捷的DOM操作能够在一瞬间俘获开发者的心灵,工作室里也有个代代相传的建议:千万不要太早学jQuery,不然会失去学原生JavaScript的动力的~(很多原生JavaScript里很麻烦的操作放在jQuery中区区几行代码就能实现,就会产生用jQuery打江山的幻想233333).。。。。。。 在初学者身上,常常会出现这样的错误:
我也常常被问到这个问题:我已经引入JQuery文件了啊~ 为什么JQuery方法不能用呢?
这里先简单提一下jQuery的实现原理: jQuery的所有方法都封装在核心对象jQuery里,使用这些方法肯定需要实例化。就拿jQuery选择器来说,如下图:
$其实就是jQuery本尊了,平时在使用选择器操作时,其实是使用了jQuery(selector)方法创建并返回了一个jQuery对象。这个jQuery对象中包含着 所获取的DOM对象,并且继承了jQuery对象的方法使得其可以调用之后jQuery带来的一系列非常方便快捷的方法。下面我们来看一下实例:
在文档中创建一个DOM元素,然后分别用原生JavaScript方法和jQuery方法去获取它,得到了两个不同的返回结果。
其中原生JavaScript方法直接返回了DOM对象,可以直接利用浏览器的DOM资源管理器显示在页面中。
、
而jQuery选择器则返回了一个jQuery对象,其中有很多属性。需要特别关注的一点是,对象中的第一个子元素存储着这个元素的DOM对象,也就是用原生JavaScript方法获取到的那个东东~。
可以看到:
直接用JavaScript方法获取到的是DOM对象,其可以使用原生的JavaScript方法而不能使用jQuery方法(原生DOM对象并未继承到jQuery方法);
而通过选择器等jQuery方法获取到的jQuery对象,则无法使用原生JavaScript对象(经过了封装,该对象与DOM对象不同,DOM对象被封装在了一个属性中,故无法直接对jQuery对象使用JavaScript方法)。
二、jQuery对象与DOM对象的相互转换
清楚了两种对象的不同,在编码的时候就会注意区分哪些方法可以用,哪些不可以用。 这个时候,两种对象之间的转换就很重要了,它可以让我们在项目中灵活转换这两种对象,种种方法我们都可以信手拈来~ 下面总结一下转换的方法:
1、DOM对象转换成jQuery对象:
通过$(selector)获取到的元素就是jQuery元素了,可以说选择器方法就是所有jQuery对象的输出地了。
对于一个已经获取好的DOM对象,直接用$()将它包起来就可以转换成jQuery对象了:
2、jQuery对象转换成DOM对象
上面提到了,jQuery对象中的第一项存储着该元素的DOM对象,我们直接访问这个属性即可得到该DOM元素。
3、注意区分两种对象。
jQuery的教材中都会提到,变量要用$开头。其实这条并不是像PHP一般严格的变量语法规定,这是鼓励大家养成一种良好的编程习惯。jQuery对象就用$开头的变量来存储,普通的JavaScript对象就用普通的变量名来存储,一目了然,可以避免很多不必要的错误。 尤其在代码量很大的程序中,如果没有清楚的标识,很容易发生开头那样的错误。
这就是关于DOM对象与jQuery对象之间的那些事了,是jQuery初学者们必须掌握的知识哦~ 关于文章开头提到的jQuery实现原理,这也是我近期非常感兴趣的内容,在这里强烈推荐张鑫旭大神的博文: http://www.zhangxinxu.com/wordpress/2013/07/jquery-%E5%8E%9F%E7%90%86-%E6%9C%BA%E5%88%B6/ ~~