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 (十一) 实战表单验证与自动完成提示插件
Feb 23 Javascript
JQuery插件fancybox无法在弹出层使用左右键的解决办法
Dec 25 Javascript
使用Script元素发送JSONP请求的方法
Jun 12 Javascript
从重置input file标签中看jQuery的 .val() 和 .attr(“value”) 区别
Jun 12 Javascript
浅谈addEventListener和attachEvent的区别
Jul 14 Javascript
Web制作验证码功能实例代码
Jun 19 Javascript
微信小程序实现滚动消息通知
Feb 02 Javascript
vue 实现的树形菜的实例代码
Mar 19 Javascript
Vue单页应用引用单独的样式文件的两种方式
Mar 30 Javascript
使用js实现将后台传入的json数据放在前台显示
Aug 06 Javascript
微信小程序使用echarts获取数据并生成折线图
Oct 16 Javascript
react使用antd表单赋值,用于修改弹框的操作
Oct 29 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_SELF的安全问题
2009/09/05 PHP
PHP获取网址的顶级域名函数代码
2012/09/24 PHP
学习YUI.Ext基础第一天
2007/03/10 Javascript
JavaScript isPrototypeOf和hasOwnProperty使用区别
2010/03/04 Javascript
23个Javascript弹出窗口特效整理
2011/02/25 Javascript
node爬取微博的数据的简单封装库nodeweibo使用指南
2015/01/02 Javascript
JS实现动态表格的添加,修改,删除功能(推荐)
2016/06/15 Javascript
jQuery checkbox选中问题之prop与attr注意点分析
2016/11/15 Javascript
jsTree使用记录实例
2016/12/01 Javascript
Jquery把获取到的input值转换成json
2017/05/15 jQuery
详解vue 组件之间使用eventbus传值
2017/10/25 Javascript
vue2.0项目集成Cesium的实现方法
2019/07/30 Javascript
vue 设置 input 为不可以编辑的实现方法
2019/09/19 Javascript
如何在微信小程序中使用骨架屏的步骤
2020/06/12 Javascript
python爬虫的工作原理
2017/03/05 Python
Python学习之Django的管理界面代码示例
2018/02/10 Python
python执行系统命令后获取返回值的几种方式集合
2018/05/12 Python
Django contenttypes 框架详解(小结)
2018/08/13 Python
Django 缓存配置Redis使用详解
2019/07/23 Python
python ftplib模块使用代码实例
2019/12/31 Python
Python字符串查找基本操作代码案例
2020/10/27 Python
python利用opencv实现颜色检测
2021/02/23 Python
HTML5之SVG 2D入门13—svg对决canvas及长处和适用场景分析
2013/01/30 HTML / CSS
使用jTopo给Html5 Canva中绘制的元素添加鼠标事件
2014/05/15 HTML / CSS
HTML5移动端开发中的Viewport标签及相关CSS用法解析
2016/04/15 HTML / CSS
中国专业的综合网上购物商城:京东
2016/08/02 全球购物
导游实习生自荐书
2014/01/28 职场文书
挂靠协议书范本
2014/04/22 职场文书
国旗下的讲话演讲稿
2014/05/08 职场文书
鲁迅故里导游词
2015/02/05 职场文书
八月迷情观后感
2015/06/11 职场文书
《雪域豹影》读后感:父爱的伟大
2019/12/23 职场文书
spring boot项目application.properties文件存放及使用介绍
2021/06/30 Java/Android
《遗弃》开发商删推文要跑路?官方回应:还在开发
2022/04/03 其他游戏
浅析JavaScript中的变量提升
2022/06/01 Javascript
如何利用python实现列表嵌套字典取值
2022/06/10 Python