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类
Sep 08 Javascript
js 操作select与option(示例讲解)
Dec 20 Javascript
JavaScript支持的最大递归调用次数分析
Jun 24 Javascript
在JavaScript中处理字符串之fontcolor()方法的使用
Jun 08 Javascript
jquery点击缩略图切换视频播放特效代码分享
Sep 15 Javascript
JS脚本实现动态给标签控件添加事件的方法
Jun 02 Javascript
微信小程序 wx.login解密出现乱码的问题解决办法
Mar 10 Javascript
前端自动化开发之Node.js的环境搭建教程
Apr 01 Javascript
基于jquery日历价格、库存等设置插件
Jul 05 jQuery
详解基于angular-cli配置代理解决跨域请求问题
Jul 05 Javascript
js实现json数组分组合并操作示例
Feb 12 Javascript
node.js中Buffer缓冲器的原理与使用方法分析
Nov 23 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和ACCESS写聊天室(四)
2006/10/09 PHP
PHP 数组基础知识小结
2010/08/20 PHP
php实现过滤字符串中的中文和数字实例
2015/07/29 PHP
深入解析WordPress中加载模板的get_template_part函数
2016/01/11 PHP
php扩展开发入门demo示例
2019/09/23 PHP
js wmp操作代码小结(音乐连播功能)
2008/11/08 Javascript
在IE上直接编辑网页内容的js代码(IE地址栏js)
2009/04/27 Javascript
JavaScript高级程序设计 学习笔记 js高级技巧
2011/09/20 Javascript
Javascript中获取对象的原型对象的方法小结
2015/02/25 Javascript
jquery实现选中单选按钮下拉伸缩效果
2015/08/06 Javascript
JavaScript提高性能知识点汇总
2016/01/15 Javascript
Node.js+Express配置入门教程
2016/05/19 Javascript
Jquery元素追加和删除的实现方法
2016/05/24 Javascript
React实现点击删除列表中对应项
2017/01/10 Javascript
Javascript继承机制详解
2017/05/30 Javascript
如何获取TypeScript的声明文件.d.ts
2018/05/01 Javascript
原生javascript AJAX 三级联动的实现代码
2018/05/04 Javascript
详解关于vue-area-linkage走过的坑
2018/06/27 Javascript
Angular动态绑定样式及改变UI框架样式的方法小结
2018/09/03 Javascript
在Vue项目中使用snapshot测试的具体使用
2019/04/16 Javascript
js 函数性能比较方法
2020/08/24 Javascript
js实现飞机大战游戏
2020/08/26 Javascript
[02:48]DOTA2英雄基础教程 暗夜魔王
2013/12/12 DOTA
python调用新浪微博API项目实践
2014/07/28 Python
10个易被忽视但应掌握的Python基本用法
2015/04/01 Python
Python实现简单字典树的方法
2016/04/29 Python
python模拟Django框架实例
2016/05/17 Python
使用Python3制作TCP端口扫描器
2017/04/17 Python
python使用Plotly绘图工具绘制柱状图
2019/04/01 Python
python3+PyQt5 自定义窗口部件--使用窗口部件样式表的方法
2019/06/26 Python
基于Python批量生成指定尺寸缩略图代码实例
2019/11/20 Python
新闻系毕业生推荐信
2013/11/16 职场文书
人力资源经理的岗位职责
2014/03/02 职场文书
促销活动总结报告
2014/04/26 职场文书
客户经理岗位职责大全
2015/04/09 职场文书
军训决心书范文
2015/09/22 职场文书