《锋利的jQuery》读书笔记第3章 jQuery中的DOM操作

来源：互联网发布：淘宝流量币从哪进货的编辑：程序博客网时间：2024/05/29 02:19

1.DOM操作分为3个方面：DOM Core（核心）、HTML-DOM和CSS-DOM：

1.1 DOM Core并不属于JavaScript，任何一种支持DOM的程序设计语言都可以使用它。它的用途并非仅限于处理网页，也可以用来处理任何一种使用标记语言编写出来的文档，例如XML

JavaScript中的getElementById()、getElementsByTagName()、getAttribute()和setAttribute()等方法，都是DOM Core的组成部分

1.2 HTML-DOM：HTML-DOM的出现甚至比DOM Core还要早，它提供了一些更简明的记号来描述各种HTML元素的属性。

1.3 CSS-DOM：CSS-DOM是针对CSS的操作。在JavaScript中，CSS-DOM技术的主要作用是获取和设置style对象的各种属性。

2.jQuery查找节点：

可以使用第2章的方法在查找节点，找到元素节点后，可以使用attr()方法来获取它的各种属性的值，当attr()方法用来获取属性的值时，它接受一个参数，参数为要查询的属性的名字。

3.jQuery创建节点：

在jQuery可以使用jQuery的工厂函数$()来完成创建节点：$(html);

例如：

var $li_1 = $("<li></li>");

var $li_2 = $("<li>香蕉</li>");

var $li_3 = $("<li title='香蕉'>香蕉</li>");

4.jQuery插入节点：

方法描述示例append()向每个匹配的元素内部追加内容HTML代码：
我想说：
jQuery代码：
$("p").append("你好");
结果：
我想说：你好appendTo()将所有匹配的元素追加到指定的元素中。
实际上，使用该方法是颠倒了
常规的$(A).append(B)的操作，
即不是将B追加到A中，
而是将A追加到B中

HTML代码：
我想说：
jQuery代码：
$("你好").appendTo("p");

结果：
我想说：你好

prepend()向每个匹配的元素内部的前面添加内容

HTML代码：
我想说：
jQuery代码：
$("p").prepend("你好");
结果：
你好我想说：

prependTo()将所有匹配的元素前置到指定的元素中。
实际上，使用该方法是颠倒了
常规的$(A).prepend(B)的操作，
即不是将B前置到A中，
而是将A前置到B中

HTML代码：
我想说：
jQuery代码：
$("你好").prependTo("p");

结果：
你好我想说：

after()在每个匹配的元素之后插入内容

HTML代码：
我想说：
jQuery代码：
$("p").after("你好");
结果：
我想说：你好

insertAfter()将所有匹配的元素插入到指定元素的后面。
实际上，使用该方法颠倒了
常规的$(A).after(B)的操作，
即不是将B插入到A后面，
而是将A插入到B后面

HTML代码：
我想说：
jQuery代码：
$("你好").insertAfter("p");

结果：
我想说：你好

before()在每个匹配的元素之前插入内容

HTML代码：
我想说：
jQuery代码：
$("p").before("你好");

结果：
你好我想说：

insertBefore()将所有匹配的元素插入到指定的元素的前面。
实际上，使用该方法颠倒了
常规的$(A).before(B)的操作，
即不是将B插入到A前面，
而是将A插入到B前面

HTML代码：
我想说：
jQuery代码：
$("你好").insertBefore("p");

结果：
你好我想说：

5.删除节点

使用remove()方法删除所有匹配的元素

例如：

$("ul li:eq(1)").remove();

使用empyt()方法清空节点，它能清空元素中的所有后代节点，但不包括元素本身的属性节点

6.复制节点

使用clone()方法来复制节点

例如：

$("ul li:eq(1)").clone().appendTo("ul");

需要注意的是被复制的新元素并不具有任何行为，如果需要新元素也具有和原来的元素相同的行为，可以将true参数传给clone()函数，如下所示：

$("ul li:eq(1)").clone(true).appendTo("ul");

7.替换节点

可以使用replaceWith()或者replaceAll()函数来替换节点

例如：

