简述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 相关文章推荐
取键盘键位ASCII码的网页
Jul 30 Javascript
JS分割字符串并放入数组的函数
Jul 04 Javascript
jQuery图片预加载 等比缩放实现代码
Oct 04 Javascript
js快速排序的实现代码
Dec 08 Javascript
JavaScript中发布/订阅模式的简单实例
Nov 05 Javascript
node.js中的fs.unlink方法使用说明
Dec 15 Javascript
jsonp跨域请求数据实现手机号码查询实例分析
Dec 12 Javascript
javascript事件委托的用法及其好处简析
Apr 04 Javascript
JS递归遍历对象获得Value值方法技巧
Jun 14 Javascript
基于jQuery实现数字滚动效果
Jan 16 Javascript
JavaScript正则表达式简单实用实例
Jun 23 Javascript
详解Vue SSR( Vue2 + Koa2 + Webpack4)配置指南
Nov 13 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绘图中显示不出图片的原因及解决
2014/03/05 PHP
PHP把数字转成人民币大写的函数分享
2014/06/30 PHP
Yii2单元测试用法示例
2016/11/12 PHP
Laravel中Facade的加载过程与原理详解
2017/09/22 PHP
在 Laravel 中 “规范” 的开发短信验证码发送功能
2017/10/26 PHP
网站如何做到完全不需要jQuery也可以满足简单需求
2013/06/27 Javascript
用JavaScript实现类似于ListBox功能示例代码
2014/03/09 Javascript
一看就懂:jsonp详解
2015/06/01 Javascript
jquery实现图片预加载
2015/12/25 Javascript
关于JSON与JSONP简单总结
2016/08/16 Javascript
Vuejs第八篇之Vuejs组件的定义实例解析
2016/09/05 Javascript
Bootstrap CSS组件之面包屑导航(breadcrumb)
2016/12/17 Javascript
jQuery插件DataTable使用方法详解(.Net平台)
2016/12/22 Javascript
js es6系列教程 - 新的类语法实战选项卡(详解)
2017/09/02 Javascript
详解10分钟学会vue滚动行为
2017/09/21 Javascript
javascript 缓冲运动框架的实现
2017/09/29 Javascript
JS实现的集合去重,交集,并集,差集功能示例
2018/03/13 Javascript
微信小程序实现左右联动的实战记录
2018/07/05 Javascript
JS中‘hello’与new String(‘hello’)引出的问题详解
2018/08/14 Javascript
微信小程序实现带缩略图轮播效果
2018/11/04 Javascript
[13:40]TI3青蛙君全程回顾 DOTA2我们为梦想再战
2013/09/13 DOTA
python正则表达式re模块详解
2014/06/25 Python
Python查找函数f(x)=0根的解决方法
2015/05/07 Python
Python实现线程池代码分享
2015/06/21 Python
对pandas中时间窗函数rolling的使用详解
2018/11/28 Python
使用python将微信image下.dat文件解密为.png的方法
2020/11/30 Python
python3中for循环踩过的坑记录
2020/12/14 Python
python opencv肤色检测的实现示例
2020/12/21 Python
斯凯奇新西兰官网:SKECHERS新西兰
2018/02/22 全球购物
匡威荷兰官方网站:Converse荷兰
2018/10/24 全球购物
什么是唯一索引
2015/07/05 面试题
娱乐节目策划方案
2014/06/10 职场文书
民主生活会对照检查材料范文
2014/10/01 职场文书
客房服务员岗位职责
2015/02/09 职场文书
酒会开场白大全
2015/06/01 职场文书
SpringDataJPA实体类关系映射配置方式
2021/12/06 Java/Android