简述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 $.ajax()取xml数据的小问题解决方法
Nov 20 Javascript
解析页面加载与js函数的执行 onload or ready
Dec 12 Javascript
JS将光标聚焦在文本最后的实现代码
Mar 28 Javascript
js变量提升深入理解
Sep 16 Javascript
javascript跨域请求包装函数与用法示例
Nov 03 Javascript
JQuery 进入页面默认给已赋值的复选框打钩
Mar 23 jQuery
认识less和webstrom的less配置方法
Aug 02 Javascript
Three.js利用性能插件stats实现性能监听的方法
Sep 25 Javascript
Vue的路由及路由钩子函数的实现
Jul 02 Javascript
使用axios请求接口,几种content-type的区别详解
Oct 29 Javascript
vue pages 多入口项目 + chainWebpack 全局引用缩写说明
Sep 21 Javascript
用javascript制作qq注册动态页面
Apr 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
全国FM电台频率大全 - 23 四川省
2020/03/11 无线电
PHP字符编码问题之GB2312 VS UTF-8解决方法
2011/06/23 PHP
PHP和Mysqlweb应用开发核心技术 第1部分 Php基础-3 代码组织和重用2
2011/07/03 PHP
支持中文的php加密解密类代码
2011/11/27 PHP
php自定义函数实现二维数组排序功能
2016/07/20 PHP
php基于协程实现异步的方法分析
2019/07/17 PHP
javascript Select标记中options操作方法集合
2008/10/22 Javascript
理解JavaScript的caller,callee,call,apply
2009/04/28 Javascript
jquery.ui.draggable中文文档
2009/11/24 Javascript
IE6图片加载的一个BUG解决方法
2010/07/13 Javascript
javascript 函数声明与函数表达式的区别介绍
2013/10/05 Javascript
函数式 JavaScript(一)简介
2014/07/07 Javascript
JS获取及设置TextArea或input文本框选择文本位置的方法
2015/03/24 Javascript
jQuery内容折叠效果插件用法实例分析(附demo源码)
2016/04/28 Javascript
jquery 将当前时间转换成yyyymmdd格式的实现方法
2016/06/01 Javascript
浅谈js基本数据类型和typeof
2016/08/09 Javascript
JS实现的相册图片左右滚动完整实例
2016/11/23 Javascript
分享bootstrap学习笔记心得(组件及其属性)
2017/01/11 Javascript
js字符串与Unicode编码互相转换
2017/05/17 Javascript
详解vue服务端渲染(SSR)初探
2017/06/19 Javascript
jquery获取select选中值的文本,并赋值给另一个输入框的方法
2018/08/21 jQuery
微信小程序wxml列表渲染原理解析
2019/11/27 Javascript
对于Python异常处理慎用“except:pass”建议
2015/04/02 Python
pandas 获取季度,月度,年度首尾日期的方法
2018/04/11 Python
Python的scikit-image模块实例讲解
2020/12/30 Python
css3实现书本翻页效果的示例代码
2021/03/08 HTML / CSS
Nisbets爱尔兰:英国最大的厨房和餐饮设备供应商
2019/01/26 全球购物
27个经典Linux面试题及答案,你知道几个?
2013/01/10 面试题
创建卫生先进单位实施方案
2014/03/10 职场文书
厨师长岗位职责范本
2014/08/25 职场文书
高一军训的心得体会
2014/09/01 职场文书
2014年四风个人对照检查及整改措施
2014/10/28 职场文书
上课说话检讨书500字
2014/11/01 职场文书
七年级地理教学计划
2015/01/22 职场文书
房产销售员2015年终工作总结
2015/10/22 职场文书
导游词之贵州百里杜鹃
2019/10/29 职场文书