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 相关文章推荐
关于javascript DOM事件模型的两件事
Jul 22 Javascript
ASP.NET jQuery 实例5 (显示CheckBoxList成员选中的内容)
Jan 13 Javascript
JQuery的ON()方法支持的所有事件罗列
Feb 28 Javascript
jQuery获取页面元素绝对与相对位置的方法
Jun 10 Javascript
JavaScript使用键盘输入控制实现数字验证功能
Aug 19 Javascript
javascript设计模式之中介者模式学习笔记
Feb 15 Javascript
js时间查询插件使用详解
Apr 07 Javascript
详解Vue 事件驱动和依赖追踪
Apr 22 Javascript
Vuex和前端缓存的整合策略详解
May 09 Javascript
JS实现微信摇一摇原理解析
Jul 22 Javascript
Vue.js组件通信的几种姿势
Oct 23 Javascript
Vue项目中使用jquery的简单方法
May 16 jQuery
深入理解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中设置index.php文件为只读的方法
2013/02/06 PHP
Destoon实现多表查询示例
2014/08/21 PHP
PHP中foreach()用法汇总
2015/07/02 PHP
php解析xml 的四种简单方法(附实例)
2016/07/11 PHP
php实现的SSO单点登录系统接入功能示例分析
2016/10/12 PHP
YII2.0框架行为(Behavior)深入详解
2019/07/26 PHP
PHP实现简单的协程任务调度demo示例
2020/02/01 PHP
URL编码转换,escape() encodeURI() encodeURIComponent()
2006/12/27 Javascript
JavaScript 克隆数组最简单的方法
2009/02/12 Javascript
jquery中的ajax方法怎样通过JSONP进行远程调用
2014/05/04 Javascript
JS替换字符串中字符即替换全部而不是第一个
2014/06/04 Javascript
jQuery响应鼠标事件并隐藏与显示input默认值
2014/08/24 Javascript
jquery中map函数遍历数组用法实例
2015/05/18 Javascript
jquery插件validation实现验证身份证号等
2015/06/04 Javascript
分享javascript计算时间差的示例代码
2020/03/19 Javascript
基于javascript实现九九乘法表
2016/03/27 Javascript
javascript封装addLoadEvent实现页面同时加载执行多个函数的方法
2016/07/25 Javascript
js实现贪吃蛇小游戏(容易理解)
2017/01/22 Javascript
Angular中ng-bind和ng-model的区别实例详解
2017/04/10 Javascript
Vue.js实现输入框绑定的实例代码
2017/08/24 Javascript
JavaScript实现轮播图片完整代码
2020/03/07 Javascript
VueJS实现用户管理系统
2020/05/29 Javascript
[02:54]DOTA2英雄基础教程 撼地者
2014/01/14 DOTA
在Python中使用列表生成式的教程
2015/04/27 Python
利用python开发app实战的方法
2019/07/09 Python
利用python绘制中国地图(含省界、河流等)
2020/09/21 Python
CSS3动画之流彩文字效果+图片模糊效果+边框伸展效果实现代码合集
2017/08/18 HTML / CSS
使用css3实现的windows8开机加载动画
2014/12/09 HTML / CSS
基于CSS3的animation属性实现微信拍一拍动画效果
2020/06/22 HTML / CSS
航空大学应届生求职信
2013/11/10 职场文书
写给保洁员表扬信
2014/01/08 职场文书
物理力学求职信
2014/02/18 职场文书
法制宣传月活动方案
2014/05/11 职场文书
校园环境卫生倡议书
2015/04/29 职场文书
施工安全责任协议书
2016/03/23 职场文书
MySQL详解进行JDBC编程与增删改查方法
2022/06/16 MySQL