本文共 4940 字,大约阅读时间需要 16 分钟。
1. DOM操作分类
1.1 DOM Core
DOM Core不专属于JavaScript,任何支持DOM的程序设计语言都可以使用。JavaScript中的getElementById()、getElemetsByTagName()、getAttribute()和setAttribute()等方法,都是DOM Core的组成部分。
1.2 HTML DOM
在使用JavaScript和DOM为HTML文件编写脚本时,有许多专属于HTML-DOM的属性。它提供了一些更简明的记号来描述各种HTML元素的属性,例如document.forms或element.src。有些方法即可以用DOM Core来实现,也可以使用HTML-DOM实现。
1.3 CSS DOM
CSS DOM 是针对CSS的操作。在JavaScript中,CSS DOM技术的主要作用是获取和设置style对象的各种属性,通过改变style对象的各种属性,可以使网页呈现出各种不同的效果。
2. DOM操作
2.1 查找节点
使用jQuery在文档树上查找节点,可通过jQuery选择器来完成,例如:
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);
2.2 创建节点
如果要创建两个<li>元素节点,并且要把它们作为<ul>元素节点的子节点添加到DOM节点树上,可使用工厂函数$()来完成,格式如下:
$(html);
$(html)方法会根据传入的HTML标记字符串,创建一个DOM对象,并将这个DOM对象包装成一个jQuery对象后返回,例如:
var $li_1 = $("");var $li_2 = $("");$("ul").append($li_1);$("ul").append($li_2);
创建属性节点与创建文本节点类似,也是直接在创建元素节点时一起创建,例如:
var $li_1 = $("
2.3 插入节点
将新创建的节点插入某个文档的方法有多种,如下表:
方法 | 描述 | 示例 |
---|---|---|
append() | 向每个匹配的元素内部追加内容。 | $("p").append("<b>me</b>"); |
appendTo() | 将所有匹配的元素追加到指定的元素中。 | $("<b>me</b>").appendTo("p"); |
prepend() | 向每个匹配的元素内部前置内容。 | $("p").prepend("<b>me</b>"); |
prependTo() | 将所有匹配的元素前置到指定的元素中。 | $("<b>me</b>").prependTo("p"); |
after() | 在每个匹配的元素之后插入内容。 | $("p").after("<b>me</b>"); |
insertAfter() | 将所有匹配的元素插入到指定元素的后面。 | $("<b>me</b>").insertAfter("p"); |
before() | 在每个匹配的元素之前插入内容。 | $("p").before("<b>me</b>"); |
insertBefore() | 将所有匹配的元素插入到指定的元素的前面。 | $("<b>me</b>").insertBefore("p"); |
2.4 删除节点
如果文档中某一个元素多余,那么应将其删除。jQuery提供了两种删除节点的方法,即remove()和empty()。
remove()方法的作用是从DOM中删除所有匹配的元素,例如:
$("ul li:eq(1)").remove();
当某个节点用remove()方法删除后,该节点所包含的所有后代节点将同时被删除,这个方法的返回值是一个指向已被删除的节点的引用。
empty()方法的作用是清空节点,例如:
$("ul li:eq(1)").empty();
当运行代码后,第2个<li>元素的内容被清空了,只剩下<li>标签默认的圆点符号。
2.5 复制节点
如果需要复制一个元素,可以使用clone()来完成,例如:
$("ul li").click(function(){ $(this).clone().appendTo("ul");})
复制节点后,被复制的新元素并不具有任何行为,如果需要新元素也具有复制功能,可以在clone()方法中传递一个参数true,例如:
$("ul li").click(function(){ $(this).clone(true).appendTo("ul");})
2.6 替换节点
如果要替换节点,jQuery提供了相应的方法,即replaceWith()和replaceAll()。replaceWith()方法的作用是将所有匹配的元素都替换成指定的HTML或者DOM元素,例如:
$("p").replaceWith("Name");
也可以使用另一个方法replaceAll()来实现,该方法与replaceWith()方法的作用相同,只是颠倒了replaceWith()操作,例如:
$("Name").replaceAll("p");
2.7 包裹节点
如果要将某个节点用其他标记包裹起来,jQuery提供了相应的方法,即wrap(),例如:
$("strong").wrap("");
wrapAll()方法会将所有匹配的元素用一个元素来包裹,它不同于wrap()方法,wrap()方法是将所有的元素进行单独的包裹,例如:
$("strong").wrapAll("");
wrapInner()方法将每一个匹配的元素的子内容用其他结构化的标记包裹起来,例如:
$("strong").wrapInner("");
2.8 属性操作
在jQuery中,用attr()方法来获取和设置元素属性值,例如:
var p_txt = $("p").attr("title");
如果要设置元素属性值,也可以使用同一个方法,不同的是,需要传递两个参数,例如:
$("p").attr("title", "my title");
在某些情况下,要删除文档中某个元素的特定属性,可以使用removeAttr()方法来完成,例如:
$("p").removeAttr("title");
2.9 样式操作
使用attr()方法可以获取元素的class,例如:
var p_class = $("p").attr("class");
也可以使用attr()方法来设置class,例如:
$("p").attr("class", "high");
在大多数情况下,它是将原来的class替换为新的class,而不是在原来的基础上追加新的class。jQuery提供了专门的addClass()方法来追加样式,例如:
$("p").addClass("another");
如果用户要删除class的某个值,可以使用与addClass()方法相反的removeClass()方法来完成,例如:
$("p").removeClass("high");
当它不带参数时,就会将class的值全部删除,例如:
$("p").removeClass();
jQuery还提供了一个toggleClass()方法控制样式上的重复切换,如果类名存在则删除它,如果类名不存在则添加它,例如:
$("p").toggleClass("high");
hasClass()可以用来判断元素中是否含有某个class,如果有,则返回true,否则返回false,例如:
$("p").hasClass("high");
2.10 设置和获取HTML、文本和值
html()方法类似于javascript中的innerHTML属性,可以用来读取或者设置某个元素中的HTML内容,例如:
var p_html = $("p").html();
如果需要设置某元素的HTML,也可以使用该方法,例如:
$("p").html("Name");
text()方法类似于javascript中的innerText属性,可以用来读取或设置某个元素中的文本内容,例如:
var p_text = $("p").text();
val()方法类似于javascript中的value属性,可以用来设置和获取元素的值,例如:
$("#username").focus(function(){ var text_value = $(this).val(); alert(text_value);});
2.11 遍历节点
children()方法用于取得匹配元素的子元素集合,例如:
$("p").children();
next()方法用于取得匹配元素后面紧邻的同辈元素,例如:
$("p").next();
prev()方法用于取得匹配元素前面紧邻的同辈元素,例如:
$("p").prev();
siblings()方法用于取得匹配元素前后所有的同辈元素,例如:sli
$("p").siblings();
closet()方法用来取得最近的匹配元素,首先检查当前元素是否匹配,如果匹配则直接返回,如果不匹配则向上查找父元素,直到找到匹配选择器的元素,如果没有找到,则返回一个空的jQuery对象,例如:
$(e.target).closet("li").css("color", "red");
2.12 CSS-DOM操作
CSS-DOM技术简单来说就是读取和设置style对象的各种属性,可以直接利用css()方法获取元素的样式属性,例如:
$("p").css("color");
也可以直接利用css()方法设置某个元素的单个样式,例如:
$("p").css("color", "red");
在jQuery中还有一个height()方法,可以取得匹配元素当前计算的高度值,例如:
$("p").height();
与height()方法对应的还有一个width()方法,可以取得匹配元素的宽度值,例如:
$("p").width();
CSS-DOM中,还有以下几个经常使用的方法。offset()方法的作用是获取元素在当前视窗的相对偏侈,其中返回的对象包含两个属性,即top和left,它只对可见元素有效,例如:
var offset = $("p").offset();var left = offset.left;var top = offset.top;
position()方法的作用是获取元素相对于最近的一个position样式属性设置relative或absolute的祖父节点的相对偏移,它返回的对象也包括两个属性,即top和left,例如:
var position = $("p").position();var left = position.left;var top = position.top;
scrollTop()方法和scrollLeft()方法的作用分别是获取元素的滚动条距顶端的距离和距左侧的距离,例如:
var $p = $("p");var scrollTop = $p.scrollTop();var scrollLeft = $p.scrollLeft();
另外,可以为这两个方法指定一个参数,控制元素的滚动条滚动到指定位置,例如:
$("textarea").scrollTop(300);$("textarea").scrollLeft(300);
转载地址:http://slsix.baihongyu.com/