文档章节

DOM对象与jquery对象的区别

zwjjap
 zwjjap
发布于 2015/07/23 15:06
字数 838
阅读 426
收藏 0

「深度学习福利」大神带你进阶工程师,立即查看>>>

 jQuery对象和DOM对象使用说明,需要的朋友可以参考下。

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对象


zwjjap
粉丝 14
博文 198
码字总数 22011
作品 0
武汉
程序员
私信 提问
加载中
请先登录后再评论。
访问安全控制解决方案

本文是《轻量级 Java Web 框架架构设计》的系列博文。 今天想和大家简单的分享一下,在 Smart 中是如何做到访问安全控制的。也就是说,当没有登录或 Session 过期时所做的操作,会自动退回到...

黄勇
2013/11/03
3.5K
8
beego API开发以及自动化文档

beego API开发以及自动化文档 beego1.3版本已经在上个星期发布了,但是还是有很多人不了解如何来进行开发,也是在一步一步的测试中开发,期间QQ群里面很多人都问我如何开发,我的业余时间实在...

astaxie
2014/06/25
2.7W
22
表单验证插件--Jquery表单验证插件

目前支持对以下格式的值进行验证: cnum-(纯数字), char-(纯字母), zwen-(中文), bysc-(字母开头), mail(邮箱), yzbm(邮政编码) 其中的‘’表示长度,比如“zwen1-5”表示中文1-5位的长度。同...

huanganiu
2013/01/23
4.4K
0
代码生成器--Codgen

Codgen是一个基于数据库元数据模型,使用freemarker模板引擎来构建输出的代码生成器。freemarker的数据模型结构通常来说都是一个Map树状结构模型,codgen也不例外,它的数据模型这棵树的根节...

黄天政
2013/01/29
1.4W
2
跨平台 3D 游戏引擎--Castle Game Engine

Castle Game Engine 是一个用 Object Pascal 开发的跨平台 3D 游戏引擎。包含一个灵活的 3D 对象系统与开箱即用的水平,项目,智能生物等等。使用 X3D、VRML、Collada 和其他格式实现渲染和处理...

匿名
2013/02/05
2K
0

没有更多内容

加载失败,请刷新页面

加载更多

人工神经网络分类器及BP算法相关数学推导和思考

人工神经网络相关数学推导和思考 今天凌晨今天凌晨的欧冠的八分之一决赛中,巴萨依靠朗格莱,梅西,苏亚雷斯三人的进球顺利挺进八强!梅老板的1V4更是让人直呼:爷青回!那么问题来了,如何根...

osc_873fteab
30分钟前
0
0
Spring Boot实战解决高并发数据入库: Redis 缓存+MySQL 批量入库

前言 最近在做阅读类的业务,需要记录用户的PV,UV; 项目状况:前期尝试业务阶段; 特点: 快速实现(不需要做太重,满足初期推广运营即可) 快速投入市场去运营 收集用户的原始数据,三要素...

osc_g96tdr1z
31分钟前
0
0
HFDS的数据写入流程

1.HFDS的数据写入流程的基本参数 首先了解数据写入过程中,什么是block, packet, chunk 1.block:数据块,当上传的文件太大时, 就需要分块,一个块默认设置时128M, 在客户端完成切割操作。...

osc_52r4y6wv
32分钟前
22
0
CVE-2020-14644 weblogic iiop反序列化漏洞分析

报告编号:B6-2020-081101 报告来源:360CERT 报告作者:ph4nt0mer 更新日期:2020-08-11 0x01 文章简述 2020年7月15日,Oracle发布2020年7月关键补丁更新,其中针对 WebLogic Server Core组件...

360CERT
今天
0
0
程序员到底要不要懂业务?

一、前言 给非互联网行业从业者科普一下,互联网公司一个项目团队的标准成员组成和职责分工:项目经理、架构师、产品经理、核心开发人员(TL)、开发、测试、运营(或业务方)。 项目经理:一...

osc_r0irdqn7
32分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部