简述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 相关文章推荐
利用javascript查看html源文件
Nov 08 Javascript
一样的table?不一样的table(可编辑状态table)
Sep 19 Javascript
JS前端框架关于重构的失败经验分享
Mar 17 Javascript
js控制滚动条缓慢滚动到顶部实现代码
Mar 20 Javascript
使用getBoundingClientRect方法实现简洁的sticky组件的方法
Mar 22 Javascript
AngularJS入门教程之与服务器(Ajax)交互操作示例【附完整demo源码下载】
Nov 02 Javascript
js实现抽奖效果
Mar 27 Javascript
JS jQuery使用正则表达式去空字符的简单实现代码
May 20 jQuery
详解vue2.0+vue-video-player实现hls播放全过程
Mar 02 Javascript
搭建一个Koa后端项目脚手架的方法步骤
May 30 Javascript
vue使用websocket的方法实例分析
Jun 22 Javascript
vue+webpack dev本地调试全局样式引用失效的解决方案
Nov 12 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
ThinkPHP分页类使用详解
2014/03/05 PHP
php可生成缩略图的文件上传类实例
2014/12/17 PHP
PHP实现在线阅读PDF文件的方法
2015/06/23 PHP
tp5(thinkPHP5)操作mongoDB数据库的方法
2018/01/20 PHP
Mootools 1.2教程 滑动效果(Slide)
2009/09/15 Javascript
js特殊字符转义介绍
2013/11/05 Javascript
js+html5通过canvas指定开始和结束点绘制线条的方法
2015/06/05 Javascript
JQuery移动页面开发之屏幕方向改变与滚屏的实现
2015/12/03 Javascript
BootStrap创建响应式导航条实例代码
2016/05/31 Javascript
jQuery获取单选按钮radio选中值与去除所有radio选中状态的方法
2017/05/20 jQuery
jQuery异步提交表单实例
2017/05/30 jQuery
JavaScript 通过Ajax 动态加载CheckBox复选框
2017/08/31 Javascript
详解从零搭建 vue2 vue-router2 webpack3 工程
2017/11/22 Javascript
基于vue 开发中出现警告问题去除方法
2018/01/25 Javascript
MUI 实现侧滑菜单及其主体部分上下滑动的方法
2018/01/25 Javascript
详解使用jQuery.i18n.properties实现js国际化
2018/05/04 jQuery
vue中的过滤器及其时间格式化问题
2020/04/09 Javascript
JavaScript常用8种数组去重代码实例
2020/09/09 Javascript
[32:26]EG vs IG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
对Python的多进程锁的使用方法详解
2019/02/18 Python
numpy求平均值的维度设定的例子
2019/08/24 Python
详解Ubuntu环境下部署Django+uwsgi+nginx总结
2020/04/02 Python
解决pycharm导入numpy包的和使用时报错:RuntimeError: The current Numpy installation (‘D:\\python3.6\\lib\\site-packa的问题
2020/12/08 Python
使用Python下载抖音各大V视频的思路详解
2021/02/06 Python
Html5 canvas画图白板踩坑
2020/06/01 HTML / CSS
Clarks英国官方网站:全球领军鞋履品牌
2016/11/26 全球购物
Boden英国官网:英国知名原创时装品牌
2018/11/06 全球购物
中介业务员岗位职责
2014/04/09 职场文书
小学三年级学生评语
2014/04/22 职场文书
纪检干部现实表现材料
2014/08/21 职场文书
超市七夕促销活动方案
2014/08/28 职场文书
革命英雄事迹演讲稿
2014/09/13 职场文书
代领报检证委托书范本
2014/10/11 职场文书
2014财务部年度工作总结
2014/12/08 职场文书
python opencv通过按键采集图片源码
2021/05/20 Python
浅谈python数据类型及其操作
2021/05/25 Python