jQuery中的DOM操作
DOM操作的分类
DOM操作分为3个方面:DOM Core(核心)、HTML-DOM和CSS-DOM。
DOM-Core
JavaScript中的getElementById()、getElementsByTagName()、getAtrribute()、setAttribute()等方法都是DOM Core的组成部分。例如:
document.getElementsByTagName("form");
element.getAttribute("src");
HTML-DOM
HTML-DOM提供了一些更加简明的记号来描述各种HTML元素的属性。例如:
document.forms;
element.src;
CSS-DOM
CSS-DOM是针对CSS的操作,在JavaScript中,CSS-DOM技术的主要作用是获取和设置style对象的各种属性,通过改变style对象的各种属性,可以使网页呈现出各种不同的效果。例如:
element.style.color = "red";
jQuery中的DOM操作
查找结点
可以使用jQuery选择器来完成
查找元素节点
var $li = $("ul li:eq(1)"); //获取<ul>里第二个<li>节点
查找属性节点
利用jQuery选择器获取元素后,可以使用attr()方法来获取它的各种属性值。attr()的参数是一个时,表示要查询的属性的名字。
var $para = $("p"); //获取<p>节点
var p_txt = $para.attr("title"); //获取<p>元素节点属性tittle
创建节点
动态创建HTML内容,使文档在浏览器里的呈现效果发生变化,并达到各种各样的人机交互的目的。
创建元素节点
创建元素节点需要两个步骤,创建新元素并将新元素插入文档中。例如:
var $li = $("<li title="li">这是一个li标签</li>");
$("ul").append($li);
插入节点
- append(),向每个匹配的元素内部追加内容
- appendTo(),将所有匹配的元素追加到指定的元素内部
- prepend(),向每个匹配的元素内部前置内容
- prependTo(),将所有匹配的元素前置到指定元素内部
- after(),向每个匹配的元素之后插入内容
- insertAfter(),将所有匹配的元素插入到指定的元素后面
- before(),在每个匹配的元素之前插入内容
- insertBefore(),将所有匹配的元素插入到指定的元素前面
删除节点
- remove(),从DOM中删除所有匹配的元素,传入的参数用于根据jQuery表达式来筛选。当某个节点用remove()删除后,该节点所包含的所有后代节点将同时被删除,返回值是一个指向已被删除节点的引用。例如:
var $li = $("ul li:eq(1)").remove(); //获取第2个<li>元素节点后,将它从网页中删除
var $li = $("ul li:eq(1)").remove("li[title!=li]"); //将<li>元素中属性title不等于"li"的<li>元素删除
- detach(),这个方法不会将匹配的元素从jQuery对象中删除,所有绑定的事件、附加的数据都会保留下来。
- empty(),这个方法并不是删除节点,而是清空节点,清空元素的所有后代节点。
复制节点
可以使用clone()方法来复制节点,复制节点后,被复制的新元素不具有任何行为,当在clone()方法中传入一个参数true,复制元素的同时复制元素所绑定的事件。例如:
$(this).clone(true).appendTo("body");
替换节点
replaceWith()、replaceAll(),将所有匹配的元素替换成指定的HTML或者DOM元素。如果在替换之前,已经为元素绑定事件,替换后原先绑定的事件将会与被替换的元素一起消失,需要在新元素上重新绑定事件。
$("p").replaceWith("<strong>hello world!</strong>");
$("<strong>hello world!</strong>").replaceAll("p");
包裹节点
wrap(),将某个节点用其他标记包裹起来。如果包裹的元素之间有其他元素的内容,其他元素会被放到包裹元素之后。
$("strong").wrap("<b></b>"); //用<b>标签将<strong>标签包裹起来
wrapAll(),将所有匹配的元素用一个元素来包裹。
wrapInner(),将每一个匹配的元素的子内容(包括文本节点)用其他结构化的标记包裹起来。例如:
$("strong").wrapInner("<b></b>");
//相当于
<strong><b>hello world!</b></strong>
属性操作
获取属性和设置属性
获取属性:
var $para = $("p");
var p_txt = $para.attr("title");
设置属性:
$("p").attr("title","your title");
也可以一次性为同一个元素设置多个属性:
$("p").attr({"title":"your title","name":"your name"});
删除属性
$("p").removeAttr("title");
样式操作
获取样式和设置样式
获取样式:
var p_class = $("p").attr("class"); //获取<p>元素的class
设置样式
$("p").attr("class","high");
追加样式
$("p").addClass("another");
如果不同的class设定了同一样式属性,则后者覆盖前者。
移除样式
$("p").removeClass("high"); //移除<p>元素中值为"high"的class
$("p").removeClass("high another"); //移除两个样式
$("p").removeClass(); //移除全部样式
切换样式
$toggleBtn.toggle(function(){
//代码3
},function(){
//代码4
}); //交替执行代码3和代码4两个函数
$("p").toggleClass("another"); //重复切换类名"another"
判断是否有某个样式
hasClass()可以用来判断元素中是否有某个样式,有就返回true,没有就返回false。
$("p").hasClass("another");
也可以使用is()方法
$("p").is(".anpther");
设置和获取HTML、文本和值
html(),用于读取或设置某个元素的HTML内容
var p_html = $("p").html();
$("p").html("<strong>hello world!</strong>");
text(),读取或设置某个元素中的文本内容
var p_text = $("p").text();
$("p").text("hello world!");
val(),设置和获取元素的值
遍历节点
children(),取得匹配元素的子元素的集合
var $p = $("p").children();
next(),取得匹配元素后面紧邻的同辈元素
prev(),取得匹配元素前面紧邻的同辈元素
siblings(),取得匹配元素前后所有的同辈元素
closest(),取得最近的匹配元素
CSS-DOM操作
CSS-DOM技术简单来说就是读取和设置style对象的各种属性。
可以利用css()获取样式属性:
$("p").css("color"); //获取<p>元素的颜色样式
也可以直接利用css()设置某个元素的单个样式:
$("p").css("color","red");
offset(),获取元素在当前视窗的相对偏移,返回的元素包括两个属性,top和left,例如:
var offset = $("p").offset();
var left = offset.left;
var top = offset.top;
position(),获取元素相对于最近的一个position(设置为relative或者absolute)的祖父节点的相对偏移,返回值为left和top。
scrollTop()和scrollLeft(),获取元素的滚动条距顶端的距离和左侧的距离,同时也可以设置参数,控制元素的滚动条滚到指定的位置。