jQuery对象和DOM对象使用说明


Posted in Javascript onJune 25, 2010

1.jQuery对象和DOM对象
第一次学习jQuery,经常分辨不清哪些是jQuery对象,哪些是DOM对象,因此需要重点了解jQuery对象和DOM对象以及它们之间的关系.
DOM对象,即是我们用传统的方法(javascript)获得的对象,jQuery对象即是用jQuery类库的选择器获得的对象;

var domObj = document.getElementById("id"); //DOM对象 
var $obj = $("#id"); //jQuery对象;

jQuery对象就是通过jQuery包装DOM对象后产生的对象,它是jQuery独有的。如果一个对象是jQuery对象,那么就可以使用jQuery里的方法,例:
$("#foo").html(); //获取id为foo的元素内的html代码,html()是jQuery特有的方法;
上面的那段代码等同于:
document.getElementById("foo").innerHTML;

注意:在jQuery对象中无法使用DOM对象的任何方法。
例如$("#id").innerHTML和$("#id").checked之类的写法都是错误的,可以用$("#id").html()和$("#id").attr ("checked")之类的 jQuery方法来代替。同样,DOM对象也不能使用jQuery方法。学习jQuery开始就应当树立正确的观念,分清jQuery对象和DOM对象之间的区别,之后学习 jQuery就会轻松很多的。

2.jQuery对象和DOM对象的互相转换

在上面第一点说了,jquery对象和dom对象是不一样的!比如jquery对象不能使用dom的方法,dom对象不能使用jquery方法,那假如我jquery没有封装我要的方法,那能怎么办呢?
这时我们可以将jquer对象转换成dom对象

jquery对象转换成dom对象
jquery提供了两种方法将一个jquery对象转换成一个dom对象,即[index]和get(index)。可能有人会觉得奇怪,怎么是用下标呢,没错,jquery对象就是一个数组对象.
下面代码将演示一个jquery对象转换成dom对象,再使用dom对象的方法

var $cr=$("#cr"); //jquery对象 
var cr = $cr[0]; //dom对象 也可写成 var cr=$cr.get(0); 
alert(cr.checked); //检测这个checkbox是否给选中

dom对象转换成jquery对象
对于一个dom对象,只需要用$()把dom对象包装起来,就可以获得一个jquery对象了,方法为$(dom对象);
var cr=document.getElementById("cr"); //dom对象 
var $cr = $(cr); //转换成jquery对象

转换后可以任意使用jquery中的方法了.

通过以上的方法,可以任意的相互转换jquery对象和dom对象.
最后再次强调,dom对象才能使用dom中的方法,jquery对象不可以使用dom中的方法,但jquery对象提供了一套更加完善的工具用于操作dom,关于jquery的dom操作将在后面的文章进行详细讲解.

ps:平时用到的jquery对象都是通过$()函数制造出来的,$()函数就是一个jquery对象的制造工厂.
建议:如果获取的对象是jquery对象,那么在变量前面加上$,这样方便容易识别出哪些是jquery对象,例如:
var $variable = jquery对象;
如果获取的是dom对象,则定义如下:
var variable = dom对象

Javascript 相关文章推荐
JQuery 写的个性导航菜单
Dec 24 Javascript
单击复制文字兼容各浏览器的完美解决方案
Jul 04 Javascript
javascript实现带下拉子菜单的导航菜单效果
May 14 Javascript
JS实现仿新浪黄色经典滑动门效果代码
Sep 27 Javascript
Highcharts 多个Y轴动态刷新数据的实现代码
May 28 Javascript
AngularJS 与百度地图的结合实例
Oct 20 Javascript
解决Window10系统下Node安装报错的问题分析
Dec 13 Javascript
Angular实现点击按钮后在上方显示输入内容的方法
Dec 27 Javascript
bmob js-sdk 在vue中的使用教程
Jan 21 Javascript
浅谈VueJS SSR 后端绘制内存泄漏的相关解决经验
Dec 20 Javascript
使用 JavaScript 制作页面效果
Apr 21 Javascript
小程序实现侧滑删除功能
Jun 25 Javascript
safari,opera嵌入iframe页面cookie读取问题解决方法
Jun 23 #Javascript
浅谈tudou土豆网首页图片延迟加载的效果
Jun 23 #Javascript
有道JavaScript监听浏览器的问题
Jun 23 #Javascript
utf-8编码引起js输出中文乱码的解决办法
Jun 23 #Javascript
js和jquery批量绑定事件传参数一(新猪猪原创)
Jun 23 #Javascript
获取dom元素那些讨厌的位置封装代码
Jun 23 #Javascript
jquery ajax 同步异步的执行示例代码
Jun 23 #Javascript
You might like
PHP初学入门
2006/11/19 PHP
调试PHP程序的多种方法介绍
2014/11/06 PHP
使用URL传输SESSION信息
2015/07/14 PHP
JavaScript 内置对象属性及方法集合
2010/07/04 Javascript
firefox下input type="file"的size是多大
2011/10/24 Javascript
浅析JavaScript中的隐式类型转换
2013/12/05 Javascript
JS小游戏之宇宙战机源码详解
2014/09/25 Javascript
每天一篇javascript学习小结(Array数组)
2015/11/11 Javascript
JavaScript的函数式编程基础指南
2016/03/19 Javascript
js addDqmForPP给标签内属性值加上双引号的函数
2016/12/24 Javascript
纯js仿淘宝京东商品放大镜功能
2017/03/02 Javascript
JavaScript实现修改伪类样式
2017/11/27 Javascript
详解Javascript中new()到底做了些什么?
2018/03/29 Javascript
微信小程序中进行地图导航功能的实现方法
2018/06/29 Javascript
JavaScript中十种一步拷贝数组的方法实例详解
2019/04/22 Javascript
[07:03]显微镜下的DOTA2第九期——430圣堂刺客杀戮秀
2014/06/20 DOTA
python web框架学习笔记
2016/05/03 Python
对Python进行数据分析_关于Package的安装问题
2017/05/22 Python
对python_discover方法遍历所有执行的用例详解
2019/02/13 Python
VSCode Python开发环境配置的详细步骤
2019/02/22 Python
解决python3.5 正常安装 却不能直接使用Tkinter包的问题
2019/02/22 Python
深入浅析Python中的迭代器
2019/06/04 Python
python selenium 查找隐藏元素 自动播放视频功能
2019/07/24 Python
Python实现朴素贝叶斯的学习与分类过程解析
2019/08/24 Python
python实现字符串和数字拼接
2020/03/02 Python
pycharm中导入模块错误时提示Try to run this command from the system terminal
2020/03/26 Python
params有什么用
2016/03/01 面试题
mysql有关权限的表都有哪几个
2015/04/22 面试题
我们的节日元宵活动方案
2014/08/23 职场文书
“三支一扶”支教教师思想汇报
2014/09/13 职场文书
汶川大地震感悟
2015/08/10 职场文书
2016感恩母亲节校园广播稿
2015/12/17 职场文书
各类场合主持词开场白范文集锦
2019/08/16 职场文书
CSS3实现模糊背景的三种效果示例
2021/03/30 HTML / CSS
Golang 使用Map实现去重与set的功能操作
2021/04/29 Golang
详解python字符串驻留技术
2021/05/21 Python