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 相关文章推荐
javascript基本语法分析说明
Jun 15 Javascript
jQuery 三击事件实现代码
Sep 11 Javascript
jQuery移除元素自动解绑事件实现思路及代码
May 31 Javascript
Node.js中require的工作原理浅析
Jun 24 Javascript
jQuery后代选择器用法实例
Dec 23 Javascript
举例详解Python中smtplib模块处理电子邮件的使用
Jun 24 Javascript
JavaScript中捕获/阻止捕获、冒泡/阻止冒泡方法
Dec 07 Javascript
浅谈JavaScript中promise的使用
Jan 11 Javascript
jQuery+Cookie实现切换皮肤功能【附源码下载】
Mar 25 jQuery
jQuery实现的3D版图片轮播示例【滑动轮播】
Jan 18 jQuery
Vue CLI3中使用compass normalize的方法
May 30 Javascript
vue项目如何打包之项目打包优化(让打包的js文件变小)
Apr 30 Vue.js
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/10/09 PHP
php录入页面中动态从数据库中提取数据的实现
2006/10/09 PHP
php设置允许大文件上传示例代码
2014/03/10 PHP
php mb_substr()函数截取中文字符串应用示例
2014/07/29 PHP
PHP实现根据银行卡号判断银行
2015/04/29 PHP
php 算法之实现相对路径的实例
2017/10/17 PHP
extjs 学习笔记(三) 最基本的grid
2009/10/15 Javascript
javascript之querySelector和querySelectorAll使用介绍
2011/12/20 Javascript
JQuery UI的拖拽功能实现方法小结
2012/03/14 Javascript
通过js动态操作table(新增,删除相关列信息)
2012/05/23 Javascript
Javascript模块化编程(三)require.js的用法及功能介绍
2013/01/17 Javascript
js delete 用法(删除对象属性及变量)
2014/08/24 Javascript
从数据库读取数据后将其输出成html标签的三种方法
2014/10/13 Javascript
Js数组排序函数sort()介绍
2015/06/08 Javascript
leaflet的开发入门教程
2016/11/17 Javascript
浅析如何利用angular结合translate为项目实现国际化
2016/12/08 Javascript
一次围绕setTimeout的前端面试经验分享
2017/06/15 Javascript
JS基于正则实现数字千分位用逗号分隔的方法
2017/06/16 Javascript
关于webpack代码拆分的解析
2017/07/20 Javascript
基于jQuery中ajax的相关方法汇总(必看篇)
2017/11/08 jQuery
Vue项目中如何引入icon图标
2018/03/28 Javascript
Vue2.0中三种常用传值方式(父传子、子传父、非父子组件传值)
2018/08/16 Javascript
Python模拟三级菜单效果
2017/09/11 Python
python实现猜数字小游戏
2020/03/24 Python
python 简单照相机调用系统摄像头实现方法 pygame
2018/08/03 Python
django使用xadmin的全局配置详解
2019/11/15 Python
python3中numpy函数tile的用法详解
2019/12/04 Python
python中upper是做什么用的
2020/07/20 Python
html5 利用canvas手写签名并保存的实现方法
2018/07/12 HTML / CSS
英国女士和男士时尚服装网上购物:Top Labels Online
2018/03/25 全球购物
财产保全担保书范文
2014/04/01 职场文书
实习生辞职信范文
2015/03/02 职场文书
长江七号观后感
2015/06/11 职场文书
详解Redis复制原理
2021/06/04 Redis
教你一步步实现一个简易promise
2021/11/02 Javascript
Winsows11性能如何? win11性能测评多核竟比Win10差了10%
2021/11/21 数码科技