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 01 Javascript
基于jquery的仿百度搜索框效果代码
Apr 11 Javascript
JavaScript自定义事件介绍
Aug 29 Javascript
Jquery Ajax xmlhttp请求成功问题
Feb 04 Javascript
学习JavaScript设计模式之代理模式
Jan 12 Javascript
Bootstrap实现带动画过渡的弹出框
Aug 09 Javascript
详解vue2.0的Element UI的表格table列时间戳格式化
Jun 13 Javascript
jQuery实现点击关注和取消功能
Jul 03 jQuery
实例讲解JavaScript截取字符串
Nov 30 Javascript
webpack4 optimization使用总结
Nov 10 Javascript
修改vue源码实现动态路由缓存的方法
Jan 21 Javascript
vue随机验证码组件的封装实现
Feb 19 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中使用Oracle数据库(4)
2006/10/09 PHP
php5 non-thread-safe和thread-safe这两个版本的区别分析
2010/03/13 PHP
Symfony核心类概述
2016/03/17 PHP
JQuery 获得绝对,相对位置的坐标方法
2010/02/09 Javascript
前端开发必须知道的JS之原型和继承
2010/07/06 Javascript
IE6、IE7中获取Button元素的值的bug说明
2011/08/28 Javascript
使用jQuery的attr方法来修改onclick值
2014/07/07 Javascript
JS动态修改图片的URL(src)的方法
2015/04/01 Javascript
基于JavaScript实现移动端TAB触屏切换效果
2015/10/20 Javascript
多种js图片预加载实现方式分享
2016/02/19 Javascript
教你如何终止JQUERY的$.AJAX请求
2016/02/23 Javascript
jQuery技巧之让任何组件都支持类似DOM的事件管理
2016/04/05 Javascript
JS中mouseover和mouseout多次触发问题如何解决
2016/06/06 Javascript
Vue和React组件之间的传值方式详解
2019/01/31 Javascript
JS实现的对象去重功能示例
2019/06/04 Javascript
node实现爬虫的几种简易方式
2019/08/22 Javascript
关于JavaScript中异步/等待的用法与理解
2020/11/18 Javascript
python解析xml文件实例分享
2013/12/04 Python
详解Django 中是否使用时区的区别
2018/06/14 Python
深入理解Python异常处理的哲学
2019/02/01 Python
TensorFlow2.1.0安装过程中setuptools、wrapt等相关错误指南
2020/04/08 Python
Django REST Swagger实现指定api参数
2020/07/07 Python
python实现邮件循环自动发件功能
2020/09/11 Python
python中温度单位转换的实例方法
2020/12/27 Python
Python实现疫情地图可视化
2021/02/05 Python
百丽国际旗下购物网站:优购
2017/02/28 全球购物
医学生职业生涯规划书范文
2014/03/13 职场文书
家长会学生演讲稿
2014/04/26 职场文书
会计系毕业生求职信
2014/05/28 职场文书
党的群众路线教育实践活动批评与自我批评范文
2014/10/16 职场文书
党支部2014年度工作总结
2014/12/04 职场文书
PHP中国际化的字符串排序和比较对象详解
2021/08/23 PHP
阿里云服务器部署mongodb的详细过程
2021/09/04 MongoDB
关于使用Redisson订阅数问题
2022/01/18 Redis
使用CSS定位HTML元素的实现方法
2022/07/07 HTML / CSS
JS前端轻量fabric.js系列物体基类
2022/08/05 Javascript