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 相关文章推荐
js操作select控件的几种方法
Jun 02 Javascript
工作需要写的一个js拖拽组件
Jul 28 Javascript
javascript中直接写php代码的方法
Jul 31 Javascript
javascript实现的弹出层背景置灰-模拟(easyui dialog)
Dec 27 Javascript
js(JavaScript)实现TAB标签切换效果的简单实例
Feb 26 Javascript
javascript实现checkBox的全选,反选与赋值
Mar 12 Javascript
Node.js实现Excel转JSON
Apr 24 Javascript
理解javascript中DOM事件
Dec 25 Javascript
confirm确认对话框的实现方法总结
Jun 17 Javascript
jQuery获取随机颜色的实例代码
May 21 jQuery
layui表单提交到后台自动封装到实体类的方法
Sep 12 Javascript
Vue 解决父组件跳转子路由后当前导航active样式消失问题
Jul 21 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
权威JavaScript 中的内存泄露模式
2007/08/13 Javascript
js使用数组判断提交数据是否存在相同数据
2013/11/27 Javascript
自己使用js/jquery写的一个定制对话框控件
2014/05/02 Javascript
JQuery实现简单的服务器轮询效果实例
2016/03/31 Javascript
Angular 根据 service 的状态更新 directive
2016/04/03 Javascript
JS判断字符串变量是否含有某个字串的实现方法
2016/06/03 Javascript
利用python分析access日志的方法
2016/10/26 Javascript
谈谈Vue.js——vue-resource全攻略
2017/01/16 Javascript
Angular 4.x+Ionic3踩坑之Ionic 3.x界面传值详解
2018/03/13 Javascript
深入了解js原型模式
2019/05/30 Javascript
vue+elementUi 实现密码显示/隐藏+小图标变化功能
2020/01/18 Javascript
从0搭建vue-cli4脚手架
2020/06/17 Javascript
浅谈Python程序与C++程序的联合使用
2015/04/07 Python
python实现字典(dict)和字符串(string)的相互转换方法
2017/03/01 Python
用TensorFlow实现lasso回归和岭回归算法的示例
2018/05/02 Python
python查看文件大小和文件夹内容的方法
2019/07/08 Python
python序列化与数据持久化实例详解
2019/12/20 Python
Pycharm中切换pytorch的环境和配置的教程详解
2020/03/13 Python
python GUI模拟实现计算器
2020/06/22 Python
Python 分布式缓存之Reids数据类型操作详解
2020/06/24 Python
Python爬虫之爬取淘女郎照片示例详解
2020/07/28 Python
Python 捕获代码中所有异常的方法
2020/08/03 Python
strlen的几种不同实现方法
2013/05/31 面试题
为什么要做架构设计
2015/07/08 面试题
大一学生的职业生涯规划书范文
2014/01/19 职场文书
致长跑运动员广播稿
2014/01/31 职场文书
工商局局长个人对照检查材料思想汇报
2014/09/23 职场文书
2014年体育工作总结
2014/11/24 职场文书
2014年财务个人工作总结
2014/12/08 职场文书
2015年南京大屠杀纪念日活动总结
2015/03/24 职场文书
电力工程合作意向书
2015/05/11 职场文书
幼儿园老师工作总结2015
2015/05/22 职场文书
2015年小学语文教师工作总结
2015/10/23 职场文书
《搭石》教学反思
2016/02/18 职场文书
导游词之云南丽江-泸沽湖
2019/09/26 职场文书
分享提高 Python 代码的可读性的技巧
2022/03/03 Python