简述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执行效率与性能提升方案
Dec 21 Javascript
JS生成随机字符串的多种方法
Jun 10 Javascript
jQuery实现的简单提示信息插件
Dec 08 Javascript
AngularJS 模块详解及简单实例
Jul 28 Javascript
Centos7 中 Node.js安装简单方法
Nov 02 Javascript
用Vue.js实现监听属性的变化
Nov 17 Javascript
div实现自适应高度的textarea实现angular双向绑定
Jan 08 Javascript
js事件冒泡与事件捕获详解
Feb 20 Javascript
ES6中新增的Object.assign()方法详解
Sep 22 Javascript
通过实例解析js简易模块加载器
Jun 17 Javascript
vue ssr+koa2构建服务端渲染的示例代码
Mar 23 Javascript
简单了解three.js 着色器材质
Aug 03 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下判断网址是否有效的代码
2011/10/08 PHP
隐性调用php程序的方法
2015/06/13 PHP
PHP批量生成图片缩略图的方法
2015/06/18 PHP
利用PHP实现开心消消乐的算法示例
2017/10/12 PHP
PHP操作MongoDB实现增删改查功能【附php7操作MongoDB方法】
2018/04/24 PHP
PHP安全之register_globals的on和off的区别
2020/07/23 PHP
JavaScript 对象模型 执行模型
2009/12/06 Javascript
基于jQuery试卷自动排版系统
2010/07/18 Javascript
JavaScript创建类/对象的几种方式概述及实例
2013/05/06 Javascript
在JavaScript中处理字符串之link()方法的使用
2015/06/08 Javascript
基于PHP和Mysql相结合使用jqGrid读取数据并显示
2015/12/02 Javascript
jquery遍历table的tr获取td的值实现方法
2016/05/19 Javascript
javascript事件处理模型实例说明
2016/05/31 Javascript
require.js中的define函数详解
2017/07/10 Javascript
封装一下vue中的axios示例代码详解
2020/02/16 Javascript
ES2020让代码更优美的运算符 (?.) (??)
2021/01/04 Javascript
Python中逗号的三种作用实例分析
2015/06/08 Python
详解Python设计模式编程中观察者模式与策略模式的运用
2016/03/02 Python
python时间日期函数与利用pandas进行时间序列处理详解
2018/03/13 Python
Python实现爬取百度贴吧帖子所有楼层图片的爬虫示例
2018/04/26 Python
Win8下python3.5.1安装教程
2020/07/29 Python
简单了解python关系(比较)运算符
2019/07/08 Python
python matplotlib包图像配色方案分享
2020/03/14 Python
Django实现将views.py中的数据传递到前端html页面,并展示
2020/03/16 Python
Python基于pillow库实现生成图片水印
2020/09/14 Python
如何在pycharm中安装第三方包
2020/10/27 Python
Python 中 sorted 如何自定义比较逻辑
2021/02/02 Python
一款恶搞头像特效的制作过程 利用css3和jquery
2014/11/21 HTML / CSS
Belstaff英国官方在线商店:Belstaff.co.uk
2021/02/09 全球购物
电大毕业自我鉴定
2014/02/03 职场文书
2014年大学生四年规划书范文
2014/04/03 职场文书
2014年百日安全生产活动总结
2014/05/04 职场文书
李开复演讲稿
2014/05/24 职场文书
法院反腐倡廉心得体会
2014/09/09 职场文书
2016年员工年度考核评语
2015/12/02 职场文书
SpringBoot使用ip2region获取地理位置信息的方法
2022/06/21 Java/Android