目录
3.1 DOM操作的分类
一般来说，DOM操作分3个方面，即DOM core（核心）、HTML-DOM和CSS-DOM。
1. DOM core
DOM core不专属于js，任何一种支持DOM的程序设计语言都可以使用它。可以用来处理任何一种使用标记语言编写出来的文档。js中的getElementById()、getElementsByTagName()、getAttribute()和setAttribute()等方法都属于DOM Core方法。
2. HTML-DOM
3. CSS-DOM
CSS-DOM是针对CSS的操作。js中，CSS-DOM主要是获取和设置style对象的各种属性，通过改变style属性来设置样式。
3.2 jQuery中的DOM操作
3.2.1 查找节点
查找节点可以使用第二章介绍的jQuery选择器来完成。例子如下：
//查找元素节点
var li = $("ul li:eq(1)"); //选取ul中的第二个li
alert(li.text()); //输出li中的文本
//查找属性节点
var p = $("p"); //获取所有p节点
var p2 = p.attr("title"); //使用attr()方法获取title属性的值3.2.2 创建节点
在DOM操作中，常常需要动态创建HTML内容，使得页面发生改变，并且达到人机交互的目的。
1.创建元素节点
var $li = $("<li></li>"); //$(html)方法创建一个DOM对象，并将其包装成jQuery对象后返回
$("ul").append($li); //append()方法将新建的li添加到已有的ul中
2.创建文本节点
var $li = $("<li>文本文本</li>"); //创建元素时可以将文本同时给出
3.创建属性节点
var $li = $("<li title = 'bbb'></li>"); //同创建文本节点一样3.2.3 插入节点
新创建的节点插入已有文档的方法并非只有一种，jQuery中还有以下几种插入节点的方法：
| 方法 | 描述 | 示例 |
|---|---|---|
| append() | 向匹配的元素内部添加内容 | HTML代码： <p>我想说：</p> jQuery代码： $("p").append("<b>你好</b>"); 结果： <p>我想说：<b>你好</b></p> |
| appendTo() | 将所匹配的元素添加到指定元素中。实际上是颠倒了常规的append()方法。 | HTML代码： <p>我想说：</p> jQuery代码： $("<b>你好</b>").append("p"); 结果： <p>我想说：<b>你好</b></p> |
| prepend() | 向每个匹配的元素内部前置内容 | HTML代码： <p>我想说：</p> jQuery代码： $("p").prepend("<b>你好</b>"); 结果： <p><b>你好</b>我想说：</p> |
| prependTo() | 将所匹配的元素前置到指定元素中。实际上是颠倒了常规的prepend()方法。 | HTML代码： <p>我想说：</p> jQuery代码： $("<b>你好</b>").prependTo("p"); 结果： <p><b>你好</b>我想说：</p> |
| after() | 在每个匹配的元素之后插入元素 | HTML代码： <p>我想说：</p> jQuery代码： $("p").after("<b>你好</b>"); 结果： <p>我想说：</p><b>你好</b> |
| insertAfter() | 将所有匹配的元素插入到指定元素之后。实际上是颠倒了常规的after()方法。 | HTML代码： <p>我想说：</p> jQuery代码： $("<b>你好</b>").insertAfter("p"); 结果： <p>我想说：</p><b>你好</b> |
| before() | 在每个匹配的元素之前插入内容 | HTML代码： <p>我想说：</p> jQuery代码： $("p").before("<b>你好</b>"); 结果： <b>你好</b><p>我想说：</p> |
| insertBefore() | 将所有匹配的元素插入到指定的元素前面。实际上是颠倒了常规的before()方法 | HTML代码： <p>我想说：</p> jQuery代码： $("<b>你好</b>").insertBefore("p"); 结果： <b>你好</b><p>我想说：</p> |
插入方法不只是可以用来插入元素，还可以用来调整原先元素的顺序，例如：
var li_1 = $("ul li:eq(1)"); //获取ul中的第二个li
var li_2 = $("ul li:eq(2)"); //获取ul中的第三个li
li_2.insertBefore(li_1); //将两个li的顺序对调
3.2.4 删除节点
jQuery提供了三种方法可以对元素进行删除。即remove()，detach()和empty()。
1. remove()方法
从DOM中删除所有匹配的元素，并且返回选中的元素。当某个节点用此方法删除后，该节点所包含的后代节点将同时被删除。
var li = $("ul li:eq(1)").remove();
var li_2 = $("ul li").remove("li[title!=菠萝]");2. detach()方法
和remove()方法一样，删除匹配的元素。但是这个方法不会讲匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。与remove()方法不同的是所有的绑定事件和附加数据等都会保留。
var $li = $("ul li:eq(1)").detach();3. empty()方法
严格来说，这个方法并不是删除节点，而是清空节点，它清空元素中的所有后代节点。
$("ul li:eq(1)").empty(); //清空此元素里的内容，注意是元素里面的内容，元素还在。3.2.5 复制节点
使用方法clone()，此方法有一个参数true，传入时可以复制节点的同时也复制节点所绑定的事件。
$(this).clone(true);3.2.6 替换节点
如果要替换节点，jQuery提供了两种方法，即replaceWith()和replaceAll()。replaceAll()与之前的insertBefore一样，是replaceWith的颠倒。替换之后原先绑定的事件将会与被替换的元素一样消失，需要在新元素上重新绑定。
$("p").replaceWith("li");
$("li").replaceAll("p");3.2.7包裹节点
使用wrap()方法可以将原节点包裹而不改变原始文档的语义。此外还有wrapAll()和wrapInner()。
$("p").warp("<b></b>");<b><p>哈哈哈</p></b> //包裹后的结果1.wrapAll()
将匹配到的所有元素一同包裹起来，如果被包裹的元素中间有其他元素，其他元素会被放到包裹元素的后面。wrap()是将元素单独包裹。
2. wrapInner()
将每一个匹配到的元素的内容包括文本节点包裹起来。示例如下：
<strong>哈哈哈哈</strong> //包裹前
<strong><b>哈哈哈哈</b></strong> //包裹后3.2.8 属性操作
1. 获取属性和设置属性
获取属性和设置属性都是使用attr()方法，不同的是参数的个数。
获取属性只需要传递一个参数，即是要获取的属性名字；而设置参数则需要传递两个参数（属性名，属性值）。
$(this).attr("title"); //获取元素的title属性值
$(this).attr("title","mytitle"); //设置元素的属性值
//设置属性值可以使用json
var json = { "title" : "mytitle","name" : "test"};
$(this).attr(json);PS:jQuery中很多方法都是可以实现获取和设置的，如attr()、html()、text()、css()、height()、width()、val()等方法。
2. 删除属性
删除属性可以使用removeAttr()方法，参数即为要删除的属性名。
$(this).removeAttr("title");3.2.9 样式操作
1. 获取样式和设置样式
使用attr()方法传入class属性可以设置样式或者获取样式，此处不赘述。
2. 追加样式
jQuery中提供了addClass()方法来追加样式。
$("p").addClass("another"); //给p添加新的class但不会覆盖原先的3. 移除样式
使用removeClass()移除指定的或者全部的class。区别还是在于参数，如果需要指定删除的class就需要传入要删除的class，若参数为空则是删除所有的class。
$("p").removeClass("another");4. 切换样式
使用toggle()方法可以对某个样式进行添加/去除操作，达到了切换的目的。也就是交替使用addClass和removeClass方法。
5. 判断是否含有某个样式
使用hasClass方法判断，存在则返回true，否则返回false。
$("p").hasClass("another");
//实际上相当于
$("p").is(".another");3.2.10 设置和获取HTML、文本和值
1. html()方法
此方法类似于js中的innerHTML属性，可以用来读取和设置某个元素的HTML内容。此方法可以用于XHTML文档，但不能用于XML文档。
//获取元素的HTML内容
var text = $("p").html();
//设置元素的HTML内容
$("p").html("<b>哈哈哈</b>");2. text()方法
此方法类似于js中的innerText属性，可以用来读取和设置某个元素的文本内容。但是innerText在火狐浏览器不适用，党适用于XHTML和XML文档。使用方法同html()，不赘述。
3. val()方法
此方法类似于js中的value属性，可以用来设置和读取元素的值。无论是文本框，下拉列表还是单选框，它都可以返回元素的值。如果元素是多选，则返回一个包含所有选择的值的数组。
3.2.11 遍历节点
| 方法 | 描述 | 返回 | 示例 |
|---|---|---|---|
| children() | 此方法用于取得匹配元素的子元素集合，仅仅考虑子元素而不考虑其他后代元素。 | 集合元素 | $("ul").chlidren()获取<ul>的子元素集合。 |
| next() | 用于取得匹配元素后面紧邻的同辈元素。 | 集合元素 | $("ul").next()获取每个<ul>的下一个同辈元素。 |
| prev() | 用于取得匹配元素前面紧邻的同辈元素。 | 集合元素 | $("ul").prev()获取每个<ul>的前一个同辈元素。 |
| sibling() | 同于匹配元素前后所有的同辈元素。 | 集合元素 | $("ul").sibling()获取每个<ul>的所有同辈元素。 |
| closest() | 用于获得最近的匹配元素。从本身开始向上查找。 | 单个元素 | $("ul").closest("li").css("color","red");给匹配到的<li>设置颜色。 |
3.2.12 CSS-DOM操作
直接用css()方法读取和设置style。
$("p").css("color" , "red");
$("p").css({"color" : "red","fontSize" : "16px"});
| 方法 | 描述 | 示例 |
|---|---|---|
| offset() | 对可见元素有效，获取元素相对当前视窗的偏移量，返回对象包含两个属性top和left | $("p").offset().left、$("p").offset().top |
| position() | 获取元素相对最近的一个position样式为relative或者absolute的祖父节点的相对偏移，同上，返回对象有两个属性。 | $("p").position().left |
| scrollTop() | 获取元素的滚动条和顶端的距离 | $("p").scrollTop(); |
| scrollLeft() | 获取元素的滚动条和左侧的距离 | $("p").scrollLeft(); |
498
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
