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 异步调用框架 (Part 5 - 链式实现)
Aug 04 Javascript
解析jQuery与其它js(Prototype)库兼容共存
Jul 04 Javascript
JS代码同步文本框内容的实例方法
Jul 12 Javascript
jquery foreach使用示例
Sep 12 Javascript
JS调用页面表格导出excel示例代码
Mar 18 Javascript
JS实现仿雅虎首页快捷登录入口及导航模块效果
Sep 19 Javascript
微信小程序 Template详解及简单实例
Jan 05 Javascript
轻松理解Javascript变量的相关问题
Jan 20 Javascript
React简单介绍
May 24 Javascript
JQuery EasyUI 结合ztrIee的后台页面开发实例
Sep 01 jQuery
Vue2 添加数据可视化支持的方法步骤
Jan 02 Javascript
layui中的switch开关实现方法
Sep 03 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框架的性能
2008/01/10 PHP
php定时删除文件夹下文件(清理缓存文件)
2013/01/23 PHP
php.ini修改php上传文件大小限制的方法详解
2013/06/17 PHP
php实现的获取网站备案信息查询代码(360)
2013/09/23 PHP
PHP中魔术变量__METHOD__与__FUNCTION__的区别
2014/09/29 PHP
详解PHP文件的自动加载(autoloading)
2018/02/04 PHP
CI框架附属类用法分析
2018/12/26 PHP
PHP笛卡尔积实现原理及代码实例
2020/12/09 PHP
use jscript with List Proxy Server Information
2007/06/11 Javascript
JavaScript和JQuery实用代码片段(一)
2010/04/07 Javascript
js弹窗代码 可以指定弹出间隔
2010/07/03 Javascript
jQuery结合Json提交数据到Webservice,并接收从Webservice返回的Json数据
2011/02/18 Javascript
6款经典实用的jQuery小插件及源码(对话框/提示工具等等)
2013/02/04 Javascript
Jquery事件的连接使用示例
2013/06/18 Javascript
form.submit()不能提交表单的错误原因及解决方法
2014/10/13 Javascript
详解Vue用axios发送post请求自动set cookie
2017/05/10 Javascript
深入浅析Vue.js计算属性和侦听器
2018/05/05 Javascript
JavaScript数组去重算法实例小结
2018/05/07 Javascript
layui实现鼠标移动到单元格上显示数据的方法
2019/09/11 Javascript
js校验开始时间和结束时间
2020/05/26 Javascript
利用webpack理解CommonJS和ES Modules的差异区别
2020/06/16 Javascript
[01:13]DOTA2群星解读国服召集令 一起说出回归的理由
2013/07/17 DOTA
python3获取当前文件的上一级目录实例
2018/04/26 Python
python对视频画框标记后保存的方法
2018/12/07 Python
Python进阶之自定义对象实现切片功能
2019/01/07 Python
Python学习笔记之函数的定义和作用域实例详解
2019/08/13 Python
pytorch实现Tensor变量之间的转换
2020/02/17 Python
Jmeter HTTPS接口测试证书导入过程图解
2020/07/22 Python
在HTML5中使用MathML数学公式的简单讲解
2016/02/19 HTML / CSS
限量版运动鞋和街头服饰:TheDrop
2020/09/06 全球购物
迟到检讨书800字
2014/01/13 职场文书
药剂专业自荐书
2014/06/20 职场文书
爱护公共设施标语
2014/06/24 职场文书
2015年收银工作总结范文
2015/04/01 职场文书
2015年林业工作总结
2015/05/14 职场文书
团队拓展训练心得体会
2016/01/12 职场文书