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 支持ie和firefox杰奇翻页函数
Jul 22 Javascript
推荐8款jQuery轻量级树形Tree插件
Nov 12 Javascript
js实现最短的XML格式化工具实例
Mar 12 Javascript
jQuery仅用3行代码实现的显示与隐藏功能完整实例
Oct 08 Javascript
javascript发送短信验证码实现代码
Nov 12 Javascript
原生js编写autoComplete插件
Apr 13 Javascript
jquery判断iPhone、Android设备类型
Sep 14 Javascript
利用Vue.js+Node.js+MongoDB实现一个博客系统(附源码)
Apr 24 Javascript
vue.js 微信支付前端代码分享
Feb 10 Javascript
Angular5升级RxJS到5.5.3报错:EmptyError: no elements in sequence的解决方法
Apr 09 Javascript
JS异步处理的进化史深入讲解
Aug 25 Javascript
谈谈JavaScript令人迷惑的==与+
Aug 31 Javascript
深入理解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 adodb连接mssql解决乱码问题
2009/06/12 PHP
3款值得推荐的微信开发开源框架
2014/10/28 PHP
thinkphp5使html5实现动态跳转的例子
2019/10/16 PHP
自动更新作用
2006/10/08 Javascript
javascript appendChild,innerHTML,join性能比较代码
2009/08/29 Javascript
js 强制弹出窗口代码研究-又一款代码
2010/03/20 Javascript
JavaScript 上万关键字瞬间匹配实现代码
2013/07/07 Javascript
node.js中的console.info方法使用说明
2014/12/09 Javascript
微信小程序 navigation API实例详解
2016/10/02 Javascript
javascript self对象使用详解
2016/10/18 Javascript
jQuery实现页面顶部下拉广告
2016/12/30 Javascript
微信小程序中顶部导航栏的实现代码
2017/03/30 Javascript
socket.io实现在线群聊功能
2017/04/07 Javascript
jQuery extend()详解及简单实例
2017/05/06 jQuery
nodejs 使用 js 模块的方法实例详解
2018/12/04 NodeJs
微信小程序搜索功能(附:小程序前端+PHP后端)
2019/02/28 Javascript
bootstrap-table+treegrid实现树形表格
2019/07/26 Javascript
详解vue修改elementUI的分页组件视图没更新问题
2020/11/13 Javascript
vue组件中传值EventBus的使用及注意事项说明
2020/11/16 Javascript
ES2020让代码更优美的运算符 (?.) (??)
2021/01/04 Javascript
[45:25]完美世界DOTA2联赛循环赛 PXG vs IO 第一场 11.06
2020/11/09 DOTA
Python中for循环详解
2014/01/17 Python
Python实现抓取百度搜索结果页的网站标题信息
2015/01/22 Python
Python求解任意闭区间的所有素数
2018/06/10 Python
浅谈关于html5中图片抛物线运动的一些心得
2018/01/09 HTML / CSS
澳大利亚最大的在线美发和美容零售商之一:My Hair Care & Beauty
2019/08/24 全球购物
巴西香水和化妆品购物网站:The Beauty Box
2019/09/03 全球购物
皮肤科医师岗位职责
2013/12/04 职场文书
工程专业求职自荐书范文
2014/02/08 职场文书
运动会演讲稿300字
2014/08/25 职场文书
教师党的群众路线对照检查材料
2014/09/24 职场文书
私用公车造成事故检讨书
2014/11/16 职场文书
2015学校师德师风工作总结
2015/04/22 职场文书
2016医师资格考试考生诚信考试承诺书
2016/03/25 职场文书
2019广播稿怎么写
2019/04/17 职场文书
ES6 解构赋值的原理及运用
2021/05/25 Javascript