简述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处理DOM元素事件实现代码
May 23 Javascript
jQuery扁平化风格下拉框美化插件FancySelect使用指南
Feb 10 Javascript
在JavaScript的AngularJS库中进行单元测试的方法
Jun 23 Javascript
谈谈PHP中相对路径的问题与绝对路径的使用
Aug 16 Javascript
jQuery使用正则表达式替换dom元素标签用法示例
Jan 16 Javascript
详解angular element()方法使用
Apr 08 Javascript
详解webpack-dev-server 设置反向代理解决跨域问题
Apr 18 Javascript
小程序实现订单倒计时功能
Apr 23 Javascript
redux.js详解及基本使用
May 24 Javascript
jQuery位置选择器用法实例分析
Jun 28 jQuery
使用vue中的混入mixin优化表单验证插件问题
Jul 02 Javascript
layer弹出层显示在top顶层的方法
Sep 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实现的生成静态HTML速度快类库
2007/03/31 PHP
PHP操作数组相关函数
2011/02/03 PHP
php操作SVN版本服务器类代码
2011/11/27 PHP
PHP基础陷阱题(变量赋值)
2012/09/12 PHP
php源码分析之DZX1.5字符串截断函数cutstr用法
2015/06/17 PHP
php实现当前页面点击下载文件的简单方法
2016/09/22 PHP
Laravel框架实现修改登录和注册接口数据返回格式的方法
2018/08/17 PHP
Laravel第三方包报class not found的解决方法
2019/10/13 PHP
用Javascript数组处理多个字符串的连接问题
2009/08/20 Javascript
用Mootools获得操作索引的两种方法分享
2011/12/12 Javascript
吐槽一下我所了解的Node.js
2014/10/08 Javascript
javascript检测flash插件是否被禁用的方法
2016/01/14 Javascript
jQuery简单创建节点的方法
2016/09/09 Javascript
node.js平台下利用cookie实现记住密码登陆(Express+Ejs+Mysql)
2017/04/26 Javascript
javascript实现最长公共子序列实例代码
2018/02/05 Javascript
解决vue-router进行build无法正常显示路由页面的问题
2018/03/06 Javascript
vue内置指令详解
2018/04/03 Javascript
vue init webpack 建vue项目报错的解决方法
2018/09/29 Javascript
vue中实现点击按钮滚动到页面对应位置的方法(使用c3平滑属性实现)
2019/12/29 Javascript
[00:55]2015国际邀请赛中国区预选赛5月23日——28日约战上海
2015/05/25 DOTA
[05:06]DOTA2-DPC中国联赛 正赛 VG vs Magma选手采访
2021/03/11 DOTA
python使用urllib模块开发的多线程豆瓣小站mp3下载器
2014/01/16 Python
python用pickle模块实现“增删改查”的简易功能
2017/06/07 Python
Python操作redis实例小结【String、Hash、List、Set等】
2019/05/16 Python
Python生成验证码、计算具体日期是一年中的第几天实例代码详解
2019/10/16 Python
英国潮流网站:END.(全球免邮)
2017/01/16 全球购物
比利时买床:Beter Bed
2017/12/06 全球购物
Europcar比利时:租车
2019/08/26 全球购物
eHarmony英国:全球领先的认真恋爱约会平台之一
2020/11/16 全球购物
活动倡议书范文
2014/05/13 职场文书
政府法律服务方案
2014/06/14 职场文书
爱护公共设施标语
2014/06/24 职场文书
学雷锋团日活动总结
2015/05/06 职场文书
音乐会主持人开场白
2015/05/28 职场文书
Vue+Element UI实现概要小弹窗的全过程
2021/05/30 Vue.js
《吸血鬼:避世 血猎》官宣4.27发售 系列首款大逃杀
2022/04/03 其他游戏