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 相关文章推荐
jquery实现居中弹出层代码
Aug 25 Javascript
javascript多种数据类型表格排序代码分析
Sep 11 Javascript
jQuery实现复选框全选/取消全选/反选及获得选择的值
Jun 12 Javascript
JS实现在网页中弹出一个输入框的方法
Mar 03 Javascript
使用AngularJS来实现HTML页面嵌套的方法
Jun 17 Javascript
简单纯js实现点击切换TAB标签实例
Aug 23 Javascript
JQuery标签页效果实例详解
Dec 24 Javascript
30分钟快速掌握Bootstrap框架
May 24 Javascript
js无法获取到html标签的属性的解决方法
Jul 26 Javascript
JQuery Ajax WebService传递参数的简单实例
Nov 02 Javascript
小程序简单两栏瀑布流效果的实现
Dec 18 Javascript
JavaScript十大取整方法实例教程
Dec 03 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生成随机字符串(3种方法)
2015/09/25 PHP
[原创]php使用curl判断网页404(不存在)的方法
2016/06/23 PHP
再次更新!MSClass (Class Of Marquee Scroll通用不间断滚动JS封装类 Ver 1.6)
2007/02/05 Javascript
利用js获取服务器时间的两个简单方法
2010/01/08 Javascript
基于jquery插件制作左右按钮与标题文字图片切换效果
2013/11/07 Javascript
Jquery插件easyUi表单验证提交(示例代码)
2013/12/30 Javascript
使用原生js写的一个简单slider
2014/04/29 Javascript
jQuery 顶部导航跟随滚动条滚动固定浮动在顶部
2014/06/06 Javascript
JS实现IE状态栏文字缩放效果代码
2015/10/24 Javascript
修改jquery中dialog的title属性方法(推荐)
2016/08/26 Javascript
很棒的js Tab选项卡切换效果
2016/08/30 Javascript
Javascript单例模式的介绍和实例
2016/10/08 Javascript
Angular使用ng-messages与PHP进行表单数据验证
2016/12/28 Javascript
Vue计算属性的学习笔记
2017/03/22 Javascript
详解Angular2 关于*ngFor 嵌套循环
2017/05/22 Javascript
详解如何使用webpack打包Vue工程
2017/05/27 Javascript
浅析为什么a="abc" 不等于 a=new String("abc")
2017/10/25 Javascript
webpack4之SplitChunksPlugin使用指南
2018/06/12 Javascript
vue 项目打包时样式及背景图片路径找不到的解决方式
2019/11/12 Javascript
vue实现按钮切换图片
2021/01/20 Vue.js
如何在现代JavaScript中编写异步任务
2021/01/31 Javascript
Python捕捉和模拟鼠标事件的方法
2015/06/03 Python
Python实现简单HTML表格解析的方法
2015/06/15 Python
python实现下载文件的三种方法
2017/02/09 Python
解决Python获取字典dict中不存在的值时出错问题
2018/10/17 Python
python的concat等多种用法详解
2018/11/28 Python
python 根据时间来生成唯一的字符串方法
2019/01/14 Python
PyQt5内嵌浏览器注入JavaScript脚本实现自动化操作的代码实例
2019/02/13 Python
中国最大的名表商城:万表网
2016/08/29 全球购物
环法自行车赛官方商店:Le Tour de France
2017/08/27 全球购物
高中数学教学反思
2014/01/30 职场文书
经理管理专业毕业自荐书范文
2014/02/12 职场文书
向国旗敬礼学生寄语大全
2014/09/30 职场文书
tp5使用layui实现多个图片上传(带附件选择)的方法实例
2021/11/17 PHP
js中Map和Set的用法及区别实例详解
2022/02/15 Javascript
Python如何让字典保持有序排列
2022/04/29 Python