Jquery对象和Dom对象的区别分析
更新时间：2014年11月20日 11:19:13 投稿：hebedich
最近有小伙伴咨询Jquery对象和Dom对象的区别，今天我们谈谈个人对于Jquery对象和Dom对象的区别的理解，如有遗漏或者错误还请指出。
在讨论之前，先约定好定义变量的风格。
如果获取的对象是jQuery对象，那么在变量前加上$，例如：
复制代码 代码如下:
var $variable = jQuery对象;
如果获取的是DOM对象，则定义如下：
复制代码 代码如下:
var variable = DOM对象；
jQuery对象不能使用DOM中的方法，但是如果对jQuery对象所提供的方法不熟悉，或者jQuery没有封装想要的方法，不得不实用DOM对象的时候，有以下两种处理方法。jQuery提供了两种方法将一个jQuery对象转换成DOm对象，即[index]和get(index).
1、jQuery对象是一个数组对象，可以通过[index]的方法得到相应的DOM对象。
复制代码 代码如下:
var $cr = $("#cr"); //jQuery对象
var cr = $cr[0] //DOM对象
alert(cr.checked) //检测这个checkbox是否选中了
2、通过get(index)方法得到相应的DOM对象。
复制代码 代码如下:
var $cr = $("#cr");
var cr = $cr.get(0);
alert(cr.checked);
对于一个DOM对象，只需要用$()把DOM对象包装起来，就可以获得一个jQuery对象了，方式为$(DOM对象)。
复制代码 代码如下:
var cr = document.getElementByID("cr"); //DOM对象
var $cr = $(cr);
总结：
一、jQuery方法里的get方法事实上是获得Dom元素（$(this).get(0)与$(this)[0]）
二、而jQuery方法里的eq、first、last等方法都是返回的Jquery对象
三、DOM对象才能使用DOM中的方法，jQuery对象不可以使用DOM中的方法。jQuery对象提供了一套更加完善的工具用于操作DOM。
相关文章
jquery使select选中的注意事项。2009-10-10
现在很多网站都有悬浮广告，本篇文章主要介绍了jQuery右下角悬浮广告，非常具有实用效果，有需要的朋友可以来参考一下。2016-10-10
本篇文章主要是对Jquery实现可多选的下拉框的示例代码进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助2014-02-02
这篇文章主要介绍了JQuery实现动态添加删除评论的方法,涉及jQuery处理鼠标事件及json数据的相关技巧,需要的朋友可以参考下2015-05-05
jQuery插件simplePagination的使用方法示例
这篇文章主要介绍了jQuery插件simplePagination的使用方法,结合实例形式分析了jQuery插件simplePagination实现表单分页相关操作技巧与注意事项,需要的朋友可以参考下2020-04-04
这篇文章主要介绍了Jquery动态替换div内容及动态展示的方法,动态替换div内容并展示的使用技巧与注意事项,需要的朋友可以参考下2015-01-01
这篇文章主要介绍了jQuery实现网页顶部固定导航效果代码,涉及jQuery响应scroll事件动态操作页面元素样式的相关技巧,需要的朋友可以参考下2015-12-12
jQuery源码分析-04 选择器-Sizzle-工作原理分析
在分析Sizzle源码之前，先整理一下选择器的工作原理，先明确一些选择器中用到的名词，后边阅读时不会有歧义2011-11-11
这篇文章主要介绍了jquery队列函数用法,以实例形式分析了jQuery中队列的用法以及控制样式的技巧,具有一定的参考借鉴价值,需要的朋友可以参考下2014-12-12
这篇文章主要给大家介绍了关于jQuery实现简单弹出框效果的相关资料,几天一直在研究JQuery,确实很好用,有很多需求都是要弹出框,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-06-06
最新评论