$("p").replaceWith(" 你最不喜欢的水果是？");

或者：

$(" 你最不喜欢的水果是？").replaceAll("p");

以上语句都是将所有的标签换成 你最不喜欢的水果是？

8.包裹节点

8.1 wrap()：可以使用warp()函数来将某个节点用其他标记包裹起来

例如：

HTML代码：

你最不喜欢的水果是？

jQuery代码：

$("strong").wrap("");

则HTML代码变成：

你最不喜欢的水果是？

8.2 wrapAll()：该方法会将所有匹配的元素用一个元素来包裹起来，需要注意它和wrap()的区别

例如：

HTML代码：

你最不喜欢的水果是？

jQuery代码：

$("strong").wrapAll("");

则HTML代码变成：

你最不喜欢的水果是？

你最不喜欢的水果是？

如果是用wrap()方法，则HTML代码变成：

你最不喜欢的水果是？

如果HTML代码为：

你最不喜欢的水果是？

test

你最不喜欢的水果是？

使用jQuery代码：

$("strong").wrapAll("");

后HTML变成：

你最不喜欢的水果是？

你最不喜欢的水果是？

test

8.3 wrapInner()方法：该方法是将匹配的元素的子内容用其他标记包裹起来

例如：

HTML代码：

你最不喜欢的水果是？

jQuery代码：

$("strong").wrapInner("");

则HTML代码变成：

你最不喜欢的水果是？

9.属性操作

9.1 获取/设置属性：可以用attr()方法来设置或者获取属性的值

例如：

var p_txt = $("p").attr("title"); #获取匹配的第一个的title属性

$("p").attr("title", "test title"); #将所有的title属性的值设置为"test title"

$("p").attr({"title":"test title", "name":"test name"}); #设置多个属性

9.2 删除属性：可以用removeAttr(attributeName)来删除属性

10.样式操作

10.1 获取和设置样式：可以通过使用attr()方法来获取和设置class属性的方法来完成样式的获取和设置

10.2 追加样式：通过addClass(addClassName)来追加样式

10.3 移除样式：通过removeClass()方法来移除样式

例如：

$("p").removeClass("high"); # 移除单个样式

$("p").removeClass("high another"); # 移除多个样式

$("p").removeClass() # 移除所有样式

10.4 切换样式：toggleClass(className);如果classNames存在不删除它，如果不存在则添加此样式

10.5 判断是否含有某个样式：hasClass(className)

11.设置和获取HTML、文本和值

11.1 html()方法，如果调用无参数版本则返回元素包含的html代码，如果调用带参数版本则设置标签所包含的html的值

11.2 text()方法，如果调用无参数版本则返回元素包含的文本内容，如果调用带参数版本则设置标签所包含的文本内容

11.3 val()方法，此方法类似于JavaScript中的value属性，可以用来设置和获取元素的值

12.遍历节点：

12.1 childrens()

12.2 next()

12.3 prev()

12.4 siblings() 获取匹配元素前后所有的同辈元素

12.5 closest() 获取最近的匹配元素，首先检查当前元素是否匹配，如果匹配则直接返回元素本身。如果不匹配则向上查找父元素，逐级向上直到找到匹配选择器的元素。如果什么都没找到则返回一个空的jQuery对象。

--------------------------------------------------
author: cs_cjl
website: http://blog.csdn.net/cs_cjl
--------------------------------------------------

13.CSS-DOM技术简单来说就是读取和设置style对象的各种属性。style属性很有用，但最大不足就是无法通过它来提取通过外部CSS设置的样式信息，而在jQuery中，可以通过css()方法来获取元素的样式属性，而无论它是通过外部导入，还是直接拼接在HTML元素里。也可以通过css()方法设置单个或者多个样式属性（参数和attr()方法一样）

14.CSS-DOM中常用的方法：

14.1 height()

14.2 width()

14.3 offset()

14.4 position()

14.5 scrollTop()

14.6 scrollLeft()

《锋利的jQuery》读书笔记 第3章 jQuery中的DOM操作

《锋利的jQuery》读书笔记第3章 jQuery中的DOM操作