jQuery操作DOM节点的相关方法

来源:互联网 发布:泰国 试管婴儿 知乎 编辑:程序博客网 时间:2024/03/29 22:24

1.在指定节点内插入新节点

   以下的内容都用于在打指定节点内添加新内容

1)        append(content):在jQuery对象包含的所有DOM节点内的尾部插入content所代表内容。

2)        append(function(index,html)):使用function(index,html)函数迭代处理jQuery所包含的每个节点,在每个节点的尾部依次插入function(index,html)函数的返回值。

3)        appendTo(selector):将当前jQuery对象包含的DOM元素添加到selecctor匹配的所有DOM的内部的尾部。

4)        prepend(content):在jQuery对象包含的所有DOM节点内的顶部插入content所代表的内容,其中content既可以是HTML字符串,也可以是DOM元素,还可以是jQuery对象。

5)        prepend(function(index,html)):使用function(index,html)函数迭代处理jQuery所包含的每个节点,在每个节点的顶部依次插入function(index,html)函数的返回值。

6)        prependTo(selector):将当前jQuery对象包含DOM元素添加到selector匹配的所的DOM有内部的顶端。

 下面是程序示范了这些方法的功能。

<!DOCTYPE html><html><head><meta name="author" content="OwenWilliam" /><meta http-equiv="Content-Type" content="text/html; charset=GBK" /><title> 添加HTML节点 </title></head><body><div id="test1"></div><div id="test2" style="border:1px solid black;">id为test2的元素</div><script type="text/javascript" src="../jquery-1.8.0.js"></script><script type="text/javascript">// 直接将一段HTML字符串添加到id为test1的元素的内部的尾端$("#test1").append("<b>XML</b>");// 创建一个<span.../>元素var span = document.createElement("span");span.innerHTML = "Java"// 将一个DOM元素添加到id为test1的元素的内部的顶端$("#test1").prepend(span);// 将id为test1的元素添加到id为test2的元素内部的尾端$("#test1").appendTo("#test2");</script></body></html>

结果:


如果使用append(function(index,html))、prepend(function(index,html))则可以为不同元素添加不同的内容。如下:

<!DOCTYPE html><html><head><meta name="author" content="OwenWilliam" /><meta http-equiv="Content-Type" content="text/html; charset=GBK" /><title> 添加HTML节点 </title></head><body><div>1</div><div>2</div><div>3</div><script type="text/javascript" src="../jquery-1.8.0.js"></script><script type="text/javascript">// 定义一个数组var books = [{name: "Java" , price:109},{name: "Java EE" , price:89},{name: "Android" , price:89}]// 使用函数为不同div元素动态添加不同的内容$("body>div").append(function(i){// i代表jQuery对象中正在迭代处理的元素的索引,因此为0、1、2...return "<b>书名是《" + books[i].name+ "》,价格是:" + books[i].price;})</script></body></html>

2.添加外节点

以下的方法用于在目标节点的前面添加新节点

1)        after(content):在该jQuery对象包含的所有DOM节点之后添加content对应的内容。

2)        after(function(index)):使用function(index)函数迭代处理jQuery所包含的每个节点,在每个节点的后面依次添加function(index)函数的返回值。

3)        before(content):在该节点jQuery对象包含的所有DOM节点之前添加content对应的内容。

4)        before(function(index)):使用function(index)函数迭代处理jQuery所包含的每个节点,在每个节点的前面依次添加function(index)函数的返回值。

5)        insertAfter(selector):将当前jQuery对象包含的所有DOM节点插入到selector匹配的所有节点之前。

如下程序示范了以上几个插入方法。

<!DOCTYPE html><html><head><meta name="author" content="OwenWilliam" /><meta http-equiv="Content-Type" content="text/html; charset=GBK" /><title> 插入HTML节点 </title></head><body><div id="test1" style="border:1px dotted black;">id为test1的元素</div><br /><div id="test2" style="border:1px solid black;">id为test2的元素</div><hr /><script type="text/javascript" src="../jquery-1.8.0.js"></script><script type="text/javascript">// 直接将一段HTML字符串插入到id为test1的元素的的前面$("#test1").before("<b>Ajax</b>");// 直接将一段HTML字符串插入到id为test1的元素的的后面$("#test1").after("<b>XML</b>");// 将id为test2的元素插入hr元素之后$("#test2").insertAfter("hr");// 使用函数在不同节点前添加不同内容$("body>div").before(function(i){return "<div style='font-size:14pt'>" + i + "</div>";});</script></body></html>

结果:

3.替换

下面是方法用于替换节点DOM节点

1)        replaceWith(newContent):将当前jQuery对象包含的所有DOM对象替换成newContent.

2)        replaceWith(function(index)):使用function(index)函数迭代处理jQuery所包含的每个节点,依次使用function(index)函数的返回值来替换jQuery对象包含的每个节点。

3)        replaceAll(selector):将当前jQuery对象包含的所有DOM对象替换成selectot匹配的元素。

4.删除

下面是方法用于删除指定DOM节点

1)        empty():删除当前jQuery对象包含的所有DOM节点。

2)        remove([selector]):删除当前jQuery对象包含的所有DOM节点。

3)        detach(selector):该方法的功能与remove([selector])方法相似,区别只在于detach()方法会保留被删除元素上关联的jQuery数据,当需要在后面某个时刻重新插入该被删除元素时,则该方法会比较有用。

 

5.复制

  clone([withDataAndEvents]):复制当前jQuery对象包含的所有DOM元素并且选中这些复制出来的副本。当需要把DOM文档中元素的副本添加到其他位置时,这个函数非常有用。

<!DOCTYPE html><html><head><meta name="author" content="OwenWilliam" /><meta http-equiv="Content-Type" content="text/html; charset=GBK" /><title> 删除和复制HTML节点 </title></head><body><div><span id="test1">id为test1的元素</span>Java</div><span id="test2">id为test2的元素</span><script type="text/javascript" src="../jquery-1.8.0.js"></script><script type="text/javascript">// 将div元素内容全部清空$("div").empty()// 重新添加字符串.append("重新添加");// 删除所有id为test2的span元素$("span").remove("#test2");// 取得页面中div元素,并复制该元素$("div").clone()// 添加背景色.css("background-color" , "#cdcdcd")// 添加到body元素尾部.appendTo("body");</script></body></html>




0 0