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 封装Ajax传递的数据代码
Jun 05 Javascript
jQuery 版元素拖拽原型代码
Apr 25 Javascript
jquery禁用右键单击功能屏蔽F5刷新
Mar 17 Javascript
jQuery中focus事件用法实例
Dec 26 Javascript
jQuery根据用户电脑是mac还是pc加载对应样式的方法
Jun 26 Javascript
AngularJS指令与指令之间的交互功能示例
Dec 14 Javascript
微信小程序表单验证功能完整实例
Dec 01 Javascript
vue安装和使用scss及sass与scss的区别详解
Oct 15 Javascript
JS调用安卓手机摄像头扫描二维码
Oct 16 Javascript
Vue 进阶之路(三)
Apr 18 Javascript
浅谈vuex的基本用法和mapaction传值问题
Nov 08 Javascript
ES6 Object.assign()的用法及其使用
Jan 18 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
经典的PHPer为什么被认为是草根?
2007/04/02 PHP
测试PHP连接MYSQL成功与否的代码
2013/08/16 PHP
thinkphp数据查询和遍历数组实例
2014/11/28 PHP
PHP 访问数据库配置通用方法(json)
2018/05/20 PHP
Laravel5.1框架路由分组用法实例分析
2020/01/04 PHP
如何做到打开一个页面,过几分钟自动转到另一页面
2007/04/20 Javascript
javascript qq右下角滑出窗口 sheyMsg
2010/03/21 Javascript
基于jquery的一个浮动框(扩展性比较好 )
2010/08/27 Javascript
Egret引擎开发指南之视觉编程
2014/09/03 Javascript
jquery图片播放浏览插件prettyPhoto使用详解
2014/12/19 Javascript
jQuery中:reset选择器用法实例
2015/01/04 Javascript
javascript面向对象之this关键词用法分析
2015/01/13 Javascript
jQuery设置指定网页元素宽度和高度的方法
2015/03/25 Javascript
基于jQuery Ajax实现上传文件
2016/03/24 Javascript
BootStrap智能表单实战系列(四)表单布局介绍
2016/06/13 Javascript
Bootstrap前端开发案例一
2016/06/17 Javascript
详解js实现线段交点的三种算法
2016/08/09 Javascript
JavaScript实现页面无操作倒计时退出
2016/10/22 Javascript
vue+element实现表格新增、编辑、删除功能
2019/05/28 Javascript
vue 全局环境切换问题
2019/10/27 Javascript
Python多进程并发与多线程并发编程实例总结
2018/02/08 Python
Python 反转字符串(reverse)的方法小结
2018/02/20 Python
python发送邮件脚本
2018/05/22 Python
儿童python练习实例
2018/05/27 Python
Python3.6简单的操作Mysql数据库的三个实例
2018/10/17 Python
python3-flask-3将信息写入日志的实操方法
2019/11/12 Python
中外合拍动画首获奥斯卡提名,“上海出品”《飞奔去月球》能否拿下最终大奖?
2021/03/16 国漫
自我评价格式
2014/01/06 职场文书
社区居务公开实施方案
2014/03/27 职场文书
在校大学生自我评价范文
2014/09/12 职场文书
小学国庆节活动方案策划书
2014/09/16 职场文书
学生党员检讨书范文
2014/12/27 职场文书
受资助学生感谢信
2015/01/21 职场文书
导游词之太行山青龙峡
2020/01/14 职场文书
Python实现生活常识解答机器人
2021/06/28 Python
Java的Object类的九种方法
2022/04/13 Java/Android