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给input和textarea设定ie中的focus
May 29 Javascript
jquery 最简单的属性菜单
Oct 08 Javascript
Jquery ajaxsubmit上传图片实现代码
Nov 04 Javascript
jquery如何通过name名称获取当前name的value值
Dec 20 Javascript
js+HTML5实现canvas多种颜色渐变效果的方法
Jun 05 Javascript
详细分析JavaScript函数定义
Jul 16 Javascript
js中最容易被忽视的事件问题大总结
May 15 Javascript
jQuery基于排序功能实现上移、下移的方法
Nov 26 Javascript
vue实现添加标签demo示例代码
Jan 21 Javascript
js实现登录框鼠标拖拽效果
Mar 09 Javascript
微信小程序 setData 对 data数据影响问题
Apr 18 Javascript
微信小程序实现上拉加载功能示例【加载更多数据/触底加载/点击加载更多数据】
May 29 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
利用递归把多维数组转为一维数组的函数
2006/10/09 PHP
php学习之数据类型之间的转换介绍
2011/06/09 PHP
PhpMyAdmin出现export.php Missing parameter: what /export_type错误解决方法
2012/08/09 PHP
PHP迭代器实现斐波纳契数列的函数
2013/11/12 PHP
Zend Framework实现自定义过滤器的方法
2016/12/09 PHP
PHP session垃圾回收机制实例分析
2019/06/28 PHP
JavaScript中的私有成员
2006/09/18 Javascript
利用JavaScript检测CPU使用率自己写的
2014/03/22 Javascript
一个实用的图片切换支持点击切换和自动轮播
2014/09/09 Javascript
js获取当前日期前七天的方法
2015/02/28 Javascript
JavaScript中神奇的call()方法
2015/03/12 Javascript
jQuery实现精美的多级下拉菜单特效
2015/03/14 Javascript
分享经典的JavaScript开发技巧
2015/11/21 Javascript
Json解析的方法小结
2016/06/22 Javascript
Javascript学习之谈谈JS的全局变量跟局部变量(推荐)
2016/08/28 Javascript
javascript轮播图算法
2016/10/21 Javascript
JS实现的相册图片左右滚动完整实例
2016/11/23 Javascript
javascript中BOM基础知识总结
2017/02/14 Javascript
ZeroClipboard.js使用一个flash复制多个文本框
2017/06/19 Javascript
解决node修改后需频繁手动重启的问题
2018/05/13 Javascript
vue 下列表侧滑操作实例代码详解
2018/07/24 Javascript
JS定义函数的几种常用方法小结
2019/05/23 Javascript
浅谈function(函数)中的动态参数
2017/04/30 Python
利用Python3分析sitemap.xml并抓取导出全站链接详解
2017/07/04 Python
如何在python字符串中输入纯粹的{}
2018/08/22 Python
解决在pycharm中显示额外的 figure 窗口问题
2019/01/15 Python
Python OpenCV中的numpy与图像类型转换操作
2020/12/11 Python
路易威登和香奈儿手袋:LuxeDH
2017/01/12 全球购物
美国受信赖的教育产品供应商:Nest Learning
2018/06/14 全球购物
用C语言实现文件读写操作
2013/10/27 面试题
中专毕业生的自我鉴定
2013/12/01 职场文书
营销计划书
2015/01/17 职场文书
治理商业贿赂工作总结
2015/08/10 职场文书
关于maven依赖 ${xxx.version}报错问题
2022/01/18 Java/Android
日元符号 ¥
2022/02/17 杂记
什么是Python装饰器?如何定义和使用?
2022/04/11 Python