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 相关文章推荐
浏览器无法运行JAVA脚本的解决方法
Jan 09 Javascript
jquery 表格的增行删行实现思路
Mar 21 Javascript
js判断undefined变量类型使用typeof
Jun 03 Javascript
javascript判断css3动画结束 css3动画结束的回调函数
Mar 10 Javascript
JavaScript整除运算函数ceil和floor的区别分析
Apr 14 Javascript
bootstrap中模态框、模态框的属性实例详解
Feb 17 Javascript
基于Node.js模板引擎教程-jade速学与实战1
Sep 17 Javascript
详解React Native 采用Fetch方式发送跨域POST请求
Nov 15 Javascript
浅谈Vue.js路由管理器 Vue Router
Aug 16 Javascript
element ui 表格动态列显示空白bug 修复方法
Sep 04 Javascript
JS中注入eval, Function等系统函数截获动态代码
Apr 03 Javascript
原生js实现自定义滚动条组件
Jan 20 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
请离开include_once和require_once
2013/07/18 PHP
yii去掉必填项中星号的方法
2015/12/28 PHP
php字符串操作针对负值的判断分析
2016/07/28 PHP
浅谈PHP的反射机制
2016/12/15 PHP
PHP守护进程化在C和PHP环境下的实现
2017/11/21 PHP
JQuery浮动DIV提示信息并自动隐藏的代码
2010/08/29 Javascript
父子窗体间传递JSON格式的数据的代码
2010/12/25 Javascript
模拟select的代码
2011/10/19 Javascript
javascript ie6兼容position:fixed实现思路
2013/04/01 Javascript
Nodejs极简入门教程(二):定时器
2014/10/25 NodeJs
2014年最火的Node.JS后端框架推荐
2014/10/27 Javascript
jquery中change()用法实例分析
2015/02/06 Javascript
javascript中eval函数用法分析
2015/04/25 Javascript
浅析JS运动
2015/12/28 Javascript
jquery中validate与form插件提交的方式小结
2016/03/26 Javascript
详细分析JS函数去抖和节流
2017/12/05 Javascript
详解基于Vue-cli搭建的项目如何和后台交互
2018/06/29 Javascript
bootstrap下拉分页样式 带跳转页码
2018/12/29 Javascript
如何换个角度使用VUE过滤器详解
2019/09/11 Javascript
[05:31]DOTA2英雄梦之声_第08期_莉娜
2014/06/23 DOTA
Python下使用Psyco模块优化运行速度
2015/04/05 Python
Python工程师面试题 与Python Web相关
2016/01/14 Python
Python中的条件判断语句与循环语句用法小结
2016/03/21 Python
Python 3.6 性能测试框架Locust安装及使用方法(详解)
2017/10/11 Python
浅谈配置OpenCV3 + Python3的简易方法(macOS)
2018/04/02 Python
Python操作mongodb的9个步骤
2018/06/04 Python
python调用opencv实现猫脸检测功能
2019/01/15 Python
django的model操作汇整详解
2019/07/26 Python
Python使用socketServer包搭建简易服务器过程详解
2020/06/12 Python
谈谈python垃圾回收机制
2020/09/27 Python
优衣库英国官网:UNIQLO英国
2016/12/25 全球购物
L’urv官网:精品女性运动服品牌
2019/07/07 全球购物
环保倡议书400字
2014/05/15 职场文书
篝火晚会策划方案
2014/05/16 职场文书
社区法制宣传月活动总结
2015/05/07 职场文书
redis sentinel监控高可用集群实现的配置步骤
2022/04/01 Redis