jQuery学习笔记之DOM对象和jQuery对象


Posted in Javascript onDecember 22, 2010

什么是DOM对象?

HTML是以树形结构来组织文档的,具体如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>1-4</title> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<!-- 引入 jQuery --> 
<script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script> 
<script type="text/javascript"> 
//等待dom元素加载完毕. 
$(document).ready(function(){ 
var domObj = document.getElementsByTagName("h3")[0]; // Dom对象 
var $jQueryObj = $(domObj); //jQuery对象 
alert("DOM对象:"+domObj.innerHTML); 
alert("jQuery对象:"+$jQueryObj.html()); 
}); 
</script> 
</head> 
<body> 
<h3>例子</h3> 
<p title="选择你最喜欢的水果." >你最喜欢的水果是?</p> 
<ul> 
<li>苹果</li> 
<li>橘子</li> 
<li>菠萝</li> 
</ul> 
</body> 
</html>

上面的HTML文件的DOM树如下:

jQuery学习笔记之DOM对象和jQuery对象

什么是jQuery对象?

jQuery对象就是经过jQuery包装过的DOM对象,如下:

$(domObj) 相当于 document.getElementsByTagName("h3")
$("#ID") 相当于 document.getElementsById("ID")

jQuery对象和DOM对象的转换?

1.获取对象:

获取jQuery对象:var $variable=jQuery对象;
获取DOM对象:var variable=DOM对象;
2.jQuery对象转DOM对象:

利用数组转换 var cr=$("#cr")[0];
利用get(index)方法转换 var cr=$("#cr").get(0);
3.DOM对象转jQuery对象:
var cr=document.getElementsById("cr"); //获取DOM对象
var $cr=$(cr);//转换为jQuery对象

Javascript 相关文章推荐
JavaScript中的常见问题解决方法(乱码,IE缓存,代理)
Nov 28 Javascript
javascript模拟枚举的简单实例
Mar 06 Javascript
JavaScript实现找出数组中最长的连续数字序列
Sep 03 Javascript
jQuery获取iframe的document对象的方法
Oct 10 Javascript
基于jquery的手风琴图片展示效果实现方法
Dec 16 Javascript
html5+CSS 实现禁止IOS长按复制粘贴功能
Dec 28 Javascript
js中创建对象的几种方式
Feb 05 Javascript
详解vue2.0 transition 多个元素嵌套使用过渡
Jun 19 Javascript
微信小程序如何访问公众号文章
Jul 08 Javascript
Vue 权限控制的两种方法(路由验证)
Aug 16 Javascript
详细分析Node.js 模块系统
Jun 28 Javascript
Openlayers绘制地图标注
Sep 28 Javascript
jQuery学习笔记之Helloworld
Dec 22 #Javascript
用Jquery实现多级下拉框无刷新的联动
Dec 22 #Javascript
一个轻量级的javascript库 pj介绍
Dec 19 #Javascript
JavaScript Date对象 日期获取函数
Dec 19 #Javascript
jQuery UI Datepicker length为空或不是对象错误的解决方法
Dec 19 #Javascript
jQuery UI Dialog控件中的表单无法正常提交的解决方法
Dec 19 #Javascript
超酷的网页音乐播放器DewPlayer使用方法
Dec 18 #Javascript
You might like
PHP下通过QRCode类库创建中间带网站LOGO的二维码
2014/07/12 PHP
RSA实现JS前端加密与PHP后端解密功能示例
2019/08/05 PHP
Yii框架通过请求组件处理get,post请求的方法分析
2019/09/03 PHP
jquery.ui.progressbar 中文文档
2009/11/26 Javascript
jQuery之过滤元素操作小结
2013/11/30 Javascript
js 异步操作回调函数如何控制执行顺序
2013/12/24 Javascript
浏览器中url存储的JavaScript实现
2015/07/07 Javascript
详解JavaScript的流程控制语句
2015/11/30 Javascript
jquery插件jquery.LightBox.js实现点击放大图片并左右点击切换效果(附demo源码下载)
2016/02/25 Javascript
谈谈JavaScript的New关键字
2016/08/26 Javascript
[原创]JS基于FileSaver.js插件实现文件保存功能示例
2016/12/08 Javascript
微信小程序 特效菜单抽屉效果实例代码
2017/01/11 Javascript
jquery.cookie.js的介绍与使用方法
2017/02/09 Javascript
从零开始学习Node.js系列教程之SQLite3和MongoDB用法分析
2017/04/13 Javascript
AngularJS自定义指令之复制指令实现方法
2017/05/18 Javascript
关于在vue-cli中使用微信自动登录和分享的实例
2017/06/22 Javascript
利用yarn代替npm管理前端项目模块依赖的方法详解
2017/09/04 Javascript
详解如何使用babel进行es6文件的编译
2018/05/29 Javascript
详解webpack打包nodejs项目(前端代码)
2018/09/19 NodeJs
vue实现pdf导出解决生成canvas模糊等问题(推荐)
2018/10/18 Javascript
React Native登录之指纹登录篇的示例代码
2020/11/03 Javascript
如何使用原生Js实现随机点名详解
2021/01/06 Javascript
vue编写简单的购物车功能
2021/01/08 Vue.js
Python文本处理之按行处理大文件的方法
2018/04/09 Python
python去掉 unicode 字符串前面的u方法
2018/10/21 Python
pd.DataFrame统计各列数值多少的实例
2019/12/05 Python
Spy++的使用方法及下载教程
2021/01/29 Python
Omio中国:全欧洲低价大巴、火车和航班搜索和比价
2018/08/09 全球购物
信息工程学院毕业生推荐信
2013/11/05 职场文书
医学检验专业个人求职信范文
2013/12/04 职场文书
派出所所长先进事迹
2014/05/19 职场文书
年终考核实施方案
2014/05/26 职场文书
测控技术自荐信
2014/06/05 职场文书
2014年科室工作总结
2014/11/20 职场文书
挂职锻炼个人总结
2015/03/05 职场文书
2016年“我们的节日·中秋节”活动总结
2016/04/05 职场文书