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 相关文章推荐
jquery 页面全选框实践代码
Apr 02 Javascript
改变javascript函数内部this指针指向的三种方法
Apr 23 Javascript
js加入收藏夹代码(兼容ie/ff/op)
May 16 Javascript
JS获取iframe中longdesc属性的方法
Apr 01 Javascript
AngularJS实现与Java Web服务器交互操作示例【附demo源码下载】
Nov 02 Javascript
Angularjs中的验证input输入框只能输入数字和小数点的写法(推荐)
Aug 16 Javascript
使用socket.io实现简单聊天室案例
Jan 02 Javascript
微信小程序实现传参数的几种方法示例
Jan 10 Javascript
详解webpack运行Babel教程
Jun 13 Javascript
jQuery实现的导航条点击后高亮显示功能示例
Mar 04 jQuery
vue基础之事件v-onclick=&quot;函数&quot;用法示例
Mar 11 Javascript
用Angular实现一个扫雷的游戏示例
May 15 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+DBM的同学录程序(1)
2006/10/09 PHP
调整优化您的LAMP应用程序的5种简单方法
2011/06/26 PHP
php正则preg_replace_callback函数用法实例
2015/06/01 PHP
PHP读取XML格式文件的方法总结
2017/02/27 PHP
实现PHP中session存储及删除变量
2018/10/15 PHP
Laravel框架基于中间件实现禁止未登录用户访问页面功能示例
2019/01/17 PHP
jquery 得到当前页面高度和宽度的两个函数
2010/02/21 Javascript
网站导致浏览器崩溃的原因总结(多款浏览器) 推荐
2010/04/15 Javascript
JavaScript高级程序设计 错误处理与调试学习笔记
2011/09/10 Javascript
关于js内存泄露的一个好例子
2013/12/09 Javascript
JS实现将人民币金额转换为大写的示例代码
2014/02/13 Javascript
JS实现点击上移下移LI行数据的方法
2015/08/05 Javascript
Javarscript中模块(module)、加载(load)与捆绑(bundle)详解
2017/05/28 Javascript
Node解决简单重复问题系列之Excel内容的获取
2018/01/02 Javascript
关于echarts在节点显示动态数据及添加提示文本所遇到的问题
2018/04/20 Javascript
jQuery实现的电子时钟效果完整示例
2018/04/28 jQuery
layui的布局和表格的渲染以及动态生成表格的方法
2019/09/18 Javascript
vue插件--仿微信小程序showModel实现模态提示窗功能
2020/08/19 Javascript
Vue与React的区别和优势对比
2020/12/18 Vue.js
Python第三方库的安装方法总结
2016/06/06 Python
python读取二进制mnist实例详解
2017/05/31 Python
使用python获取csv文本的某行或某列数据的实例
2018/04/03 Python
Python程序暂停的正常处理方法
2019/11/07 Python
Python基于Socket实现简单聊天室
2020/02/17 Python
python使用requests库爬取拉勾网招聘信息的实现
2020/11/20 Python
CSS3实现3D翻书效果
2016/06/20 HTML / CSS
马德里著名的运动鞋商店:NOIRFONCE
2019/04/12 全球购物
澳大利亚手袋、珠宝和在线时尚精品店:The Way
2019/12/21 全球购物
后备干部培训方案
2014/05/22 职场文书
初中生庆国庆演讲稿范文2014
2014/09/25 职场文书
党的群众路线教育实践活动领导班子整改措施
2014/10/28 职场文书
放弃遗产继承公证书
2015/01/26 职场文书
同学会邀请函模板
2015/01/30 职场文书
安全承诺书格式范本
2015/04/28 职场文书
让世界充满爱观后感
2015/06/10 职场文书
2019年房屋委托租赁合同范本(通用版)!
2019/07/17 职场文书