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 相关文章推荐
[原创]网络复制内容时常用的正则+editplus
Nov 30 Javascript
js动画(animate)简单引擎代码示例
Dec 04 Javascript
javascript创建函数的20种方式汇总
Jun 23 Javascript
angularjs表格分页功能详解
Jan 21 Javascript
vue.js通过自定义指令实现数据拉取更新的实现方法
Oct 18 Javascript
微信小程序 安全包括(框架、功能模块、账户使用)详解
Jan 16 Javascript
创建Vue项目以及引入Iview的方法示例
Dec 03 Javascript
JavaScript学习笔记之DOM操作实例分析
Jan 08 Javascript
js 实现 list转换成tree的方法示例(数组到树)
Aug 18 Javascript
Java Varargs 可变参数用法详解
Jan 28 Javascript
JavaScript实现动态生成表格
Aug 02 Javascript
一篇超完整的Vue新手入门指导教程
Nov 18 Vue.js
深入理解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自动生成月历代码
2006/10/09 PHP
PHP实现时间比较和时间差计算的方法示例
2017/07/24 PHP
PHP查找一列有序数组是否包含某值的方法
2020/02/07 PHP
PHP 裁剪图片
2021/03/09 PHP
(推荐一个超好的JS函数库)S.Sams Lifexperience ScriptClassLib
2007/04/29 Javascript
完美实现仿QQ空间评论回复特效
2015/05/06 Javascript
JS+CSS实现简易的滑动门效果代码
2015/09/24 Javascript
js前端解决跨域问题的8种方案(最新最全)
2016/11/18 Javascript
JS实现HTML标签转义及反转义
2020/04/14 Javascript
为什么要使用Vuex的介绍
2019/01/19 Javascript
Angular封装搜索框组件操作示例
2019/04/25 Javascript
vue如何截取字符串
2019/05/06 Javascript
js利用递归与promise 按顺序请求数据的方法
2019/08/30 Javascript
layui 数据表格+分页+搜索+checkbox+缓存选中项数据的方法
2019/09/21 Javascript
google广告之另类js调用实现代码
2020/08/22 Javascript
[01:13:01]2018DOTA2亚洲邀请赛 4.4 淘汰赛 TNC vs VG 第三场
2018/04/05 DOTA
[02:23]完美世界全国高校联赛街访DOTA2第一期
2019/11/28 DOTA
[01:01:52]DOTA2-DPC中国联赛正赛 iG vs LBZS BO3 第一场 3月4日
2021/03/11 DOTA
python 实现文件的递归拷贝实现代码
2012/08/02 Python
python基础入门详解(文件输入/输出 内建类型 字典操作使用方法)
2013/12/08 Python
python转换字符串为摩尔斯电码的方法
2015/07/06 Python
python实现人脸识别经典算法(一) 特征脸法
2018/03/13 Python
python把数组中的数字每行打印3个并保存在文档中的方法
2018/07/17 Python
使用python脚本实现查询火车票工具
2018/07/19 Python
python实现多进程通信实例分析
2019/09/01 Python
解决c++调用python中文乱码问题
2020/07/29 Python
记一次django内存异常排查及解决方法
2020/08/07 Python
中国综合性网上购物商城:当当(网上卖书起家)
2016/11/16 全球购物
技术总监个人的自我评价范文
2013/12/18 职场文书
给校长的一封建议书
2014/03/12 职场文书
服务行业演讲稿
2014/09/02 职场文书
计生个人工作总结
2015/02/28 职场文书
人民币使用说明书
2019/04/17 职场文书
品牌形象定位,全面分析
2019/07/23 职场文书
创业计划书之个人工作室
2019/08/22 职场文书
Linux系统下MySQL配置主从分离的步骤
2022/03/21 MySQL