简述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 滑动与动画的说明介绍
Apr 18 Javascript
Node.js中安全调用系统命令的方法(避免注入安全漏洞)
Dec 05 Javascript
Js中使用hasOwnProperty方法检索ajax响应对象的例子
Dec 08 Javascript
js事件处理程序跨浏览器解决方案
Mar 27 Javascript
静态页面html中跳转传值的JS处理技巧
Jun 22 Javascript
微信小程序 progress组件详解及实例代码
Oct 25 Javascript
Vue.js开发环境搭建
Nov 10 Javascript
JavaScript数据结构之数组的表示方法示例
Apr 12 Javascript
兼容浏览器的js事件绑定函数(详解)
May 09 Javascript
vue2.0.js的多级联动选择器实现方法
Feb 09 Javascript
Bootstrap模态对话框用法简单示例
Aug 31 Javascript
Canvas跟随鼠标炫彩小球的实现
Apr 11 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中文件下载功能实现超详细流程分析
2012/06/13 PHP
PHP 观察者模式的实现代码
2013/05/10 PHP
php生成二维码的几种方式整理及使用实例
2013/06/03 PHP
PHP url的pathinfo模式加载不同控制器的简单实现
2016/08/12 PHP
PHP设计模式之单例模式定义与用法分析
2019/03/26 PHP
jquery1.5.1中根据元素ID获取元素对象的代码
2011/04/02 Javascript
40个有创意的jQuery图片和内容滑动及弹出插件收藏集之三
2012/01/03 Javascript
深入理解JavaScript系列(21):S.O.L.I.D五大原则之接口隔离原则ISP详解
2015/03/05 Javascript
JS与jQuery实现隔行变色的方法
2016/09/09 Javascript
bootstrap实现每隔5秒自动轮播效果
2016/12/20 Javascript
jQuery布局组件EasyUI Layout使用方法详解
2017/02/28 Javascript
微信小程序实现锚点定位楼层跳跃的实例
2017/05/18 Javascript
关于JavaScript中forEach和each用法浅析
2017/07/27 Javascript
详解微信小程序与内嵌网页交互实现支付功能
2018/10/22 Javascript
Vue 实时监听窗口变化 windowresize的两种方法
2018/11/06 Javascript
详解Vue This$Store总结
2018/12/17 Javascript
JQuery判断radio单选框是否选中并获取值的方法
2019/01/17 jQuery
在Python中操作字典之setdefault()方法的使用
2015/05/21 Python
Python中的super()方法使用简介
2015/08/14 Python
python微信跳一跳系列之棋子定位像素遍历
2018/02/26 Python
解决tensorflow模型参数保存和加载的问题
2018/07/26 Python
python同步windows和linux文件
2019/08/29 Python
Tensorflow 模型转换 .pb convert to .lite实例
2020/02/12 Python
python logging 日志的级别调整方式
2020/02/21 Python
浅析python 字典嵌套
2020/09/29 Python
结合CSS3的布局新特征谈谈常见布局方法
2016/01/22 HTML / CSS
html5中如何将图片的绝对路径转换成文件对象
2018/01/11 HTML / CSS
苏格兰领先的多渠道鞋店:Begg Shoes
2019/10/22 全球购物
沃尔玛加拿大:Walmart.ca
2020/03/02 全球购物
入党积极分子自我鉴定
2014/02/18 职场文书
派出所班子党的群众路线对照检查材料思想汇报
2014/10/01 职场文书
建筑质检员岗位职责
2015/04/08 职场文书
2015年个人实习工作总结
2015/05/28 职场文书
总结Python常用的魔法方法
2021/05/25 Python
方法汇总:Python 安装第三方库常用
2022/04/26 Python
解决IIS7下无法绑定https主机的问题
2022/04/29 Servers