锋利的jQuery--第三章 jQuery中的DOM操作 【读书笔记】
锋利的jQuery
jQuery中的DOM操作
DOM是Document Object Model的缩写，意思是文档对象模型。根据W3C DOM规范，DOM是一种与浏览器、平台、语言无关的接口，使用该接口可以轻松地访问页面中的所以标准组件。
3.1 DOM操作的分类
DOM操作可以分为3个方面，即DOM Core（核心）、HTML-DOM和CSS-DOM。
1. DOM Core
DOM Core并不专属于JavaScript，任何一种支持DOM的程序设计语言都可以使用它，它的用途并非仅限于处理网页，也可以用来处理任何一种使用标记语言写出来的文档，例如XML。
JavaScript中的getElementByI的()、getElementsByTagName()、getAttribute()等方法都是DOM Core的组成部分。
例如：
使用DOM Core来获取表单对象的方法：
document.getElementsByTagName(“form”);使用DOM Core来获取某元素的src属性的方法：
element.getAttribute(“src”);
2. HTML DOM
在使用JavaScript和DOM为HTML文件编写脚本时，有许多专属于HTML-DOM的属性。HTML-DOM的出现甚至比DOM Core还要早，它提供了一些更简明的记号来描述各种HTML元素的属性。
例如：
- 使用HTML-DOM来获取表单对象的方法：
document.forms//HTML-DOM提供了一个forms对象 - 使用HTML-DOM来获取某元素的src属性的方法：
element.src;
可以发现获取某些对象、属性既可以用DOM Core来实现也可以使用HTML-DOM实现，。相比较而言HTML-DOM的代码通常比较简短，不过它只能用来处理Web文档。
3. CSS_DOM
CSS-DOM是针对CSS的操作。
例如：设置某元素style对象字体颜色的方法：
element.style.color="red";
3.2 jQuery中的DOM操作
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml/DTD/xhtml-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>dom</title>
</head>
<body>
<p title="选择你喜欢的水果。">你最喜欢的水果是？</p>
<ul>
<li title="苹果">苹果</title>
<li title="橘子">橘子</title>
<li title="菠萝">菠萝</title>
</ul>
</html>
3.2.1 查找节点
-
- 查找元素节点
var $li = $(“ul li:eq(1)“);
var li_txt = $li.text();
alert(li_txt);
- 查找元素节点
-
- 查找属性节点
利用jQuery选择器查找到元素后，就可以使用attr()方法获取它的各种属性的值。
var $para = $(“p”);
var p_txt = $para.attr(“title”);
alert(p_txt); - 查找属性节点
3.2.2 创建节点
-
- 创建元素节点
（1） 创建两个 - 新元素。
（2） 将这两个新元素插入文档中。
$(html) 方法会根据传入的HTML标记字符串，创建一个DOM对象，并将这个DOM对象包装成一个jQuery对象后返回。
var $li_1 = $(“
“);
var $li_2 = $(“ “);
$(“ul”).append($li_1);
$(“ul”).append($li_2);//可以采取链式写法：$(“ul”).append($li_1).append($li_2); - 创建元素节点
-
- 创建文本节点
var $li_1 = $(“ - 香蕉 “);//创建一个
- 元素，包括元素节点和文本节点“香蕉”
var $li_2 = $(“ - 雪梨 “);
$(“ul”).append($li_1);
$(“ul”).append($li_2); - 创建文本节点
-
- 创建属性节点
var $li_1 = $(“ - 香蕉 “); //title='香蕉'就是创建的属性节点
- 雪梨 “);
var $li_2 = $(“
$(“ul”).append($li_1);
$(“ul”).append($li_2); - 创建属性节点
3.2.3 插入节点
表3-1 插入节点的方法
方法 描述
append() 向每个匹配的元素内容追加内容。
appendTo() 将所以匹配的元素追加到指定的元素中。
prepend() 向每个匹配的元素内容内部前置内容。
prependTo() 将所有匹配的元素前置到指定的元素中。
after() 在每个匹配的元素之后插入内容
insertAfter() 将所有匹配的元素插入到指定元素后面。
before() 在每个匹配的元素之前插入内容
insertBefore() 将所有匹配的元素插入到指定的元素前面var $li_1 = $(“
- 香蕉 “);
- 雪梨 “);
- 其它 “);
var $li_2 = $(“
var $li_3 = $(“
var $parent = $(“ul”);
var $two_li = $(“ul li:eq(1)“);
$parent.append($li_1);
$parent.prepend($li_2);
$li_3.insertAfter($two_li);
var $one_li = $(“ul li:eq(1)“);
var $two_li = $(“ul li:eq(2)“);
$two_li.insertBefore($one_li);
3.2.4 删除节点
jQuery提供了两种删除节点的方法，即remove()和empty()。
-
- remove()方法
作用是从DOM中删除所有匹配的元素，传入的参数用于根据jQuery表达式来筛选元素。
$(“ul li:eq(1)“).remove();
- remove()方法
当某个节点用remove()方法删除后，该节点所包含的所有后代节点将同时被删除。这个方法的返回值是一个指向已被删除的节点的引用，因此可以在以后再使用这些元素。
var $li = $("ul li:eq(1)").remove();
$li.appendTo("ul");//把刚才删除的节点又重新添加到<ul>元素里
remove()方法也可以通过传递参数来选择性地删除元素，jQuery代码如下：
$("ul li").remove("li[title!=菠萝]");
-
- empty()方法
empty方法并不是删除节点而是清空节点，它能清空元素中的所有后代节点。
- empty()方法
3.2.5 复制节点
$("ul li").click(function(){
$(this).clone.appendTo("ul");//复制当前单击的节点并将其追加到<ul>元素中
})
复制节点后，被复制的新元素并不具有任何行为。如果需要新元素也具有复制功能（本例是单击事件），可以：
$(this).clone(true).appendTo("body");//注意参数true
在clone()方法中传递了一个参数true，它的含义是复制元素的同时复制元素所绑定的事件。因此钙元素的副本也同样具有复制功能。
3.2.6 替换节点
要替换某个节点，jQuery提供了相应的方法，即replaceWith()和replaceAll().
$("p").replaceWith("<strong>你最不喜欢的水果是?</strong>");
replaceAll()方法与replaceWith()相同，只是颠倒了replaceWith()操作。如：
$("<strong>你最不喜欢的水果是?</strong>").replaceAll("p");
如果在替换之前，已经为元素绑定事件，替换后原先绑定的事件将会与被替换的元素一起消失，需要在新元素上重新绑定事件。