简述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 相关文章推荐
使用jQuery validate 验证注册表单实例演示
Mar 25 Javascript
iframe里的页面禁止右键事件的方法
Jun 10 Javascript
jQuery如何防止这种冒泡事件发生
Feb 27 Javascript
jQuery Form表单取值的方法
Jan 11 Javascript
JScript实现表格的简单操作
Aug 15 Javascript
基于js中的原型(全面讲解)
Sep 19 Javascript
javascript 产生随机数的几种方法总结
Sep 26 Javascript
webpack4 CSS Tree Shaking的使用
Sep 03 Javascript
多个vue子路由文件自动化合并的方法
Sep 03 Javascript
vue中使用GraphQL的实例代码
Nov 04 Javascript
基于原生js实现判断元素是否有指定class名
Jul 11 Javascript
js实现自动锁屏功能
Jun 02 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里的JS打印函数
2006/10/09 PHP
模仿OSO的论坛(二)
2006/10/09 PHP
PHP用身份证号获取星座和生肖的方法
2013/11/07 PHP
PHP输出缓存ob系列函数详解
2014/03/11 PHP
php利用scws实现mysql全文搜索功能的方法
2014/12/25 PHP
smarty模板引擎基础知识入门
2015/03/30 PHP
js中的值类型和引用类型小结 文字说明与实例
2010/12/12 Javascript
js正则表达exec与match的区别说明
2014/01/29 Javascript
一个很有趣3D球状标签云兼容IE8
2014/08/22 Javascript
Jquery中扩展方法extend使用技巧
2014/08/24 Javascript
javascript获取dom的下一个节点方法
2014/09/05 Javascript
AngularJS的表单使用详解
2015/06/17 Javascript
基于CSS3和jQuery实现跟随鼠标方位的Hover特效
2016/07/25 Javascript
Vue实现virtual-dom的原理简析
2017/07/10 Javascript
vue-cli项目无法用本机IP访问的解决方法
2018/09/20 Javascript
VUE v-model表单数据双向绑定完整示例
2019/01/21 Javascript
echarts实现词云自定义形状的示例代码
2019/02/20 Javascript
js实现点击选项置顶动画效果
2020/08/25 Javascript
浅析vue中的nextTick
2020/12/28 Vue.js
[53:03]Optic vs TNC 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
基于python(urlparse)模板的使用方法总结
2017/10/13 Python
Django的性能优化实现解析
2019/07/30 Python
解决python中的幂函数、指数函数问题
2019/11/25 Python
Java多线程实现四种方式原理详解
2020/06/02 Python
Python批量获取并保存手机号归属地和运营商的示例
2020/10/09 Python
Bibloo匈牙利:女装、男装、童装及鞋子和配饰
2019/04/14 全球购物
什么是Oracle的后台进程background processes?都有哪些后台进程?
2012/04/26 面试题
大专毕业生简历的自我评价
2013/10/20 职场文书
室内拓展活动方案
2014/02/13 职场文书
班主任班级寄语大全
2014/04/04 职场文书
《月亮湾》教学反思
2014/04/14 职场文书
优秀应届生求职信
2014/06/16 职场文书
田径运动会通讯稿
2015/07/18 职场文书
五年级数学教学反思
2016/02/16 职场文书
php png失真的原因及解决办法
2021/10/24 PHP
Android中View.post和Handler.post的关系
2022/06/05 Java/Android