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实现状态限定编辑的代码
Feb 11 Javascript
jquery二级导航内容均分的原理及实现
Aug 13 Javascript
Javascript获取HTML静态页面参数传递值示例
Aug 18 Javascript
javascript类型转换使用方法
Feb 08 Javascript
AngularJs  unit-testing(单元测试)详解
Sep 02 Javascript
前端js实现文件的断点续传 后端PHP文件接收
Oct 14 Javascript
js遮罩效果制作弹出注册界面效果
Jan 25 Javascript
canvas压缩图片转换成base64格式输出文件流
Mar 09 Javascript
基于angular实现三级联动的生日插件
May 12 Javascript
JavaScript之DOM_动力节点Java学院整理
Jul 03 Javascript
iphone刘海屏页面适配方法
May 07 Javascript
nest.js 使用express需要提供多个静态目录的操作方法
Oct 24 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
在线增减.htpasswd内的用户
2006/10/09 PHP
php获取英文姓名首字母的方法
2015/07/13 PHP
PHP yii实现model添加默认值的方法(两种方法)
2016/11/10 PHP
PHP错误和异常处理功能模块示例
2016/11/12 PHP
静态页面下用javascript操作ACCESS数据库(读增改删)的代码
2007/05/14 Javascript
JSQL 基于客户端的成绩统计实现方法
2010/05/05 Javascript
chrome浏览器不支持onmouseleave事件的解决技巧
2013/05/31 Javascript
使用js判断TextBox控件值改变然后出发事件
2014/03/07 Javascript
JavaScript中的Math.E属性使用详解
2015/06/12 Javascript
JavaScript返回上一页的三种方法及区别介绍
2015/07/04 Javascript
jQuery遍历DOM元素与节点方法详解
2016/04/14 Javascript
jQuery实现下拉框多选 jquery-multiselect 的实例代码
2016/07/14 Javascript
深入浅出ES6新特性之函数默认参数和箭头函数
2016/08/01 Javascript
Javascript中apply、call、bind的巧妙使用
2016/08/18 Javascript
Angular ng-class详解及实例代码
2016/09/19 Javascript
Jquery Easyui验证组件ValidateBox使用详解(20)
2016/12/18 Javascript
js 两个日期比较相差多少天的实例
2017/10/19 Javascript
详解Vue中使用插槽(slot)、聚类插槽
2019/04/12 Javascript
vue slot与传参实例代码讲解
2019/04/28 Javascript
JS 图片压缩原理与实现方法详解
2020/04/29 Javascript
python迭代器实例简析
2014/09/25 Python
Python中List.count()方法的使用教程
2015/05/20 Python
基于python(urlparse)模板的使用方法总结
2017/10/13 Python
django允许外部访问的实例讲解
2018/05/14 Python
Python smtplib实现发送邮件功能
2018/05/22 Python
Pycharm无法显示动态图片的解决方法
2018/10/28 Python
Python基于httpx模块实现发送请求
2020/07/07 Python
利用HTML5 Canvas制作键盘及鼠标动画的实例分享
2016/03/15 HTML / CSS
英国著名的小众美容品牌网站:Alyaka
2017/08/08 全球购物
英国健康和美容技术产品购物网站:CurrentBody
2019/07/17 全球购物
C++如何引用一个已经定义过的全局变量
2014/08/25 面试题
2014年医药代表工作总结
2014/11/22 职场文书
服务承诺书
2015/01/19 职场文书
责任书格式
2015/01/29 职场文书
八年级语文教学反思
2016/03/03 职场文书
怎么禁用Win11输入法 最新Win11输入法关闭教程
2022/08/05 数码科技