简述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 连接数据库如何操作数据库中的数据
Nov 23 Javascript
javascript history对象(历史记录)使用方法(实现浏览器前进后退)
Jan 07 Javascript
使用jquery实现以post打开新窗口
Mar 19 Javascript
如何在node的express中使用socket.io
Dec 15 Javascript
jquery中取消和绑定hover事件的实现代码
Jun 02 Javascript
JS实现类似百叶窗下拉菜单效果
Dec 30 Javascript
PHP实现本地图片上传和验证功能
Feb 27 Javascript
浅谈es6语法 (Proxy和Reflect的对比)
Oct 24 Javascript
jquery根据name取得select选中的值实例(超简单)
Jan 25 jQuery
centos 上快速搭建ghost博客方法分享
May 23 Javascript
使用vue-cli3新建一个项目并写好基本配置(推荐)
Apr 24 Javascript
简单了解JavaScript中的执行上下文和堆栈
Jun 24 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小技巧搜集,每个PHPer都来露一手
2007/01/02 PHP
PHP 年龄计算函数(精确到天)
2012/06/07 PHP
PHP实现时间比较和时间差计算的方法示例
2017/07/24 PHP
PHP实时统计中文字数和区别
2019/02/28 PHP
javascript 中对象的继承〔转贴〕
2007/01/22 Javascript
jquery实现页面图片等比例放大缩小功能
2014/02/12 Javascript
jQuery实现垂直半透明手风琴特效代码分享
2015/08/21 Javascript
JS组件系列之Bootstrap table表格组件神器【二、父子表和行列调序】
2016/05/10 Javascript
详解Vue.js——60分钟组件快速入门(上篇)
2016/12/05 Javascript
jquery编写日期选择器
2017/03/16 Javascript
js仿微信公众平台打标签功能
2017/04/08 Javascript
Vue-cli中为单独页面设置背景色的实现方法
2018/02/11 Javascript
select获取下拉框的值 下拉框默认选中方法
2018/02/28 Javascript
vue使用jsonp抓取qq音乐数据的方法
2018/06/21 Javascript
JS实现的input选择图片本地预览功能示例
2018/08/29 Javascript
vue基于v-charts封装双向条形图的实现代码
2019/12/09 Javascript
通过实例了解Nodejs模块系统及require机制
2020/07/16 NodeJs
[48:21]Mski vs VGJ.S Supermajor小组赛C组 BO3 第一场 6.3
2018/06/04 DOTA
[01:10:30]DOTA2-DPC中国联赛正赛 Dragon vs Dynasty BO3 第一场 3月4日
2021/03/11 DOTA
Python下Fabric的简单部署方法
2015/07/14 Python
简单谈谈python中的语句和语法
2017/08/10 Python
深入理解Python中的*重复运算符
2017/10/28 Python
如何安装多版本python python2和python3共存以及pip共存
2018/09/18 Python
使用python绘制二元函数图像的实例
2019/02/12 Python
Python学习笔记之视频人脸检测识别实例教程
2019/03/06 Python
python处理“
2019/06/10 Python
浅谈pytorch、cuda、python的版本对齐问题
2020/01/15 Python
python opencv 实现读取、显示、写入图像的方法
2020/06/08 Python
Pytorch - TORCH.NN.INIT 参数初始化的操作
2021/02/27 Python
德国PC硬件网站:CASEKING
2016/10/20 全球购物
施华洛世奇波兰官网:SWAROVSKI波兰
2019/06/18 全球购物
汇科协同Java笔试题
2012/03/31 面试题
五一活动标语
2014/06/30 职场文书
民主评议党员工作总结
2014/10/20 职场文书
倡议书怎么写?
2019/04/11 职场文书
嵌入式Redis服务器在Spring Boot测试中的使用教程
2021/07/21 Redis