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 相关文章推荐
js用图作提交按钮或超连接
Mar 26 Javascript
JavaScript获取页面上某个元素的代码
Mar 13 Javascript
php 中序列化和json使用介绍
Jul 08 Javascript
Jquery对数组的操作技巧整理
Mar 25 Javascript
java必学必会之static关键字
Dec 03 Javascript
基于 Node.js 实现前后端分离
Apr 23 Javascript
js验证框架实现代码分享
May 18 Javascript
JS判断来路是否是百度等搜索索引进行弹窗或自动跳转的实现代码
Oct 09 Javascript
vue制作加载更多功能的正确打开方式
Oct 12 Javascript
Vue-Cli 3.0 中配置高德地图的两种方式
Jun 19 Javascript
Vue封装的组件全局注册并引用
Jul 24 Javascript
JQuery获得内容和属性方法解析
May 30 jQuery
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 str_pad 函数使用详解
2009/01/13 PHP
使用ThinkPHP生成缩略图及显示
2017/04/27 PHP
thinkphp框架表单数组实现图片批量上传功能示例
2020/04/04 PHP
javascript中的new使用
2010/03/20 Javascript
Extjs中RowExpander控件的默认展开问题示例探讨
2014/01/24 Javascript
jquery实现的树形目录实例
2015/06/26 Javascript
js判断子窗体是否关闭的方法
2015/08/11 Javascript
js简单实现表单中点击按钮动态增加输入框数量的方法
2015/08/18 Javascript
利用jQuery来动态为属性添加或者删除属性的简单方法
2016/12/02 Javascript
bootstrap PrintThis打印插件使用详解
2017/02/20 Javascript
vue2导航根据路由传值,而改变导航内容的实例
2017/11/10 Javascript
jquery 获取索引值在一定范围的列表方法
2018/01/25 jQuery
vue项目中公用footer组件底部位置的适配问题
2018/05/10 Javascript
VUE简单的定时器实时刷新的实现方法
2019/01/20 Javascript
sortable+element 实现表格行拖拽的方法示例
2019/06/07 Javascript
React学习之JSX与react事件实例分析
2020/01/06 Javascript
javascript实现支付宝滑块验证码效果
2020/07/24 Javascript
[02:47]3.19DOTA2发布会 国服成长历程回顾
2014/03/25 DOTA
Python中使用Inotify监控文件实例
2015/02/14 Python
Python 中 list 的各项操作技巧
2017/04/13 Python
python中利用await关键字如何等待Future对象完成详解
2017/09/07 Python
实例讲解python中的协程
2018/10/08 Python
浅谈pandas筛选出表中满足另一个表所有条件的数据方法
2019/02/08 Python
python 求10个数的平均数实例
2019/12/16 Python
python发qq消息轰炸虐狗好友思路详解(完整代码)
2020/02/15 Python
如何把python项目部署到linux服务器
2020/08/26 Python
解锁canvas导出图片跨域的N种姿势小结
2019/01/24 HTML / CSS
酒吧创业计划书
2014/01/18 职场文书
教师师德师风自我剖析材料
2014/09/29 职场文书
学生会辞职信
2015/03/02 职场文书
二婚主持词
2015/06/30 职场文书
2019年最新感恩节祝福语(28句)
2019/11/27 职场文书
go设置多个GOPATH的方式
2021/05/05 Golang
浅谈Python 中的复数问题
2021/05/19 Python
SpringBoot集成Redis的思路详解
2021/10/16 Redis