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的网站幻灯片切换效果焦点图代码
Sep 15 Javascript
jquery自动填充勾选框即把勾选框打上true
Mar 24 Javascript
一个jquery实现的不错的多行文字图片滚动效果
Sep 28 Javascript
Javascript中For In语句用法实例
May 14 Javascript
Javascript 计算字符串在localStorage中所占字节数
Oct 21 Javascript
vue-router 学习快速入门
Mar 01 Javascript
基于Datatables跳转到指定页的简单实例
Nov 09 Javascript
Angular 组件之间的交互的示例代码
Mar 24 Javascript
jQuery序列化form表单数据为JSON对象的实现方法
Sep 20 jQuery
vue + element-ui的分页问题实现
Dec 17 Javascript
详解vuex的简单todolist例子
Jul 14 Javascript
vue keep-alive 动态删除组件缓存的例子
Nov 04 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
Search File Contents PHP 搜索目录文本内容的代码
2010/02/21 PHP
PHP stream_context_create()作用和用法分析
2011/03/29 PHP
php投票系统之增加与删除投票(管理员篇)
2016/07/01 PHP
javascript 常用关键字列表集合
2007/12/04 Javascript
在次封装easyui-Dialog插件实现代码
2010/11/14 Javascript
js日期相关函数总结分享
2013/10/15 Javascript
使用命令对象代替switch语句的写法示例
2015/02/28 Javascript
js实现iGoogleDivDrag模块拖动层拖动特效的方法
2015/03/04 Javascript
原生JS实现LOADING效果
2015/03/16 Javascript
BOM系列第三篇之定时器应用(时钟、倒计时、秒表和闹钟)
2016/08/17 Javascript
JavaScript实现经典排序算法之冒泡排序
2016/12/28 Javascript
bootstrap suggest搜索建议插件使用详解
2017/03/25 Javascript
vue基于Vue2.0和高德地图的地图组件实例
2017/04/28 Javascript
总结js中的一些兼容性易错的问题
2017/12/18 Javascript
微信小程序获取用户openid的实现
2018/12/24 Javascript
gulp构建小程序的方法步骤
2019/05/31 Javascript
vue+webpack 更换主题N种方案优劣分析
2019/10/28 Javascript
webpack proxy 使用(代理的使用)
2020/01/10 Javascript
Cpy和Python的效率对比
2015/03/20 Python
Python加pyGame实现的简单拼图游戏实例
2015/05/15 Python
基于wxpython开发的简单gui计算器实例
2015/05/30 Python
Python 利用pydub库操作音频文件的方法
2019/01/09 Python
django 信号调度机制详解
2019/07/19 Python
关于PyTorch 自动求导机制详解
2019/08/18 Python
使用python写一个自动浏览文章的脚本实例
2019/12/05 Python
Python生成器常见问题及解决方案
2020/03/21 Python
Python爬虫获取豆瓣电影并写入excel
2020/07/31 Python
米兰必去买手店排行榜首位:Antonioli
2016/09/11 全球购物
.NET常见笔试题集
2012/12/01 面试题
军校本科大学生自我评价
2014/01/14 职场文书
幼儿园开学家长寄语
2014/01/19 职场文书
小学教师师德承诺书
2014/05/23 职场文书
应届毕业生求职信范文
2014/07/07 职场文书
房地产销售主管岗位职责
2015/02/13 职场文书
遗失说明具结保证书
2015/02/26 职场文书
请学会珍惜眼前,因为人生没有下辈子!
2019/11/12 职场文书