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 相关文章推荐
比较简单实用的使用正则三种版本的js去空格处理方法
Nov 18 Javascript
基于jquery的15款幻灯片插件
Apr 10 Javascript
JavaScript入门之基本函数详解
Oct 21 Javascript
window.onload追加函数使用示例
Mar 03 Javascript
基于javascript、ajax、memcache和PHP实现的简易在线聊天室
Feb 03 Javascript
浅谈Javascript数组的使用
Jul 29 Javascript
Angularjs手动解析表达式($parse)
Oct 12 Javascript
VUE实现表单元素双向绑定(总结)
Aug 08 Javascript
JS基于对象的特性实现去除数组中重复项功能详解
Nov 17 Javascript
详解使用element-ui table组件的筛选功能的一个小坑
Nov 02 Javascript
element-ui tree结构实现增删改自定义功能代码
Aug 31 Javascript
Vue实现手机号、验证码登录(60s禁用倒计时)
Dec 19 Vue.js
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
在IIS下安装PHP扩展的方法(超简单)
2017/04/10 PHP
PHP+fiddler抓包采集微信文章阅读数点赞数的思路详解
2019/12/20 PHP
JScript中的&quot;this&quot;关键字使用方式补充材料
2007/03/08 Javascript
javascript 获取select下拉列表值的代码
2009/09/07 Javascript
jquery.ui.progressbar 中文文档
2009/11/26 Javascript
关于 文本框默认值 的操作js代码
2012/01/12 Javascript
javascript中onclick(this)用法介绍
2013/04/19 Javascript
JavaScript获取Url里的参数
2014/12/18 Javascript
jquery动态改变div宽度和高度
2015/02/09 Javascript
javascript如何实现360度全景照片问题汇总
2016/04/04 Javascript
jquery显示隐藏元素的实现代码
2016/05/19 Javascript
AngularJS基础 ng-if 指令用法
2016/08/01 Javascript
jQuery实现智能判断固定导航条或侧边栏的方法
2016/09/04 Javascript
angularJS利用ng-repeat遍历二维数组的实例代码
2017/06/03 Javascript
Vue ElementUI之Form表单验证遇到的问题
2017/08/21 Javascript
nodejs更改项目端口号的方法
2018/05/13 NodeJs
karma+webpack搭建vue单元测试环境的方法示例
2018/05/24 Javascript
vue加载完成后的回调函数方法
2018/09/07 Javascript
ES5和ES6中类的区别总结
2020/12/21 Javascript
python实现批量下载新浪博客的方法
2015/06/15 Python
python实现下载指定网址所有图片的方法
2015/08/08 Python
python3实现ftp服务功能(客户端)
2017/03/24 Python
python爬虫之百度API调用方法
2017/06/11 Python
python3 爬取图片的实例代码
2018/11/06 Python
Flask使用Pyecharts在单个页面展示多个图表的方法
2019/08/05 Python
python虚拟环境的安装和配置(virtualenv,virtualenvwrapper)
2019/08/09 Python
Python通过Schema实现数据验证方式
2020/11/12 Python
HTML5中canvas中的beginPath()和closePath()的重要性
2018/08/24 HTML / CSS
美国性感内衣店:Yandy
2018/06/12 全球购物
乌克兰第一的珠宝网上商店:Gold.ua
2019/11/29 全球购物
盛大笔试题
2016/11/05 面试题
2014优秀党员事迹材料
2014/08/14 职场文书
商品陈列协议书
2014/09/29 职场文书
依法行政工作汇报
2014/10/28 职场文书
详解Java分布式事务的 6 种解决方案
2021/06/26 Java/Android
使用MybatisPlus打印sql语句
2022/04/22 SQL Server