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 Event学习第十一章 按键的检测
Feb 10 Javascript
动态加载图片路径 保持JavaScript控件的相对独立性
Sep 06 Javascript
基于jquery的图片幻灯展示源码
Jul 15 Javascript
12行javascript代码绘制一个八卦图
Apr 02 Javascript
JS当前页面登录注册框,固定DIV,底层阴影的实例代码
Sep 29 Javascript
浅谈react.js 之 批量添加与删除功能
Apr 17 Javascript
jQuery实现简单的滑动导航代码(移动端)
May 22 jQuery
Node.js爬取豆瓣数据实例分析
Mar 05 Javascript
Bootstrap实现可折叠分组侧边导航菜单
Mar 07 Javascript
vue+axios+promise实际开发用法详解
Oct 15 Javascript
vue 兄弟组件的信息传递的方法实例详解
Aug 30 Javascript
记录微信小程序 height: calc(xx - xx);无效问题
Dec 30 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 join函数应用
2011/05/04 PHP
sql注入与转义的php函数代码
2013/06/17 PHP
php 获取SWF动画截图示例代码
2014/02/10 PHP
Yii2分页的使用及其扩展方法详解
2016/05/23 PHP
如何离线执行php任务
2017/02/21 PHP
OAuth认证协议中的HMACSHA1加密算法(实例)
2017/10/25 PHP
PHP实现的敏感词过滤方法示例
2019/03/06 PHP
PHP面向对象程序设计之对象克隆clone和魔术方法__clone()用法分析
2019/06/12 PHP
jQuery 源代码显示控件 (Ajax加载方式).
2009/05/18 Javascript
javascript奇异的arguments分析
2010/10/20 Javascript
基于jQuery的获取标签名的代码
2012/07/16 Javascript
JavaScript 浏览器对象模型BOM使用介绍
2015/04/13 Javascript
JSON与XML优缺点对比分析
2015/07/17 Javascript
JS实现获取来自百度,Google,soso,sogou关键词的方法
2016/12/21 Javascript
用move.js库实现百叶窗特效
2017/02/08 Javascript
iscroll动态加载数据完美解决方法
2017/07/18 Javascript
JS实现按钮添加背景音乐示例代码
2017/10/17 Javascript
JS简单生成由字母数字组合随机字符串示例
2018/05/25 Javascript
vue-cli3添加模式配置多环境变量的方法
2019/06/05 Javascript
在vue中使用防抖和节流,防止重复点击或重复上拉加载实例
2019/11/13 Javascript
python实现apahce网站日志分析示例
2014/04/02 Python
在Apache服务器上同时运行多个Django程序的方法
2015/07/22 Python
Python 绘图库 Matplotlib 入门教程
2018/04/19 Python
对python中的高效迭代器函数详解
2018/10/18 Python
python3.6使用pickle序列化class的方法
2018/10/22 Python
基于Python在MacOS上安装robotframework-ride
2018/12/28 Python
使用python opencv对目录下图片进行去重的方法
2019/01/12 Python
大专生工程监理求职信
2013/10/04 职场文书
绩效考核实施方案
2014/03/18 职场文书
小学班主任寄语大全
2014/04/04 职场文书
计划生育证明格式范本
2014/09/12 职场文书
2014年学校卫生工作总结
2014/11/20 职场文书
大国崛起日本观后感
2015/06/02 职场文书
小学生一年级(书信作文)
2019/08/13 职场文书
Mysql服务添加 iptables防火墙策略的方案
2021/04/29 MySQL
MySQL派生表联表查询实战过程
2022/03/20 MySQL