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 触发事件列表 比较不错
Sep 03 Javascript
图像替换新技术 状态域方法
Jan 28 Javascript
JavaScript DOM 学习第二章 编辑文本
Feb 19 Javascript
JS文本框默认值处理详解
Jul 10 Javascript
用jquery方法操作radio使其默认选项是否
Sep 10 Javascript
js自动查找select下拉的菜单并选择(示例代码)
Feb 26 Javascript
js正则表达式惰性匹配和贪婪匹配用法分析
Dec 26 Javascript
Bootstrap.css与layDate日期选择样式起冲突的解决办法
Apr 07 Javascript
Webpack打包css后z-index被重新计算的解决方法
Jun 18 Javascript
Angular使用Restful的增删改
Dec 28 Javascript
webpack 如何同时输出压缩和未压缩的文件的实现步骤
Jun 05 Javascript
JS+CSS实现动态时钟
Feb 19 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的无限分类实现想法~
2007/01/02 PHP
PHP新手用的Insert和Update语句构造类
2012/03/31 PHP
php实现mysql事务处理的方法
2014/12/25 PHP
php正则提取html图片(img)src地址与任意属性的方法
2017/02/08 PHP
最近项目写了一些js,水平有待提高
2009/01/31 Javascript
jquery ajax post提交数据乱码
2013/11/05 Javascript
jquery实现的鼠标拖动排序Li或Table
2014/05/04 Javascript
jQuery插件slider实现拖动滑块选取价格范围
2015/04/30 Javascript
理解JavaScript的变量的入门教程
2015/07/07 Javascript
JS实现字符串转日期并比较大小实例分析
2015/12/09 Javascript
Node.js开启Https的实践详解
2016/10/25 Javascript
bootstrap组件之导航组件使用方法
2017/01/19 Javascript
深入理解Vue.js源码之事件机制
2017/09/27 Javascript
vue+vuex+axios实现登录、注册页权限拦截
2018/03/09 Javascript
Javascript读写cookie的实例源码
2019/03/16 Javascript
js实现双色球效果
2020/08/02 Javascript
vue接口请求加密实例
2020/08/11 Javascript
js 函数性能比较方法
2020/08/24 Javascript
使用Python生成随机密码的示例分享
2016/02/18 Python
Flask实现跨域请求的处理方法
2018/09/27 Python
Django Sitemap 站点地图的实现方法
2019/04/29 Python
Python实现K折交叉验证法的方法步骤
2019/07/11 Python
python微信公众号开发简单流程实现
2020/03/09 Python
opencv 图像轮廓的实现示例
2020/07/08 Python
全球性的女装店:storets
2019/06/12 全球购物
说一下mysql, oracle等常见数据库的分页实现方案
2012/09/29 面试题
TCP/IP中的TCP和IP分别承担什么责任
2012/04/21 面试题
《一本男孩子必读的书》教学反思
2014/02/19 职场文书
大学生就业自我推荐信
2014/05/10 职场文书
物业消防安全责任书
2014/07/23 职场文书
感恩老师演讲稿400字
2014/08/28 职场文书
党的群众路线教育实践活动自我剖析材料
2014/10/08 职场文书
2014年高三班主任工作总结
2014/12/05 职场文书
2015年双拥工作总结
2015/04/08 职场文书
大学生暑假实习总结
2015/07/13 职场文书
2016大一新生军训感言
2015/12/08 职场文书