简述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 相关文章推荐
借用Google的Javascript API Loader来加速你的网站
Jan 28 Javascript
JS动态添加option和删除option(附实例代码)
Apr 01 Javascript
jquery进行数组遍历如何跳出当前的each循环
Jun 05 Javascript
干货分享:让你分分钟学会javascript闭包
Dec 25 Javascript
面试常见的js算法题
Mar 23 Javascript
JS通过调用微信API实现微信支付功能的方法示例
Jun 29 Javascript
浅谈js中的this问题
Aug 31 Javascript
Angular实现表单验证功能
Nov 13 Javascript
在vue项目中使用Nprogress.js进度条的方法
Jan 31 Javascript
Vue组件中prop属性使用说明实例代码详解
May 31 Javascript
elementui之el-tebs浏览器卡死的问题和使用报错未注册问题
Jul 06 Javascript
Vue路由模块化配置的完整步骤
Aug 14 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
自己动手,丰衣足食 - 短波框形天线制作
2021/03/01 无线电
php通过文件头检测文件类型通用代码类(zip,rar等)
2010/10/19 PHP
Yii PHP Framework实用入门教程(详细介绍)
2013/06/18 PHP
PHP中ini_set与ini_get用法实例
2014/11/04 PHP
php验证手机号码
2015/11/11 PHP
获取DOM对象的几种扩展及简写
2006/10/09 Javascript
JavaScript 学习笔记(十五)
2010/01/28 Javascript
jquery在ie7下选择器的问题导致append失效的解决方法
2016/01/10 Javascript
倾力总结40条常见的移动端Web页面问题解决方案
2016/05/24 Javascript
JavaScript动态添加css样式和script标签
2016/07/19 Javascript
jquery 动态合并单元格的实现方法
2016/08/26 Javascript
JavaScript求一组数的最小公倍数和最大公约数常用算法详解【面向对象,回归迭代和循环】
2018/05/07 Javascript
微信小程序第三方框架对比 之 wepy / mpvue / taro
2019/04/10 Javascript
HTML+JavaScript实现扫雷小游戏
2019/09/30 Javascript
node.js实现http服务器与浏览器之间的内容缓存操作示例
2020/02/11 Javascript
探索浏览器页面关闭window.close()的使用详解
2020/08/21 Javascript
Python 字典dict使用介绍
2014/11/30 Python
python对象及面向对象技术详解
2016/07/19 Python
Python打印输出数组中全部元素
2018/03/13 Python
Python3读取Excel数据存入MySQL的方法
2018/05/04 Python
Python 中导入csv数据的三种方法
2018/11/01 Python
selenium+python自动化测试之鼠标和键盘事件
2019/01/23 Python
Python检查ping终端的方法
2019/01/26 Python
Python 70行代码实现简单算式计算器解析
2019/08/30 Python
美国著名的品牌折扣店:Burlington
2017/06/08 全球购物
Bench加拿大官方网站:英国城市服装品牌
2017/11/03 全球购物
Ruby中的保护方法和私有方法与一般面向对象程序设计语言的一样吗
2013/05/01 面试题
材料加工工程求职信
2014/02/19 职场文书
音乐教学随笔感言
2014/02/19 职场文书
党员群众路线对照检查材料思想汇报
2014/09/17 职场文书
人事行政主管岗位职责
2015/04/09 职场文书
小学教师暑期培训心得体会
2016/01/09 职场文书
八年级历史教学反思
2016/02/19 职场文书
Python实现随机生成迷宫并自动寻路
2021/06/13 Python
MySQL的InnoDB存储引擎的数据页结构详解
2022/03/03 MySQL
CSS link与@import的区别和用法解析
2023/05/07 HTML / CSS