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 01 Javascript
JS常用正则表达式总结
Nov 12 Javascript
改变状态栏文字的js代码
Jun 13 Javascript
js实现的简单radio背景颜色选择器代码
Aug 18 Javascript
JavaScript如何动态创建table表格
Aug 02 Javascript
原生js实现图片层叠轮播切换效果
Feb 02 Javascript
Bootstrap轮播插件中图片变形的终极解决方案 使用jqthumb.js
Jul 10 Javascript
BootStrap glyphicon图标无法显示的解决方法
Sep 06 Javascript
Vue.js实现微信过渡动画左右切换效果
Jun 13 Javascript
深入讲解xhr(XMLHttpRequest)/jsonp请求之abort
Jul 26 Javascript
使用VueRouter的addRoutes方法实现动态添加用户的权限路由
Jun 03 Javascript
Vue.js 中的实用工具方法【推荐】
Jul 04 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
Ajax实时验证用户名/邮箱等是否已经存在的代码打包
2011/12/01 PHP
PHP实现将HTML5中Canvas图像保存到服务器的方法
2014/11/28 PHP
php使用curl简单抓取远程url的方法
2015/03/13 PHP
php通过排列组合实现1到9数字相加都等于20的方法
2015/08/03 PHP
仿微博字符限制效果实现代码
2012/04/20 Javascript
Web Inspector:关于在 Sublime Text 中调试Js的介绍
2013/04/18 Javascript
jquery对象和DOM对象的区别介绍
2013/08/09 Javascript
Jquery实现由下向上展开效果的例子
2014/12/08 Javascript
Jquery插件easyUi实现表单验证示例
2015/12/15 Javascript
jQuery中判断对象是否存在的方法汇总
2016/02/24 Javascript
javascript实现去除HTML标签的方法
2016/12/26 Javascript
vue组件 $children,$refs,$parent的使用详解
2017/07/31 Javascript
Javascript数组及类数组相关原理详解
2020/10/29 Javascript
[47:08]OG vs INfamous 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
介绍Python中几个常用的类方法
2015/04/08 Python
以Flask为例讲解Python的框架的使用方法
2015/04/29 Python
Python编程中装饰器的使用示例解析
2016/06/20 Python
python机器学习案例教程——K最近邻算法的实现
2017/12/28 Python
详解python多线程、锁、event事件机制的简单使用
2018/04/27 Python
使用 Python 实现简单的 switch/case 语句的方法
2018/09/17 Python
彻彻底底地理解Python中的编码问题
2018/10/15 Python
对python以16进制打印字节数组的方法详解
2019/01/24 Python
python实现复制大量文件功能
2019/08/31 Python
基于K.image_data_format() == 'channels_first' 的理解
2020/06/29 Python
Python Tricks 使用 pywinrm 远程控制 Windows 主机的方法
2020/07/21 Python
pandas apply多线程实现代码
2020/08/17 Python
html5 input元素新特性_动力节点Java学院整理
2017/07/06 HTML / CSS
电脑饰品店的创业计划书
2014/01/21 职场文书
学生手册家长评语
2014/02/10 职场文书
销售员个人求职的自我评价
2014/02/10 职场文书
信用卡工资证明格式
2014/09/13 职场文书
改进工作作风心得体会
2016/01/23 职场文书
美德少年事迹材料(2016推荐版)
2016/02/25 职场文书
个人职业生涯规划之自我评估篇
2019/09/03 职场文书
一文搞懂Golang 时间和日期相关函数
2021/12/06 Golang
Kubernetes控制节点的部署
2022/04/01 Servers