简述Jquery与DOM对象


Posted in Javascript onJuly 10, 2015

在第一次学习jquery中,常常会不能分辨DOM对象和Jquery对象,下面我们就简诉一下它们之间的关系和区别

1.DOM对象(Document Object Model)

文档对象模型,每一份DOM都可表示为一棵树,例如下面是一个简单的网页代码:

简述Jquery与DOM对象

表示为DOM为:

简述Jquery与DOM对象

我们可以通过JS中的getelementsByTayName或getelementsByTayId来获取树中的节点,像这样获取到的元素就是DOM对象,DOM可以使用JS中方法,例如:

var domobj=document.getelementsByTayName("Name");            //获取DOM对象

var objhtml=domobj.innerHTML;                                                 //使用JS中的innerHTML方法2.2

2.Jquery对象

Jquery对象就是通过Jquery包装DOM对象后产生的对象,他是Jquery独有的,可以调用jquery中的方法,例如:

$("#foo").HTML();

Jquery对象不能调用DOM对象的任何方法,例如:

$("#foo").innerHTML                                                                       //将会出现错误

3.DOM对象和Jquery对象之间的相互转化

我们在转化他们之前,必须先规定定义变量的风格,如定义个Jquery对象时,添加一个$符号,例如:

var $obj=Jquery对象

定义DOM对象时,则不需要添加任何符号,这样可以帮助我们区分变量是什么对象,提高代码的可读性,例如:

var domobj=DOM对象

当Jquery类库中没有我们想要的方法或者我们对Jquery的方法不太清楚时,我们就可以转化为DOM对象,有2种方法将Jquery对象转化为DOM对象----[index]/get(index),
(1)jquery对象是一个数组对象,通过[index]得到一个DOM对象,代码如下:

var $obj=$("#sc");
var obj=$obj[0];
alter(obj.checked);

(2)另一种方法是Jquery自己提供的,通过get(index)获取到DOM对象,例如:

var $obj=$("#sc");
var obj=$obj.get(0);
alter(obj.checked);

4.DOM对象转化为Jquery对象

DOM对象只需要通过$(),就可以转化为一个Jquery对象,例如:

var obj=document.getelementsByTayName("Name");
var $obj=$(obj);

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
ExtJS GTGrid 简单用户管理
Jul 01 Javascript
JavaScript写的一个自定义弹出式对话框代码
Jan 17 Javascript
使用js对select动态添加和删除OPTION示例代码
Aug 12 Javascript
js中onload与onunload的使用示例
Aug 25 Javascript
JS生成某个范围的随机数【四种情况详解】
Apr 20 Javascript
解决vue 路由变化页面数据不刷新的问题
Mar 13 Javascript
浅谈Vue路由快照实现思路及其问题
Jun 07 Javascript
详解基于Vue cli生成的Vue项目的webpack4升级
Jun 19 Javascript
angularJs在多个控制器中共享服务数据的方法
Sep 30 Javascript
vue使用Font Awesome的方法步骤
Feb 26 Javascript
微信小程序环境下将文件上传到OSS的方法步骤
May 31 Javascript
JS中的算法与数据结构之链表(Linked-list)实例详解
Aug 20 Javascript
JavaScript声明变量名的语法规则
Jul 10 #Javascript
JS控制表单提交的方法
Jul 09 #Javascript
JS获取下拉框显示值和判断单选按钮的方法
Jul 09 #Javascript
JavaScript的类型、值和变量小结
Jul 09 #Javascript
JS实现文档加载完成后执行代码
Jul 09 #Javascript
jQuery检测某个元素是否存在代码分享
Jul 09 #Javascript
jquery.map()方法的使用详解
Jul 09 #Javascript
You might like
PHP微信API接口类
2016/08/22 PHP
完美解决phpexcel导出到xls文件出现乱码的问题
2016/10/29 PHP
解决form中action属性后面?传递参数 获取不到的问题
2017/07/21 PHP
javascript 复杂的嵌套环境中输出单引号和双引号
2009/05/26 Javascript
ExtJs事件机制基本代码模型和流程解析
2010/10/24 Javascript
JS高级调试技巧:捕获和分析 JavaScript Error详解
2014/03/16 Javascript
javascript获取函数名称、函数参数、对象属性名称的代码实例
2014/04/12 Javascript
js阻止事件追加的具体实现
2014/10/15 Javascript
JavaSacript中charCodeAt()方法的使用详解
2015/06/05 Javascript
jQuery实现仿腾讯视频列表分页效果的方法
2015/08/07 Javascript
jQuery解析返回的xml和json方法详解
2017/01/05 Javascript
Javascript实现信息滚动效果
2017/05/18 Javascript
vue快捷键与基础指令详解
2017/06/01 Javascript
angular bootstrap timepicker TypeError提示怎么办
2017/06/13 Javascript
浅谈angular4实际项目搭建总结
2017/12/01 Javascript
在Vuex使用dispatch和commit来调用mutations的区别详解
2018/09/18 Javascript
详解create-react-app 2.0版本如何启用装饰器语法
2018/10/23 Javascript
微信小程序使用wxParse解析html的方法示例
2019/01/17 Javascript
Vue.js计算机属性computed和methods方法详解
2019/10/12 Javascript
Python中处理unchecked未捕获异常实例
2015/01/17 Python
Python制作爬虫采集小说
2015/10/25 Python
Python探索之pLSA实现代码
2017/10/25 Python
详解Django中间件的5种自定义方法
2018/07/26 Python
Django项目中实现使用qq第三方登录功能
2019/08/13 Python
Python进程间通信 multiProcessing Queue队列实现详解
2019/09/23 Python
pytorch载入预训练模型后,实现训练指定层
2020/01/06 Python
Python 判断时间是否在时间区间内的实例
2020/05/16 Python
python+opencv3.4.0 实现HOG+SVM行人检测的示例代码
2021/01/28 Python
生产车间实习自我鉴定
2013/09/23 职场文书
中层干部岗位职责
2013/12/18 职场文书
九年级语文教学反思
2014/02/04 职场文书
售房委托书
2014/08/30 职场文书
2015年环境整治工作总结
2015/05/22 职场文书
关于公司年会的开幕词
2016/03/04 职场文书
诺贝尔奖获得者名言100句:句句启人心智,值永久收藏
2019/08/09 职场文书
python中validators库的使用方法详解
2022/09/23 Python