Jquery对象和Dom对象的区别分析


Posted in Javascript onNovember 20, 2014

在讨论之前,先约定好定义变量的风格。

如果获取的对象是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。

Javascript 相关文章推荐
xml 与javascript结合的问题解决方法
Mar 24 Javascript
ExtJS4 组件化编程,动态加载,面向对象,Direct
May 12 Javascript
javascript实现的淘宝旅行通用日历组件用法实例
Aug 03 Javascript
AngularJs中route的使用方法和配置
Feb 04 Javascript
javascript url几种编码方式详解
Jun 06 Javascript
微信小程序  Mustache语法详细介绍
Oct 27 Javascript
JS实现列表页面隔行变色效果
Mar 25 Javascript
Vuejs在v-for中,利用index来对第一项添加class的方法
Mar 03 Javascript
微信小程序中如何计算距离某个节日还有多少天
Jul 15 Javascript
vuejs移动端实现div拖拽移动
Jul 25 Javascript
策略模式实现 Vue 动态表单验证的方法
Sep 16 Javascript
关于vue-router-link选择样式设置
Apr 30 Vue.js
深入理解javascript变量声明
Nov 20 #Javascript
javascript限制用户只能输汉字中文的方法
Nov 20 #Javascript
jQuery 中$(this).index与$.each的使用指南
Nov 20 #Javascript
jQuery提示效果代码分享
Nov 20 #Javascript
IE6浏览器中window.location.href无效的解决方法
Nov 20 #Javascript
js判断滚动条是否已到页面最底部或顶部实例
Nov 20 #Javascript
js中数组排序sort方法的原理分析
Nov 20 #Javascript
You might like
PHP 中dirname(_file_)讲解
2007/03/18 PHP
安装PHP可能遇到的问题“无法载入mysql扩展” 的解决方法
2007/04/16 PHP
防止MySQL注入或HTML表单滥用的PHP程序
2009/01/21 PHP
PHP 木马攻击防御技巧
2009/06/13 PHP
PHP彩蛋信息介绍和阻止泄漏的方法(隐藏功能)
2014/08/06 PHP
jQuery+jqmodal弹出窗口实现代码分明
2010/06/14 Javascript
jquery动画2.元素坐标动画效果(创建一个图片走廊)
2012/08/24 Javascript
JavaScript中实现PHP的打乱数组函数shuffle实例
2014/10/11 Javascript
javascript中call apply 的应用场景
2015/04/16 Javascript
jQuery实现美观的多级动画效果菜单代码
2015/09/06 Javascript
javascript实现简单的全选和反选功能
2016/01/05 Javascript
Bootstrap源码解读排版(1)
2016/12/23 Javascript
js实现的xml对象转json功能示例
2016/12/24 Javascript
jquery实现简单实用的轮播器
2017/05/23 jQuery
详解Vue文档中几个易忽视部分的剖析
2018/03/24 Javascript
VUE脚手架的下载和配置步骤详解
2019/04/01 Javascript
Python 文件操作技巧(File operation) 实例代码分析
2008/08/11 Python
《Python之禅》中对于Python编程过程中的一些建议
2015/04/03 Python
Python每天必学之bytes字节
2016/01/28 Python
使用python编写简单的小程序编译成exe跑在win10上
2018/01/15 Python
Python实现将doc转化pdf格式文档的方法
2018/01/19 Python
对PyTorch torch.stack的实例讲解
2018/07/30 Python
简单了解python单例模式的几种写法
2019/07/01 Python
jupyter notebook 多环境conda kernel配置方式
2020/04/10 Python
python datetime处理时间小结
2020/04/16 Python
Fashion Eyewear美国:英国线上设计师眼镜和太阳镜的零售商
2016/08/15 全球购物
Shein英国:女性时尚网上商店
2019/04/10 全球购物
采购员的工作职责
2013/12/26 职场文书
低碳日宣传活动总结
2014/07/09 职场文书
房屋买卖委托书格式范本格式
2014/10/13 职场文书
电气工程师岗位职责
2015/02/12 职场文书
城管年度个人总结
2015/02/28 职场文书
浅谈Python3中datetime不同时区转换介绍与踩坑
2021/08/02 Python
详解JAVA的控制语句
2021/11/11 Java/Android
Spring JPA 增加字段执行异常问题及解决
2022/06/10 Java/Android
AndroidStudio图片压缩工具ImgCompressPlugin使用实例
2022/08/05 Java/Android