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 相关文章推荐
google地图的路线实现代码
Aug 20 Javascript
JavaScript初学者应注意的七个细节小结
Jan 30 Javascript
javascript如何使用bind指定接收者
May 04 Javascript
jQuery中prependTo()方法用法实例
Jan 08 Javascript
JQUERY简单按钮轮换选中效果实现方法
May 07 Javascript
Summernote实现图片上传功能的简单方法
Jul 11 Javascript
一个极为简单的requirejs实现方法
Oct 20 Javascript
jQuery中可见性过滤器简单用法示例
Mar 31 jQuery
微信小程序环境下将文件上传到OSS的方法步骤
May 31 Javascript
Vue使用Clipboard.JS在h5页面中复制内容实例详解
Sep 03 Javascript
Javascript Web Worker使用过程解析
Mar 16 Javascript
JS typeof fn === 'function' &amp;&amp; fn()详解
Aug 22 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分页显示制作详细讲解
2006/12/05 PHP
php cache类代码(php数据缓存类)
2010/04/15 PHP
yii2中LinkPager增加总页数和总记录数的实例
2017/08/28 PHP
PHP实现二维数组(或多维数组)转换成一维数组的常见方法总结
2019/12/04 PHP
通过隐藏option实现select的联动效果
2009/11/10 Javascript
ext 列表页面关于多行查询的办法
2010/03/25 Javascript
JavaScript实现复制功能各浏览器支持情况实测
2013/07/18 Javascript
浅析Javascript使用include/require
2013/11/13 Javascript
js 跳出页面的frameset框架示例介绍
2013/12/23 Javascript
js显示当前日期时间和星期几
2015/10/22 Javascript
浅谈Nodejs应用主文件index.js
2016/08/28 NodeJs
jsTree事件和交互以及插件plugins详解
2017/08/29 Javascript
基于axios封装fetch方法及调用实例
2018/02/05 Javascript
小程序红包雨的实现示例
2019/02/19 Javascript
微信小程序获取用户信息并保存登录状态详解
2019/05/10 Javascript
layui中select,radio设置不生效的解决方法
2019/09/05 Javascript
jQuery三组基本动画与自定义动画操作实例总结
2020/05/09 jQuery
JS画布动态实现黑客帝国背景效果
2020/11/08 Javascript
[01:42:49]DOTA2-DPC中国联赛 正赛 iG vs PSG.LGD BO3 第一场 2月26日
2021/03/11 DOTA
Python实现大数据收集至excel的思路详解
2020/01/03 Python
python Plotly绘图工具的简单使用
2020/03/03 Python
利用Python裁切tiff图像且读取tiff,shp文件的实例
2020/03/10 Python
Python使用tkinter制作在线翻译软件
2021/02/22 Python
全球在线商店:BerryLook
2019/04/14 全球购物
波兰在线体育用品商店:Hop-Sport.pl
2019/07/23 全球购物
意大利一家专营包包和配饰的网上商店:Borse Last Minute
2019/08/26 全球购物
如何打开WebSphere远程debug
2014/10/10 面试题
什么是TCP/IP
2014/07/27 面试题
介绍一下Linux内核的排队自旋锁
2014/01/04 面试题
正规的求职信范文分享
2013/12/11 职场文书
办理退休介绍信
2014/01/09 职场文书
公司活动邀请函
2014/01/24 职场文书
弘扬雷锋精神活动演讲稿
2014/03/04 职场文书
我的小天地教学反思
2014/04/30 职场文书
教师竞聘上岗演讲稿
2014/09/03 职场文书
改作风抓落实促发展心得体会
2014/09/10 职场文书