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代码: <p>我想说:</p> jQuery代码: $("p").append("<b>你好</b>"); 结果: <p>我想说:<b>你好</b></p> |
appendTo() | 将所有匹配的元素追加到指定的元素中。 实际上,使用该方法是颠倒了 常规的$(A).append(B)的操作, 即不是将B追加到A中, 而是将A追加到B中 |
HTML代码:
<p>我想说:</p> jQuery代码: $("<b>你好</b>").appendTo("p");
结果:
<p>我想说:<b>你好</b></p> |
prepend() | 向每个匹配的元素内部的前面添加内容 |
HTML代码:
<p>我想说:</p> jQuery代码: $("p").prepend("<b>你好</b>"); 结果: <p><b>你好</b>我想说:</p> |
prependTo() | 将所有匹配的元素前置到指定的元素中。 实际上,使用该方法是颠倒了 常规的$(A).prepend(B)的操作, 即不是将B前置到A中, 而是将A前置到B中 |
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() | 将所有匹配的元素插入到指定元素的后面。 实际上,使用该方法颠倒了 常规的$(A).after(B)的操作, 即不是将B插入到A后面, 而是将A插入到B后面 |
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() | 将所有匹配的元素插入到指定的元素的前面。 实际上,使用该方法颠倒了 常规的$(A).before(B)的操作, 即不是将B插入到A前面, 而是将A插入到B前面 |
HTML代码:
<p>我想说:</p> jQuery代码: $("<b>你好</b>").insertBefore("p");
结果:
<b>你好</b><p>我想说:</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("<strong> 你最不喜欢的水果是?</strong>");
或者:
$("<strong> 你最不喜欢的水果是?</strong>").replaceAll("p");
以上语句都是将所有的<p>标签换成<strong> 你最不喜欢的水果是?</strong>
8.包裹节点
8.1 wrap():可以使用warp()函数来将某个节点用其他标记包裹起来
例如:
HTML代码:
<strong> 你最不喜欢的水果是?</strong>
jQuery代码:
$("strong").wrap("<b></b>");
则HTML代码变成:
<b><strong> 你最不喜欢的水果是?</strong></b>
8.2 wrapAll():该方法会将所有匹配的元素用一个元素来包裹起来,需要注意它和wrap()的区别
例如:
HTML代码:
<strong> 你最不喜欢的水果是?</strong>
<strong> 你最不喜欢的水果是?</strong>
jQuery代码:
$("strong").wrapAll("<b></b>");
则HTML代码变成:
<b><strong> 你最不喜欢的水果是?</strong>
<strong> 你最不喜欢的水果是?</strong></b>
如果是用wrap()方法,则HTML代码变成:
<b><strong> 你最不喜欢的水果是?</strong></b>
<b><strong> 你最不喜欢的水果是?</strong></b>
如果HTML代码为:
<strong> 你最不喜欢的水果是?</strong>
<p>test</p>
<strong> 你最不喜欢的水果是?</strong>
使用jQuery代码:
$("strong").wrapAll("<b></b>");
后HTML变成:
<b><strong> 你最不喜欢的水果是?</strong>
<strong> 你最不喜欢的水果是?</strong></b>
<p>test</p>
8.3 wrapInner()方法:该方法是将匹配的元素的子内容用其他标记包裹起来
例如:
HTML代码:
<strong> 你最不喜欢的水果是?</strong>
jQuery代码:
$("strong").wrapInner("<b></b>");
则HTML代码变成:
<strong><b> 你最不喜欢的水果是?</b></strong>
9.属性操作
9.1 获取/设置属性:可以用attr()方法来设置或者获取属性的值
例如:
var p_txt = $("p").attr("title"); #
获取匹配的第一个<p>的title属性
$("p").attr("title", "test title"); #将所有<p>的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
--------------------------------------------------
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()