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 相关文章推荐
Bookmarklet实现启动jQuery(模仿 云输入法)
Sep 15 Javascript
from 表单提交返回值用post或者是get方法实现
Aug 21 Javascript
js使下拉列表框可编辑不止是选择
Dec 12 Javascript
AngularJS基础 ng-repeat 指令简单示例
Aug 03 Javascript
node.js express安装及示例网站搭建方法(分享)
Aug 22 Javascript
Angular ng-repeat指令实例以及扩展部分
Dec 26 Javascript
BootStrap表单验证实例代码
Jan 13 Javascript
vue实现简单的星级评分组件源码
Nov 16 Javascript
JavaScript实现小球沿正弦曲线运动
Sep 07 Javascript
egg.js的基本使用和调用数据库的方法示例
May 18 Javascript
vue数据更新UI不刷新显示的解决办法
Aug 06 Javascript
Nuxt 嵌套路由nuxt-child组件用法(父子页面组件的传值)
Nov 05 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
解决文件名解压后乱码的问题 将文件名进行转码的代码
2012/01/10 PHP
PHP字符过滤函数去除字符串最后一个逗号(rtrim)
2013/03/26 PHP
解析关于java,php以及html的所有文件编码与乱码的处理方法汇总
2013/06/24 PHP
php如何实现只替换一次或N次
2015/10/29 PHP
js实现的网站首页随机公告随机公告
2007/03/14 Javascript
JavaScript聚焦于第一个字段的代码
2010/10/15 Javascript
浅谈javascript中自定义模版
2015/01/29 Javascript
JS实现仿腾讯微博无刷新删除微博效果代码
2015/10/16 Javascript
全面解析node 表单的图片上传
2016/11/21 Javascript
手机移动端实现 jquery和HTML5 Canvas的幸运大奖盘特效
2016/12/06 Javascript
Bootstrap整体框架之JavaScript插件架构
2016/12/15 Javascript
ajax图片上传,图片异步上传,更新实例
2016/12/30 Javascript
bootstrap中的 form表单属性role=&quot;form&quot;的作用详解
2017/01/20 Javascript
JQuery页面随滚动条动态加载效果的简单实现(推荐)
2017/02/08 Javascript
前端开发之CSS原理详解
2017/03/11 Javascript
微信小程序textarea层级过高(盖住其他元素)问题的解决办法
2019/03/04 Javascript
Vue v-text指令简单使用方法示例
2019/09/19 Javascript
原生javascript制作贪吃蛇小游戏的方法分析
2020/02/26 Javascript
vue滑动吸顶及锚点定位的示例代码
2020/05/10 Javascript
jquery.validate自定义验证用法实例分析【成功提示与择要提示】
2020/06/06 jQuery
一起深入理解js中的事件对象
2021/02/06 Javascript
sublime text 3配置使用python操作方法
2017/06/11 Python
浅谈利用numpy对矩阵进行归一化处理的方法
2018/07/11 Python
使用python实现滑动验证码功能
2019/08/05 Python
Django1.11自带分页器paginator的使用方法
2019/10/31 Python
使用matlab或python将txt文件转为excel表格
2019/11/01 Python
python字符串判断密码强弱
2020/03/18 Python
如何在Python 游戏中模拟引力
2020/03/27 Python
Python3操作读写CSV文件使用包过程解析
2020/04/10 Python
Django model.py表单设置默认值允许为空的操作
2020/05/19 Python
css3 column实现卡片瀑布流布局的示例代码
2018/06/22 HTML / CSS
美国男女折扣服饰百货连锁店:Stein Mart
2017/05/02 全球购物
匡威意大利官方商店 :Converse意大利
2018/11/27 全球购物
创先争优活动心得体会
2014/09/04 职场文书
免职证明样本
2014/10/23 职场文书
解决Vue+SpringBoot+Shiro跨域问题
2021/06/09 Vue.js