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 相关文章推荐
JSON 和 JavaScript eval使用说明
Jun 13 Javascript
主页面中的两个iframe实现鼠标拖动改变其大小
Apr 16 Javascript
Extjs4 类的定义和扩展实例
Jun 28 Javascript
js实现俄罗斯方块小游戏分享
Jan 31 Javascript
网页右下角弹出窗体实现代码
Jun 05 Javascript
jQuery类选择器用法实例
Dec 23 Javascript
JavaScript操作select元素和option的实例代码
Jan 29 Javascript
javascript每日必学之循环
Feb 19 Javascript
angularjs实现猜大小功能
Oct 23 Javascript
解决vuejs 使用value in list 循环遍历数组出现警告的问题
Sep 26 Javascript
微信小程序自定义多列选择器使用详解
Jun 21 Javascript
Vue 实现可视化拖拽页面编辑器
Feb 01 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 无限极分类
2008/03/27 PHP
php使用sql server验证连接数据库的方法
2014/12/25 PHP
PHP水印类,支持添加图片、文字、填充颜色区域的实现
2017/02/04 PHP
PHP实现生成模糊图片的方法示例
2017/12/21 PHP
jQuery load方法用法集锦
2011/12/06 Javascript
JavaScript常用验证函数实例汇总
2014/11/25 Javascript
JavaScript中指定函数名称的相关方法
2015/06/04 Javascript
对JavaScript的全文搜索实现相关度评分的功能的方法
2015/06/24 Javascript
jQuery实现鼠标经过事件的延时处理效果
2020/08/20 Javascript
WebGL利用FBO完成立方体贴图效果完整实例(附demo源码下载)
2016/01/26 Javascript
javascript下使用Promise封装FileReader
2016/02/19 Javascript
JS判断字符串字节数并截取长度的方法
2016/03/05 Javascript
js点击返回跳转到指定页面实现过程
2020/08/20 Javascript
修改js confirm alert 提示框文字的简单实例
2016/06/10 Javascript
浅谈js对象属性 通过点(.) 和方括号([]) 的不同之处
2016/10/29 Javascript
JQueryEasyUI之DataGrid数据显示
2016/11/23 Javascript
详解网站中图片日常使用以及优化手法
2017/01/09 Javascript
JS实现动态修改table及合并单元格的方法示例
2017/02/20 Javascript
JavaScript引用类型Array实例分析
2018/07/24 Javascript
js实现微信聊天效果
2020/08/09 Javascript
[01:02:04]EG vs Liquid 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.23
2019/09/05 DOTA
Python切片工具pillow用法示例
2018/03/30 Python
分析python请求数据
2018/08/19 Python
python通过ffmgep从视频中抽帧的方法
2018/12/05 Python
python 微信好友特征数据分析及可视化
2020/01/07 Python
Python如何省略括号方法详解
2020/03/21 Python
浅谈python 中的 type(), dtype(), astype()的区别
2020/04/09 Python
pycharm导入源码的具体步骤
2020/08/04 Python
基于Python实现全自动下载抖音视频
2020/11/06 Python
荷兰鞋类购物网站:Donelli
2019/05/24 全球购物
写自荐信的七个技巧
2013/10/15 职场文书
应届毕业生自我鉴定范文
2013/12/27 职场文书
职工代表大会主持词
2014/04/01 职场文书
新兵入伍心得体会
2014/09/04 职场文书
标准演讲稿格式结尾应该怎么书写?
2019/07/17 职场文书
 分享一个Python 遇到数据库超好用的模块
2022/04/06 Python