简述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与函数式编程解释
Apr 27 Javascript
Mootools 1.2教程 输入过滤第一部分(数字)
Sep 15 Javascript
把html页面的部分内容保存成新的html文件的jquery代码
Nov 12 Javascript
javascript实现的使用方向键控制光标在table单元格中切换
Nov 17 Javascript
js获取控件位置以及不同浏览器中的差别介绍
Aug 08 Javascript
原生js操作checkbox用document.getElementById实现
Oct 12 Javascript
Jquery的each里用return true或false代替break或continue
May 21 Javascript
详解JavaScript中getFullYear()方法的使用
Jun 10 Javascript
微信小程序实现单选选项卡切换效果
Jun 19 Javascript
Vue实现微信支付功能遇到的坑
Jun 05 Javascript
Ajax请求时无法重定向的问题解决代码详解
Jun 21 Javascript
基于vue 动态菜单 刷新空白问题的解决
Aug 06 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获取服务器端mac和客户端mac的地址支持WIN/LINUX
2014/05/15 PHP
php从csv文件读取数据并输出到网页的方法
2015/03/14 PHP
Netbeans 8.2将支持PHP7 更精彩
2016/06/13 PHP
php通过两层过滤获取留言内容的方法
2016/07/11 PHP
Yii2.0使用阿里云OSS的SDK上传图片、下载、删除图片示例
2017/09/20 PHP
javascript 网页跳转的方法
2008/12/24 Javascript
Jquery通过Ajax访问XML数据的小例子
2013/11/18 Javascript
JS判断字符串长度的5个方法(区分中文和英文)
2014/03/18 Javascript
分享2个jQuery插件--jquery.fileupload与artdialog
2014/12/26 Javascript
jquery 表单验证之通过 class验证表单不为空
2015/11/02 Javascript
javascript手风琴下拉菜单实现代码
2015/11/12 Javascript
jquery版轮播图效果和extend扩展
2017/07/18 jQuery
JavaScript数组push方法使用注意事项
2017/10/30 Javascript
Angular5中调用第三方库及jQuery的添加的方法
2018/06/07 jQuery
Javascript的this详解
2019/03/23 Javascript
Node.js如何优雅的封装一个实用函数的npm包的方法
2019/04/29 Javascript
简单学习5种处理Vue.js异常的方法
2019/06/17 Javascript
Js on及addEventListener原理用法区别解析
2020/07/11 Javascript
JavaScript的一些小技巧分享
2021/01/06 Javascript
基于element-ui封装表单金额输入框的方法示例
2021/01/06 Javascript
[01:01:52]DOTA2-DPC中国联赛正赛 iG vs LBZS BO3 第一场 3月4日
2021/03/11 DOTA
Python探索之SocketServer详解
2017/10/28 Python
Django admin美化插件suit使用示例
2017/12/12 Python
Python使用遗传算法解决最大流问题
2018/01/29 Python
python中setuptools的作用是什么
2020/06/19 Python
canvas里面如何基于随机点绘制一个多边形的方法
2018/06/13 HTML / CSS
英国婴儿和儿童服装网站:Vertbaudet
2018/04/02 全球购物
护理专业毕业生推荐信
2013/10/31 职场文书
宿舍卫生检讨书
2014/01/16 职场文书
2014大学校园光棍节活动策划书
2014/09/29 职场文书
交警正风肃纪剖析材料
2014/10/29 职场文书
导师对论文的学术评语
2015/01/04 职场文书
党员活动总结
2015/02/04 职场文书
《分数乘法》教学反思
2016/02/24 职场文书
解读Vue组件注册方式
2021/05/15 Vue.js
Python+Selenium自动化环境搭建与操作基础详解
2022/03/13 Python