jQuery开发基础教程第2章 初识jQuery.pptVIP

2.3 jQuery对象和DOM对象 2.3.1 jQuery对象和DOM对象简 2.3.2 jQuery对象和DOM对象的相互转换 1．DOM对象 DOM是Document Object Model,即文档对象模型的缩写。DOM是以层次结构组织的节点或信息片段的集合，每一份DOM都可以表示成一棵树。下面构建一个基本的网页，网页代码如下： html head titleDOM对象/title /head body h2明日图书/h2 p《JavaScript从入门到精通》/p /body /html 网页的初始化效果如图2-7所示。 2.3.1 jQuery对象和DOM对象简介 图 2-7 一个非常基本的网页 可以把上面的HTML结构描述为一棵DOM树，如图2-8所示。 图 2-8 把网页元素表示为DOM树 在这棵DOM树中，h2、p节点都是DOM元素的节点，可以使用JavaScript中的getElementById或getElementByTagName来获取，得到的元素就是DOM对象。DOM对象可以使用JavaScript中的方法。例如： var domObject = document.getElementById(id); var html = domObject.innerHTML; 2．jQuery对象 jQuery对象就是通过jQuery包装DOM对象后产生的对象。jQuery对象是独有的，可以使用jQuery里的方法。例如： $(#test).html(); // 获取id为test的元素内的html代码 这段代码等同于： document.getElementById(test).innerHTML; 虽然jQuery对象是包装DOM对象后产生的，但是jQuery无法使用DOM对象的任何方法，同理DOM对象也不能使用jQuery里面的方法。比如： $(“#test”).innerHTML 、document.getElementById(test).html()之类的写法都是错误的。 注意：用#id作为选择符取得的是jQuery对象，而使用document.getElementsById(id)得到的是DOM对象，这两者并不是等价的。 既然jQuery对象和DOM对象有区别也有联系，那么jQuery对象与DOM对象也可以相互转换。在两者转换之前首先约定好定义变量的风格。如果获取的是jQuery对象，那么我们在变量前面加上$，例如： var $obj = jQuery对象; 如果获取的是DOM对象，则与我们平时习惯的表示方法一样： var obj = DOM对象; 1．jQuery对象转换成DOM对象 jQuery提供了两种转换方式将一个jQuery对象转换成DOM对象：[index]和get(index)。 （1）jQuery对象是一个类似数组的对象，可以通过[index]的方法得到相应的DOM对象。例如： var $mr = $(#mr); // jQuery对象 var mr = $mr[0] ; // DOM对象 alert(mr.value); // 获取DOM元素的value的值并弹出 （2）jQuery本身也提供get(index)方法，可以得到相应的DOM对象。例如： var $mr = $(#mr); // jQuery对象 var mr = $mr.get(0); // DOM对象 alert(mr.value); // 获取DOM元素的value的值并弹出 2.3.2 jQuery对象和DOM对象的相互转换 【例2-2】 DOM对象转换为jQuery对象 （1）创建一个名称为js的文件夹，并将jquery-1.11.1.min.js复制到该文件夹中。 （2）创建一个名称为index.html的文件，在该文件的head标记中引用jQuery库文件，关键代码如下： script language=javascript src=js/jquery-1.11.1.min.js/script （3）编写jQuery代码，实现在页面载入完毕后，首先使用DOM对象的方法弹出p节点的内容，之后将DOM对象转换为