简述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 相关文章推荐
JS 参数传递的实际应用代码分析
Sep 13 Javascript
js中字符替换函数String.replace()使用技巧
Aug 14 Javascript
页面只能打开一次Cooike如何实现
Dec 04 Javascript
js实现的map方法示例代码
Jan 13 Javascript
React Native实现进度条弹框的示例代码
Jul 17 Javascript
Angular中管道操作符(|)的使用方法
Dec 15 Javascript
vue-cli配置文件——config篇
Jan 04 Javascript
基于iScroll实现内容滚动效果
Mar 21 Javascript
微信小程序实现九宫格抽奖
Apr 15 Javascript
jQuery加PHP实现图片上传并提交的示例代码
Jul 16 jQuery
Element DateTimePicker日期时间选择器的使用示例
Jul 27 Javascript
解决pycharm双击但是无法打开的情况
Oct 31 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
从零开始学YII2框架(六)高级应用程序模板
2014/08/20 PHP
thinkphp数据查询和遍历数组实例
2014/11/28 PHP
php实现无限级分类查询(递归、非递归)
2016/03/10 PHP
用js实现的抽象CSS圆角效果!!
2007/05/03 Javascript
JQuery 学习笔记 选择器之六
2009/07/23 Javascript
Chosen 基于jquery的选择框插件使用方法
2012/05/30 Javascript
jquery插件qrcode在线生成二维码
2015/04/26 Javascript
PHP+mysql+Highcharts生成饼状图
2015/05/04 Javascript
jQuery prototype冲突的2种解决方法(附demo示例下载)
2016/01/21 Javascript
基于Javascript实现返回顶部按钮
2016/02/29 Javascript
全面理解闭包机制
2016/07/11 Javascript
javascript经典特效分享 手风琴、轮播图、图片滑动
2016/09/14 Javascript
D3.js实现饼状图的方法详解
2016/09/21 Javascript
KnockoutJS 3.X API 第四章之click绑定
2016/10/10 Javascript
vue中element组件样式修改无效的解决方法
2018/02/03 Javascript
原生javascript AJAX 三级联动的实现代码
2018/05/04 Javascript
Vue学习之常用指令实例详解
2020/01/06 Javascript
vue实现导航菜单和编辑文本的示例代码
2020/07/04 Javascript
VUE 单页面使用 echart 窗口变化时的用法
2020/07/30 Javascript
微信小程序实现电影App导航和轮播
2020/11/30 Javascript
[01:39:04]DOTA2-DPC中国联赛 正赛 SAG vs CDEC BO3 第二场 2月1日
2021/03/11 DOTA
Django框架 查询Extra功能实现解析
2019/09/04 Python
Pytorch 使用CNN图像分类的实现
2020/06/16 Python
matplotlib 多个图像共用一个colorbar的实现示例
2020/09/10 Python
python 批量下载bilibili视频的gui程序
2020/11/20 Python
李维斯德国官方网上商店:Levi’s德国
2016/09/10 全球购物
Sephora丝芙兰印尼官方网站:购买化妆品和护肤品
2018/07/02 全球购物
运动会跳远加油稿
2014/02/20 职场文书
企业宣传标语
2014/06/09 职场文书
违反工作规定检讨书范文
2014/12/14 职场文书
教师个人年度总结
2015/02/11 职场文书
小学体育教学随笔
2015/08/14 职场文书
2015年社区消防安全工作总结
2015/10/14 职场文书
人为什么会“幸灾乐祸”?
2019/08/06 职场文书
MySQL 如何设计统计数据表
2021/06/15 MySQL
SQL Server Agent 服务无法启动
2022/04/20 SQL Server