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 URL锚点取值方法
Feb 25 Javascript
基于JQuery的Pager分页器实现代码
Jul 17 Javascript
基于jquery实现的文字淡入淡出效果
Nov 14 Javascript
form.submit()不能提交表单的错误原因及解决方法
Oct 13 Javascript
JavaScript字符串对象replace方法实例(用于字符串替换或正则替换)
Oct 16 Javascript
深入解析jQuery中Deferred的deferred.promise()方法
May 03 Javascript
js中使用使用原型(prototype)定义方法的好处详解
Jul 04 Javascript
不间断循环滚动效果的实例代码(必看篇)
Oct 08 Javascript
原生javascript移动端滑动banner效果
Mar 10 Javascript
Javascript实现跨域后台设置拦截的方法详解
Aug 04 Javascript
微信小程序提交form操作示例
Dec 30 Javascript
vue 实现小程序或商品秒杀倒计时
Apr 14 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实现将GB编码转换为UTF8
2006/11/25 PHP
php实现从ftp服务器上下载文件树到本地电脑的程序
2009/02/10 PHP
PHP依赖倒置(Dependency Injection)代码实例
2014/10/11 PHP
Yii2创建控制器(createController)方法详解
2016/07/23 PHP
通过php动态传数据到highcharts
2017/04/05 PHP
使用onbeforeunload属性后的副作用
2007/03/08 Javascript
Dojo 学习笔记入门篇 First Dojo Example
2009/11/15 Javascript
JavaScript对象链式操作代码(jquery)
2010/07/04 Javascript
JS中Iframe之间传值及子页面与父页面应用
2013/03/11 Javascript
js获取或设置当前窗口url参数的小例子
2013/10/14 Javascript
javascript loadScript异步加载脚本示例讲解
2013/11/14 Javascript
js函数名与form表单元素同名冲突的问题
2014/03/07 Javascript
简单实现兼容各大浏览器的js复制内容到剪切板
2015/09/09 Javascript
javascript动画之模拟拖拽效果篇
2016/09/26 Javascript
JS重载实现方法分析
2016/12/16 Javascript
微信小程序 常用工具类详解及实例
2017/02/15 Javascript
微信小程序媒体组件详解(视频,音乐,图片)
2017/09/19 Javascript
详解基于vue的服务端渲染框架NUXT
2018/06/20 Javascript
微信小程序实现通过双向滑动缩放图片大小的方法
2018/12/30 Javascript
vue实现移动端触屏拖拽功能
2020/08/21 Javascript
[02:58]献给西雅图的情书_高清
2014/05/29 DOTA
python中黄金分割法实现方法
2015/05/06 Python
Python字符串逆序的实现方法【一题多解】
2019/02/18 Python
利用django+wechat-python-sdk 创建微信服务器接入的方法
2019/02/20 Python
PyQt 实现使窗口中的元素跟随窗口大小的变化而变化
2019/06/18 Python
TensorFlow梯度求解tf.gradients实例
2020/02/04 Python
vue学习笔记之动态组件和v-once指令简单示例
2020/02/29 Python
opencv python在视屏上截图功能的实现
2020/03/05 Python
python 数据分析实现长宽格式的转换
2020/05/18 Python
python list等分并从等分的子集中随机选取一个数
2020/11/16 Python
CSS3弹性盒模型flex box快速入门心得(必看篇)
2016/05/24 HTML / CSS
趣天网日本站:Qoo10 JP
2019/09/18 全球购物
计算机应用专业应届毕业生中文求职信范文
2013/11/29 职场文书
社区学雷锋活动策划方案
2014/01/30 职场文书
函授自我鉴定范文
2014/02/06 职场文书
会议主持词
2014/03/17 职场文书