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>
- jQuery操作DOM节点的相关方法
- jQuery中操作DOM节点的方法
- jQuery的相关DOM操作
- Jquery操作DOM节点
- jquery dom 节点操作
- jQuery DOM节点操作
- jQuery DOM节点操作
- 【jQuery】DOM 节点操作
- JQuery学习--DOM节点的操作
- jQuery的DOM操作之遍历节点
- jQuery的DOM操作之遍历节点
- JQuery删除DOM节点的方法
- jQuery基础教程之DOM操作-遍历节点-children()方法
- jQuery基础教程之DOM操作-遍历节点-parent()方法
- jQuery基础教程之DOM操作-遍历节点-parents()方法
- jQuery基础教程之DOM操作-遍历节点-prev()方法
- jQuery基础教程之DOM操作-遍历节点-prevAll()方法
- jQuery基础教程之DOM操作-遍历节点-prevUntil()方法
- 机器学习课堂笔记(十五)
- 小さな手のひら
- HDU 4586Play the Dice 概率dp+等比数列 级数
- Zimbre RROR: Installation can not proceeed. Please fix your /etc/hosts file 报错解决方法
- Contest 2016-5-7 B(HDU 5616)
- jQuery操作DOM节点的相关方法
- 言叶にできない
- RecycleView(插件式架构)使用
- 结构体的偏移量计算
- 手机分辨率
- 多线程编程
- 一个帖子学会Android开发四大组件
- LeetCode Swap Nodes in Pairs
- python 参数传递[打包与解包问题]