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 相关文章推荐
this和执行上下文实现代码
Jul 01 Javascript
JS设置网页图片vspace和hspace属性的方法
Apr 01 Javascript
javascript中innerText和innerHTML属性用法实例分析
May 13 Javascript
jquery SweetAlert插件实现响应式提示框
Aug 18 Javascript
js实现当前输入框高亮显示的方法
Aug 19 Javascript
JS跨域交互(jQuery+php)之jsonp使用心得
Jul 01 Javascript
Javascript操作dom对象之select全面解析
Apr 24 Javascript
JQuery 选择器、DOM节点操作练习实例
Sep 28 jQuery
微信小程序wx.request拦截器使用详解
Jul 09 Javascript
angular异步验证防抖踩坑实录
Dec 01 Javascript
vue项目或网页上实现文字转换成语音播放功能
Jun 09 Javascript
js实现盒子移动动画效果
Aug 09 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源代码
2006/10/09 PHP
PHP新手上路(二)
2006/10/09 PHP
配置支持SSI
2006/11/25 PHP
PHP使用内置函数file_put_contents写入文件及追加内容的方法
2015/12/07 PHP
js css样式操作代码(批量操作)
2009/10/09 Javascript
JavaScript 产生不重复的随机数三种实现思路
2012/12/13 Javascript
ScrollDown的基本操作示例
2013/06/09 Javascript
javascript随机将第一个dom中的图片添加到第二个div中示例
2013/10/08 Javascript
Javascript 多浏览器兼容总结(实战经验)
2013/10/30 Javascript
js禁止页面使用右键(简单示例代码)
2013/11/13 Javascript
jQuery插件jPaginate实现无刷新分页
2015/05/04 Javascript
浅析2种JavaScript继承方式
2015/12/04 Javascript
JavaScript操作select元素和option的实例代码
2016/01/29 Javascript
详解用函数式编程对JavaScript进行断舍离
2017/09/18 Javascript
探索Vue高阶组件的使用
2018/01/08 Javascript
vue项目中使用百度地图的方法
2018/06/08 Javascript
vue ssr 实现方式(学习笔记)
2019/01/18 Javascript
ES6基础之 Promise 对象用法实例详解
2019/08/22 Javascript
element-ui 文件上传修改文件名的方法示例
2019/11/05 Javascript
返回上一个url并刷新界面的js代码
2020/09/12 Javascript
Python函数式编程指南(一):函数式编程概述
2015/06/24 Python
Python有序字典简单实现方法示例
2017/09/28 Python
疯狂上涨的Python 开发者应从2.x还是3.x着手?
2017/11/16 Python
Zookeeper接口kazoo实例解析
2018/01/22 Python
TensorFlow模型保存和提取的方法
2018/03/08 Python
Python图像处理之图像的读取、显示与保存操作【测试可用】
2019/01/04 Python
python求最大值最小值方法总结
2019/06/25 Python
Django框架 querySet功能解析
2019/09/04 Python
python 爬取古诗文存入mysql数据库的方法
2020/01/08 Python
阿迪达斯荷兰官方网站:adidas荷兰
2018/03/16 全球购物
值类型与引用类型有什么不同?请举例说明?并分别列举几种相应的数据类型
2015/10/24 面试题
毕业生找工作的自我评价
2013/10/18 职场文书
初中家长意见
2015/06/03 职场文书
百万英镑观后感
2015/06/09 职场文书
2016年学校安全教育月活动总结
2016/04/06 职场文书
浅谈Redis位图(Bitmap)及Redis二进制中的问题
2021/07/15 Redis