一、基本概念
DOM:Document Object Model,文档对象模型,一种与浏览器、平台、语言无关的接口。
二、DOM操作
1、查找节点,如下:
<html>
<head>
<title></title>
</head>
<body>
<p>Hello</p>
<p>!Hello</p>
<ul>
<li title="苹果">苹果</li>
<li title="橘子">橘子</li>
</ul>
</body>
</html>
var li = $("ul li:eq(1)");//<ul>里第2个<li>节点
2、创建节点
var li_1 = $("<li title='香蕉'>香蕉</li>");//创建<li>节点
$("ul").append(li_1);//插入到<ul>节点中
3、插入节点
append():向每个匹配的元素内追加内容,后加。
appendTo():把内容追加到指定元素中,$(A).appendTo(B)。
prepend():向每个匹配的元素内前置内容,前加。
prependTo():把内容前置到指定元素中,$(A).prependTo(B)。
注:以上是在匹配内容中操作。
after():在每个匹配元素之后加入内容,后加。
insertAfter():把内容加入到指定元素后面,$(A).insertAfter(B)。
before():在每个匹配元素之前加入内容,前加。
insertBefore():把内容加入到指定元素前面,$(A).insertBefore(B)。
注:以上是在匹配内容的外面操作。
如下:
$("p").append("<b>world</b>");//<p>Hello <b>world</b><p>
$("<b>world</b>").appendTo("p");//<p>Hello <b>world</b><p>
$("p").prepend("<b>world</b>");//<p><b>world</b> Hello<p>
$("<b>world</b>").prependTo("p");//<p><b>world</b> Hello<p>
-------------------------------------------------------------
$("p").after("<b>world</b>");//<p>Hello<p><b>world</b>
$("<b>world</b>").insertAfter("p");//<p>Hello<p><b>world</b>
$("p").before("<b>world</b>");//<b>world</b><p>Hello<p>
$("<b>world</b>").insertBefore("p");//<b>world</b><p>Hello<p>
4、删除节点
remove():删除匹配的元素,本身在内存中。
empty():清空节点,本身并没有真正的删除。
如下:
$("ul li").remove("li[title=苹果]");
$("ul li:eq(0)").remove();
$("ul li:eq(0)").empty();
5、复制节点
clone():复制节点但不具有任何行为。
clone(true):复制节点同时复制元素所绑定事件。
如:
$("ul li:eq(0)").clone().appendTo("ul");
6、替换节点
replaceWith():用节点替换原来的节点。
replaceAll():与上作用一样,只是相反操作。
如:
$("p").replaceWith("<strong>World</strong>");
//<strong>World</strong>
$("<strong>World</strong>").replaceAll("p");
//<strong>World</strong>
7、包裹节点
wrap():把匹配的节点用标记包裹起来。
wrapAll():把所有匹配的元素用一个元素包裹起来。
wrapInner():把每一个匹配的元素的子内容用一个元素包裹起来。
如:
$("p").wrap("<strong></strong>");
//<strong><p>World</p></strong><strong><p>World</p></strong>
$("p").wrapAll("<strong></strong>");
//<strong><p>World</p><p>World</p></strong>
$("p").wrapInner("<strong></strong>");
//<p><strong>World</strong></p><p><strong>World</strong></p>
----------------------------------------------------------------------------------------------------------