zoukankan      html  css  js  c++  java
  • 30 jQuery——操作文档结构

    操作文档结构

    具体使用请参考API

    内部插入:

    1. append和appendTo
    2. prepend和prependTo
    1追加到后面,2追加到前面
    1和2中:以和字分隔
    前者把字句:a把b追加进来
    后者被字句:a被b追加进去
    1和2追加的内容都可以是字符串和元素对象

    外部插入:

    after():外部插入,插到指定元素后面
    before():外部插入:插到指定元素前面
    insertAfter()与insertBefor() :它们两个与prependTo和appendTo()类似,只不过是外部插到后面和前面

    包裹:

    wrap()具体用法查询api
    a.wrap(content),将a对象外包裹指定的content元素

    替换:

    replaceWith和replaceAll()把字句与被字句
    a.replaceWith(content) 使用content将a对象替换,包括标签内容

    删除:

    empty() :删除标签下的所有子节点

    复制:

    clone()
    a.clone() 复制一份a
    通常和append()连用:a.clone().appendTo(b)

    测试代码

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>操作文档结构</title>
    		<!-- 
    		内部插入:
    			1. append和appendTo
    			2. prepend和prependTo
    			1追加到后面,2追加到前面
    			1和2中:以和字分隔
    				前者把字句:a把b追加进来
    				后者被字句:a被b追加进去
    			1和2追加的内容都可以是字符串和元素对象
    		外部插入:
    			after():外部插入,插到指定元素后面
    			before():外部插入:插到指定元素前面
    			insertAfter()与insertBefor() :它们两个与prependTo和appendTo()类似,只不过是外部插到后面和前面
    		包裹:
    			wrap()具体用法查询api
    			a.wrap(content),将a对象外包裹指定的content元素
    		替换:
    			replaceWith和replaceAll()把字句与被字句
    			a.replaceWith(content) 使用content将a对象替换,包括标签内容
    		删除:
    			empty() :删除标签下的所有子节点
    		复制:
    			clone()
    			a.clone() 复制一份a
    			通常和append()连用:a.clone().appendTo(b)
    		 -->
    		<script src="js/jQuery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
    		<script type="text/javascript">
    			//append()内部追加(追加到元素内部)
    			function testAppend(){
    				//获取元素
    				var div = $("#showdiv");
    				//使用内部插入,与HTML不同,append追加,而html是覆盖
    				//常见应用场景:下拉框填充数据
    				div.append("<i>,亲爱的</i>")
    				//也可以直接追加一个对象
    			}
    			//appendTo()将一个元素追加到另一个元素中去
    			function testAppendTo(){
    				var div = $("#showdiv");
    				var u1 = $("#u1");
    				//将ul添加到div中
    				u1.appendTo(div);
    			}
    			//prepend()将一个元素添加到另一个元素之前
    			function testPrepend(){
    				var div = $("#showdiv");
    				var b1 = $("#b1");
    				//在div前添加b1
    				div.prepend(b1);
    			}
    			
    			function testPrependTo(){
    				var div = $("#showdiv");
    				var b1 = $("#b1");
    				//在div前添加b1
    				b1.prependTo(div);
    			}
    			//after()外部插入:插到指定元素后面(外部)
    			function testAfter(){
    				//获取元素对象
    				var div = $("#showdiv");
    				//使用after外部插入
    				div.after("<b>我为啥被插到外面了</b>")
    			}
    			function testBefore(){
    				var div = $("#showdiv");
    				div.before("<b>我被插到前面了</b>")
    			}
    			//wrap() 包裹
    			function testWrap(){
    				var p1 = $("#p1");
    				p1.wrap("<div class='myClass'></div>");
    			}
    			//replaceWith()和replaceAll() 替换:不但换标签,还换标签内容
    			function testReplaceWith(){
    				var p2 = $("#p2");
    				p2.replaceWith("<b>我被替换啦啊啊啊啊啊</b>");
    			}
    			// empty() 删除
    			function testEmpty(){
    				var div = $("#showdiv");
    				div.empty()
    			}
    			//clone()复制,通常和append()等连用
    			function testClone(){
    				var b2 = $("#b2");
    				var p3 = $("#p3");
    				b2.clone().appendTo(p3);
    			}
    		</script>
    		<style type="text/css">
    			#showdiv{
    				200px;
    				height: 200px;
    				border:1px solid orange;
    			}
    			.myClass{
    				border: 1px solid red;
    			}
    		</style>
    	</head>
    	<body>
    		<h3>操作文档结构</h3>
    		<p>具体用法请查api</p>
    		<input type="button" name="" id="" value="测试append()" onclick="testAppend()"/>
    		<input type="button" name="" id="" value="测试appendTo()" onclick="testAppendTo()"/>
    		<input type="button" name="" id="" value="测试prepend()" onclick="testPrepend()"/>
    		<input type="button" name="" id="" value="测试prependTo()" onclick="testPrependTo()"/>
    		<input type="button" name="" id="" value="测试after()" onclick="testAfter()"/>
    		<input type="button" name="" id="" value="测试befer()" onclick="testBefore()"/>
    		<input type="button" name="" id="" value="测试wrap()" onclick="testWrap()"/>
    		<input type="button" name="" id="" value="测试replaceWith()" onclick="testReplaceWith()"/>
    		<input type="button" name="" id="" value="测试empty()" onclick="testEmpty()"/>
    		<input type="button" name="" id="" value="测试clone()" onclick="testClone()"/>
    		<b id="b1">你说啥?-</b>
    		<div id="showdiv">
    			<b>今天中午吃啥</b>
    		</div>
    		<u id="u1">-大白菜</u>
    		<p id="p1">我即将被包裹起来:使用wrap()</p>
    		<p id="p2">我即将被替换</p>
    		<hr>
    		<b id="b2">我即将被复制</b>
    		<p id="p3">我即将接收复制:</p>
    	</body>
    </html>
    

      

  • 相关阅读:
    WPF/Sliverlight ScrollViewer与Panel(2)
    OpenGL学习笔记(7)多边形绘制
    OpenGL学习笔记(10)抗锯齿
    OpenGL学习笔记(9)颜色混合
    GLUT函数说明(转)
    OpenGL学习笔记(8)显示列表
    C#操作IIS的代码
    完整解决Flash载入中文FLASH乱码问题
    用C#的IIS上配置用户账号
    ASP.NET定时调用WebService 运行后台代码
  • 原文地址:https://www.cnblogs.com/Scorpicat/p/12259284.html
Copyright © 2011-2022 走看看