JavaScript基础-JQuery应用《上》

曾经终败给现在 2022-02-15 09:08 151阅读 0赞

## 一、选择器 ##

**1、基本选择器**

id选择器： \#id  
元素选择器：element  
class选择器：.class  
匹配所有元素： \*

<!DOCTYPE html>
    <html>
    <head>
    	<title>基本选择器</title>
    	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
    	<script  src="/js/jquery-3.3.1.min.js"></script>
    	
    	<style type="text/css">
    		div,span{
    			width: 180px;
    			height: 180px;
    			margin: 20px;
    			background: #9999CC;
    			border: #000 1px solid;
    			float:left;
    			font-size: 17px;
    			font-family:Roman;
    		}
    		div .mini{
    			width: 50px;
    			height: 50px;
    			background: #CC66FF;
    			border: #000 1px solid;
    			font-size: 12px;
    			font-family:Roman;
    		}
    		div .mini01{
    			width: 50px;
    			height: 50px;
    			background: #CC66FF;
    			border: #000 1px solid;
    			font-size: 12px;
    			font-family:Roman;
    		}
    	</style>
    	
    	<script type="text/javascript">
    		$(function () {
    			// <input type="button" value="改变 id 为 one 的元素的背景色为 红色"  id="b1"/>
    			$("#b1").click(function () {
    				$("#one").css("backgroundColor","red");
    			});
    			
    			// <input type="button" value=" 改变元素名为 <div> 的所有元素的背景色为 红色"  id="b2"/>
    			$("#b2").click(function () {
    				$("div").css("backgroundColor","red");
    			});
    			
    			// <input type="button" value=" 改变 class 为 mini 的所有元素的背景色为 红色"  id="b3"/>
    			$("#b3").click(function () {
    				$(".mini").css("backgroundColor","red");
    			});
    			
    			// <input type="button" value=" 改变所有的<span>元素和 id 为 two 的元素的背景色为红色"  id="b4"/>
    			$("#b4").click(function () {
    				$("span,#two").css("backgroundColor","red");
    			})
    		});	
    	</script>
    	
    </head>
    <body>
    	<input type="button" value="改变 id 为 one 的元素的背景色为 红色"  id="b1"/>
    	<input type="button" value=" 改变元素名为 <div> 的所有元素的背景色为 红色"  id="b2"/>
    	<input type="button" value=" 改变 class 为 mini 的所有元素的背景色为 红色"  id="b3"/>
    	<input type="button" value=" 改变所有的<span>元素和 id 为 two 的元素的背景色为红色"  id="b4"/>
    	<div id="one">
    		id为one
    	</div>
    	<div id="two" class="mini" >
    		id为two   class是 mini
    		<div  class="mini" >class是 mini</div>
    	</div>
    	<div class="one" >
    		class是 one
    		<div  class="mini" >class是 mini</div>
    		<div  class="mini" >class是 mini</div>
    	</div>
    	<div class="one" >
    		class是 one
    		<div  class="mini01" >class是 mini01</div>
    		<div  class="mini" >class是 mini</div>
    	</div>
    	<span class="spanone">class为spanone的span元素</span>
    	<span class="mini">class为mini的span元素</span>
    </body>
    </html>

**2、属性选择器**

包含某元素：\[attribute\]  
某元素：\[attribute=value\]  
不包含某元素：\[attribute!=value\]  
以某元素开始：\[attribute^=value\]  
以某元素结束：\[attribute$=value\]

<!DOCTYPE HTML html>
    <html>
    <head>
    	<title>属性过滤选择器</title>
    	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
    	<script  src="js/jquery-3.3.1.min.js"></script>
    	
    	<style type="text/css">
    		div,span{
    			width: 180px;
    			height: 180px;
    			margin: 20px;
    			background: #9999CC;
    			border: #000 1px solid;
    			float:left;
    			font-size: 17px;
    			font-family:Roman;
    		}
    		div .mini{
    			width: 50px;
    			height: 50px;
    			background: #CC66FF;
    			border: #000 1px solid;
    			font-size: 12px;
    			font-family:Roman;
    		}
    		div .mini01{
    			width: 50px;
    			height: 50px;
    			background: #CC66FF;
    			border: #000 1px solid;
    			font-size: 12px;
    			font-family:Roman;
    		}
    		div.visible{
    			display:none;
    		}
    	</style>
    	
    	<script type="text/javascript">
    		$(function () {
    			//<input type="button" value=" 含有属性title 的div元素背景色为红色"  id="b1"/>
    			$("#b1").click(function () {
    				$("div[title]").css("backgroundColor","red");
    			});
    	
    			//<input type="button" value=" 属性title值等于test的div元素背景色为红色"  id="b2"/>
    			$("#b2").click(function () {
    				$("div[title='test']").css("backgroundColor","red");
    			});
    	
    			//<input type="button" value=" 属性title值不等于test的div元素(没有属性title的也将被选中)背景色为红色"  id="b3"/>
    			$("#b3").click(function () {
    				$("div[title!='test']").css("backgroundColor","red");
    			});
    	
    			//<input type="button" value=" 属性title值 以te开始 的div元素背景色为红色"  id="b4"/>
    			$("#b4").click(function () {
    				$("div[title^='te']").css("backgroundColor","red");
    			});
    	
    			//<input type="button" value=" 属性title值 以est结束 的div元素背景色为红色"  id="b5"/>
    			$("#b5").click(function () {
    				$("div[title$='est']").css("backgroundColor","red");
    			});
    	
    			//<input type="button" value="属性title值 含有es的div元素背景色为红色"  id="b6"/>
    			$("#b6").click(function () {
    				$("div[title*='es']").css("backgroundColor","red");
    			})
    	
    			//<input type="button" value="选取有属性id的div元素，然后在结果中选取属性title值含有“es”的 div 元素背景色为红色"  id="b7"/>
    			$("#b7").click(function () {
    				$("div[id][title*='es']").css("backgroundColor","red");
    			})
    		});
    	</script>
    
    </head>
    <body>
    	<input type="button" value=" 含有属性title 的div元素背景色为红色"  id="b1"/>
    	<input type="button" value=" 属性title值等于test的div元素背景色为红色"  id="b2"/>
    	<input type="button" value=" 属性title值不等于test的div元素(没有属性title的也将被选中)背景色为红色"  id="b3"/>
    	<input type="button" value=" 属性title值 以te开始 的div元素背景色为红色"  id="b4"/>
    	<input type="button" value=" 属性title值 以est结束 的div元素背景色为红色"  id="b5"/>
    	<input type="button" value="属性title值 含有es的div元素背景色为红色"  id="b6"/>
    	<input type="button" value="选取有属性id的div元素，然后在结果中选取属性title值含有“es”的 div 元素背景色为红色"  id="b7"/>
    	<div id="one">
    		id为one   div
    	</div>
    	<div id="two" class="mini"  title="test">
    		id为two   class是 mini  div  title="test"
    		<div  class="mini" >class是 mini</div>
    	</div>
    	<div class="visible" >
    		class是 one
    		<div  class="mini" >class是 mini</div>
    		<div  class="mini" >class是 mini</div>
    	</div>
    	<div class="one" title="test02">
    		class是 one    title="test02"
    		<div  class="mini01" >class是 mini01</div>
    		<div  class="mini" style="margin-top:0px;">class是 mini</div>
    	</div>
    	<div class="visible" >
    		这是隐藏的
    	</div>
    	<div class="one">
    	</div>
    	<div id="mover" >
    		动画
    	</div>
    </body>
    </html>

**3、层级选择器**

祖先元素下所有后代：ancestor descendant  
parent元素下的所有child 元素：parent > child  
prev元素下的next元素：prev + next  
prev元素下的同辈siblings ：prev ~ siblings

<!DOCTYPE html>
    <html>
    <head>
    
    	<title>层次选择器</title>
    	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
    	<script  src="/js/jquery-3.3.1.min.js"></script>
    	
    	<style type="text/css">
    		div,span{
    			width: 180px;
    			height: 180px;
    			margin: 20px;
    			background: #9999CC;
    			border: #000 1px solid;
    			float:left;
    			font-size: 17px;
    			font-family:Roman;
    		}
    		div .mini{
    			width: 50px;
    			height: 50px;
    			background: #CC66FF;
    			border: #000 1px solid;
    			font-size: 12px;
    			font-family:Roman;
    		}
    		div .mini01{
    			width: 50px;
    			height: 50px;
    			background: #CC66FF;
    			border: #000 1px solid;
    			font-size: 12px;
    			font-family:Roman;
    		}
    	</style>
    	
    	<script type="text/javascript">
    		$(function () {
    			//<input type="button" value=" 改变 <body> 内所有 <div> 的背景色为红色"  id="b1"/>
    			$("#b1").click(function () {
    				$("body,div").css("backgroundColor","red");
    			});
    		
    			//<input type="button" value=" 改变 <body> 内子 <div> 的背景色为 红色"  id="b2"/>
    			$("#b2").click(function () {
    				$("body>div").css("backgroundColor","red");
    			});
    		});
    	</script>
    
    </head>
    <body>
    	<input type="button" value="保存"  class="mini" name="ok"  class="mini" />
    	<input type="button" value=" 改变 <body> 内所有 <div> 的背景色为红色"  id="b1"/>
    	<input type="button" value=" 改变 <body> 内子 <div> 的背景色为 红色"  id="b2"/>
    	<div id="one">
    	id为one  
    	</div>
    	<div id="two" class="mini" >
    		id为two   class是 mini 
    		<div  class="mini" >class是 mini</div>
    	</div>
    	<div class="one" >
    		class是 one
    		<div  class="mini" >class是 mini</div>
    		<div  class="mini" >class是 mini</div>
    	</div>
    	<div class="one">
    		class是 one
    		<div  class="mini01" >class是 mini01</div>
    		<div  class="mini" >class是 mini</div>
    	</div>
    	<span class="spanone">
    		span
    	</span>
    </body>
    </html>

**4.过滤选择器**

第一个元素：:first  
最后一个元素：:last  
去除某元素：:not(selector)  
偶数元素(索引"0"开始)：:even  
奇数元素(索引"0"开始)：:odd  
大于给定索引：:gt(index)  
等于给定索引：:eq(index)  
小于给定索引：:lt(index)  
匹配标题元素：:header

<!DOCTYPE html>
    <html>
    <head>
    
    	<title>基本过滤选择器</title>
    	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
    	<script  src="/js/jquery-3.3.1.min.js"></script>
    	
    	<style type="text/css">
    		div,span{
    			width: 180px;
    			height: 180px;
    			margin: 20px;
    			background: #9999CC;
    			border: #000 1px solid;
    			float:left;
    			font-size: 17px;
    			font-family:Roman;
    		}
    		div .mini{
    			width: 50px;
    			height: 50px;
    			background: #CC66FF;
    			border: #000 1px solid;
    			font-size: 12px;
    			font-family:Roman;
    		}
    		div .mini01{
    			width: 50px;
    			height: 50px;
    			background: #CC66FF;
    			border: #000 1px solid;
    			font-size: 12px;
    			font-family:Roman;
    		}
    	</style>
    	<script type="text/javascript">
    		$(function () {
    			//<input type="button" value=" 改变第一个 div 元素的背景色为 红色"  id="b1"/>
    			$("#b1").click(function () {
    				$("div:first").css("backgroundColor","red");
    			});
    			
    			//<input type="button" value=" 改变最后一个 div 元素的背景色为 红色"  id="b2"/>
    			$("#b2").click(function () {
    				$("div:last").css("backgroundColor","red");
    			});
    			
    			//<input type="button" value=" 改变class不为 one 的所有 div 元素的背景色为 红色"  id="b3"/>
    			$("#b3").click(function () {
    				$("div:not(.one)").css("backgroundColor","red");
    			});
    			
    			//<input type="button" value=" 改变索引值为偶数的 div 元素的背景色为 红色"  id="b4"/>
    			$("#b4").click(function () {
    				$("div:even").css("backgroundColor","red");
    			});
    			
    			//<input type="button" value=" 改变索引值为奇数的 div 元素的背景色为 红色"  id="b5"/>
    			$("#b5").click(function () {
    				$("div:odd").css("backgroundColor","red");
    			});
    			
    			//<input type="button" value=" 改变索引值为大于 3 的 div 元素的背景色为 红色"  id="b6"/>
    			$("#b6").click(function () {
    				$("div:gt(3)").css("backgroundColor","red");
    			});
    			
    			//<input type="button" value=" 改变索引值为等于 3 的 div 元素的背景色为 红色"  id="b7"/>
    			$("#b7").click(function () {
    				$("div:eq(3)").css("backgroundColor","red");
    			});
    			
    			// <input type="button" value=" 改变索引值为小于 3 的 div 元素的背景色为 红色"  id="b8"/>
    			$("#b8").click(function () {
    				$("div:lt(3)").css("backgroundColor","red");
    			});
    			
    			//<input type="button" value=" 改变所有的标题元素的背景色为 红色"  id="b9"/>
    			$("#b9").click(function () {
    				$(":header").css("backgroundColor","red");
    			});
    		});
    	</script>
    
    </head>
    <body>
    	<input type="button" value=" 改变第一个 div 元素的背景色为 红色"  id="b1"/>
    	<input type="button" value=" 改变最后一个 div 元素的背景色为 红色"  id="b2"/>
    	<input type="button" value=" 改变class不为 one 的所有 div 元素的背景色为 红色"  id="b3"/>
    	<input type="button" value=" 改变索引值为偶数的 div 元素的背景色为 红色"  id="b4"/>
    	<input type="button" value=" 改变索引值为奇数的 div 元素的背景色为 红色"  id="b5"/>
    	<input type="button" value=" 改变索引值为大于 3 的 div 元素的背景色为 红色"  id="b6"/>
    	<input type="button" value=" 改变索引值为等于 3 的 div 元素的背景色为 红色"  id="b7"/>
    	<input type="button" value=" 改变索引值为小于 3 的 div 元素的背景色为 红色"  id="b8"/>
    	<input type="button" value=" 改变所有的标题元素的背景色为 红色"  id="b9"/>
    	<div id="one">
    		id为one
    	</div>
    	<div id="two" class="mini" >
    		id为two   class是 mini
    		<div  class="mini" >class是 mini</div>
    	</div>
    	<div class="one" >
    		class是 one
    		<div  class="mini" >class是 mini</div>
    		<div  class="mini" >class是 mini</div>
    	</div>
    	<div class="one" >
    		class是 one
    		<div  class="mini01" >class是 mini01</div>
    		<div  class="mini" >class是 mini</div>
    	</div>
    </body>
    </html>

**5.表单过滤选择器**

文本框：:input  
文本域：:text  
密码框：:password  
单选按钮：:radio  
复选框：:checkbox  
提交按钮：:submit  
图像域：:image  
重置按钮：:reset  
按钮：:button  
文件域：:file  
隐藏元素：:hidden

<!DOCTYPE html>
    <html>
    <head>
    
    	<title>表单属性过滤选择器</title>
    	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
    	<script  src="/js/jquery-3.3.1.min.js"></script>
    	
    	<style type="text/css">
    		div,span{
    			width: 180px;
    			height: 180px;
    			margin: 20px;
    			background: #9999CC;
    			border: #000 1px solid;
    			float:left;
    			font-size: 17px;
    			font-family:Roman;
    		}
    		div .mini{
    			width: 50px;
    			height: 50px;
    			background: #CC66FF;
    			border: #000 1px solid;
    			font-size: 12px;
    			font-family:Roman;
    		}
    		div .mini01{
    			width: 50px;
    			height: 50px;
    			background: #CC66FF;
    			border: #000 1px solid;
    			font-size: 12px;
    			font-family:Roman;
    		}
    		#job{
    			margin: 20px;
    		}
    		#edu{
    			margin-top:-70px;
    		}
    	</style>
    	
    	<script type="text/javascript">
    		$(function () {
    			//<input type="button" value=" 利用 jQuery 对象的 val() 方法改变表单内可用 <input> 元素的值"  id="b1"/>
    			$("#b1").click(function () {
    				$("input[type='text']:enabled").val("aaa");
    			});
    			
    			//<input type="button" value=" 利用 jQuery 对象的 val() 方法改变表单内不可用 <input> 元素的值"  id="b2"/>
    			$("#b2").click(function () {
    				$("input[type='text']:disabled").val("bbbb");
    			});
    			
    			//<input type="button" value=" 利用 jQuery 对象的 length 属性获取复选框选中的个数"  id="b3"/>
    			$("#b3").click(function () {
    				alert($("input[type='checkbox']:checked").length);
    			});
    			
    			//<input type="button" value=" 利用 jQuery 对象的 length 属性获取下拉框选中的个数"  id="b4"/>
    			$("#b4").click(function () {
    				alert($("#job>option:selected").length);
    			})
    		});
    	</script>
    
    </head>
    <body>
    	<input type="button" value=" 利用 jQuery 对象的 val() 方法改变表单内可用 <input> 元素的值"  id="b1"/>
    	<input type="button" value=" 利用 jQuery 对象的 val() 方法改变表单内不可用 <input> 元素的值"  id="b2"/>
    	<input type="button" value=" 利用 jQuery 对象的 length 属性获取复选框选中的个数"  id="b3"/>
    	<input type="button" value=" 利用 jQuery 对象的 length 属性获取下拉框选中的个数"  id="b4"/>
    	<br><br>
    	<input type="text" value="不可用值1" disabled="disabled">
    	<input type="text" value="可用值1" >
    	<input type="text" value="不可用值2" disabled="disabled">
    	<input type="text" value="可用值2" >
    	<br><br>
    	<input type="checkbox" name="items" value="美容" >美容
    	<input type="checkbox" name="items" value="IT" >IT
    	<input type="checkbox" name="items" value="金融" >金融
    	<input type="checkbox" name="items" value="管理" >管理
    	<br><br>
    	<input type="radio" name="sex" value="男" >男
    	<input type="radio" name="sex" value="女" >女
    	<br><br>
    	<select name="job" id="job" multiple="multiple" size=4>
    		<option>程序员</option>
    		<option>中级程序员</option>
    		<option>高级程序员</option>
    		<option>系统分析师</option>
    	</select>
    	<select name="edu" id="edu">
    		<option>本科</option>
    		<option>博士</option>
    		<option>硕士</option>
    		<option>大专</option>
    	</select>
    	<br/>
    	<div id="two" class="mini" >
    		id为two   class是 mini  div
    		<div  class="mini" >class是 mini</div>
    	</div>
    	<div class="one" >
    		class是 one
    		<div  class="mini" >class是 mini</div>
    		<div  class="mini" >class是 mini</div>
    	</div>
    	<div class="one" >
    		class是 one
    		<div  class="mini01" >class是 mini01</div>
    		<div  class="mini" >class是 mini</div>
    	</div>
    </body>
    </html>

## 二、DOM操作 ##

**1、元素获取**

html内容：.html(\[val|fn\])  
文本内容：.text(\[val|fn\])  
value值：.val(\[val|fn|arr\])

<!DOCTYPE html>
    <html>
    <head>
    	<meta charset="UTF-8">
    	<title></title>
    	<script  src="/js/jquery-3.3.1.min.js"></script>
    	<script>
    		$(function () {
    			// 获取myinput 的value值
    			alert($("#myinput").val());
    			
    			// 获取mydiv的标签体内容
    			alert($("#mydiv").html());
    			
    			// 获取mydiv文本内容
    			alert($("#mydiv").text());
    		});
    	</script>
    
    </head>
    <body>
    	<input id="myinput" type="text" name="username" value="张三" /><br />
    	<div id="mydiv"><p><a href="#">标题标签</a></p></div>
    </body>
    </html>

**2、属性操作**

修改自定义元素：.attr(name|pro|key,val|fn)  
移除自定义元素：.removeAttr(name)  
修改内置元素：.prop(n|p|k,v|f)  
移除内置元素：.removeProp(name)

<!DOCTYPE html>
    <html>
    <head>
    	
    	<title>获取属性</title>
    	<meta charset="UTF-8">
    	<script  src="/js/jquery-3.3.1.min.js"></script>
    	
    	<script type="text/javascript">
    		$(function () {
    			//获取北京节点的name属性值
    			alert($("#bj").attr("name"));
    			
    			//设置北京节点的name属性的值为dabeijing(可通过F12校验查看)
    			$("#bj").attr("name","dabeijing");
    			
    			//新增北京节点的discription属性 属性值是didu
    			$("#bj").attr("discription","didu");
    			
    			//删除北京节点的name属性并检验name属性是否存在
    			$("#bj").removeAttr("name");
    			
    			//获得hobby的的选中状态
    			alert($("#hobby").prop("checked"));
    			
    		});
    	</script>
    
    </head>
    <body>
    	<ul>
    		<li id="bj" name="beijing" xxx="yyy">北京</li>
    		<li id="tj" name="tianjin">天津</li>
    	</ul>
    	<input type="checkbox" id="hobby" checked/>
    </body>
    </html>

**3、样式操作**

添加样式：.addClass(class|fn)  
移除样式：.removeClass(\[class|fn\])  
切换样式：.toggleClass(class|fn\[,sw\])

<!DOCTYPE html>
    <html>
    <head>
    
    	<title>样式操作</title>
    	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
    	<script  src="/js/jquery-3.3.1.min.js"></script>
    	
    	<style type="text/css">
    		.one{
    			width: 200px;
    			height: 140px;
    			margin: 20px;
    			background: red;
    			border: #000 1px solid;
    			float:left;
    			font-size: 17px;
    			font-family:Roman;
    		}
    		div,span{
    			width: 140px;
    			height: 140px;
    			margin: 20px;
    			background: #9999CC;
    			border: #000 1px solid;
    			float:left;
    			font-size: 17px;
    			font-family:Roman;
    		}
    		div .mini{
    			width: 40px;
    			height: 40px;
    			background: #CC66FF;
    			border: #000 1px solid;
    			font-size: 12px;
    			font-family:Roman;
    		}
    		div .mini01{
    			width: 40px;
    			height: 40px;
    			background: #CC66FF;
    			border: #000 1px solid;
    			font-size: 12px;
    			font-family:Roman;
    		}
    		/*待用的样式*/
    		.second{
    			width: 300px;
    			height: 340px;
    			margin: 20px;
    			background: yellow;
    			border: pink 3px dotted;
    			float:left;
    			font-size: 22px;
    			font-family:Roman;
    		}
    	</style>
    	
    	<script type="text/javascript">
    		$(function () {
    			//<input type="button" value="采用属性增加样式(改变id=one的样式)"  id="b1"/>
    			$("#b1").click(function () {
    				$("#one").prop("class","second");
    			});
    			
    			//<input type="button" value=" addClass"  id="b2"/>
    			$("#b2").click(function () {
    				$("#one").addClass("second");
    			});
    			
    			//<input type="button" value="removeClass"  id="b3"/>
    			$("#b3").click(function () {
    				$("#one").removeClass("second");
    			})
    			
    			//<input type="button" value=" 切换样式"  id="b4"/>
    			$("#b4").click(function () {
    				$("#one").toggleClass("second");
    			});
    			//<input type="button" value=" 通过css()获得id为one背景颜色"  id="b5"/>
    			$("#b5").click(function () {
    				alert($("#b5").css("backgroundColor"));
    			});
    			
    			//<input type="button" value=" 通过css()设置id为one背景颜色为绿色"  id="b6"/>
    			$("#b6").click(function () {
    				$("#one").css("backgroundColor","green");
    			});
    		});
    	</script>
    
    </head>
    <body>
    	<input type="button" value="采用属性增加样式(改变id=one的样式)"  id="b1"/>
    	<input type="button" value=" addClass"  id="b2"/>
    	<input type="button" value="removeClass"  id="b3"/>
    	<input type="button" value=" 切换样式"  id="b4"/>
    	<input type="button" value=" 通过css()获得id为one背景颜色"  id="b5"/>
    	<input type="button" value=" 通过css()设置id为one背景颜色为绿色"  id="b6"/>
    	<div id="one">
    		id为one 
    	</div>
    	<div id="two" class="mini" >
    		id为two   class是 mini 
    		<div  class="mini" >class是 mini</div>
    	</div>
    	<div class="one" >
    		class是 one 
    		<div  class="mini" >class是 mini</div>
    		<div  class="mini" >class是 mini</div>
    	</div>
    	<div class="one" >
    		class是 one 
    		<div  class="mini01" >class是 mini01</div>
    		<div  class="mini" >class是 mini</div>
    	</div>
    	<span class="spanone">    
    		span
    	</span>
    </body>
    </html>

## 三、节点对象操作 ##

**1、追加移动：避免混淆内外各选一种**

内部插入

后插入：.append(content|fn)  
前插入：.appendTo(content)  
前插入：.prepend(content|fn)  
后插入：.prependTo(content)

外部追加

之后追加：.after(content|fn)  
之前追加：.before(content|fn)  
之前追加：.insertAfter(content)  
之后追加：.insertBefore(content)

<!DOCTYPE html>
    <html>
    <head>
    	<title>内部插入脚本</title>
    	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
    	<script  src="/js/jquery-3.3.1.min.js"></script>
    	
    	<style type="text/css">
    		div,span{
    			width: 140px;
    			height: 140px;
    			margin: 20px;
    			background: #9999CC;
    			border: #000 1px solid;
    			float:left;
    			font-size: 17px;
    			font-family:Roman;
    		}
    		div .mini{
    			width: 30px;
    			height: 30px;
    			background: #CC66FF;
    			border: #000 1px solid;
    			font-size: 12px;
    			font-family:Roman;
    		}
    		div.visible{
    			display:none;
    		}
    	</style>
    	
    	<script type="text/javascript">
    		$(function () {
    			//<input type="button" value="将反恐放置到city的后面"  id="b1"/>
    			$("#b1").click(function () {
    				$("#city").append($("#fk"));
    			});
    			//<input type="button" value="将反恐放置到city的最前面"  id="b2"/>
    			$("#b2").click(function () {
    				$("#city").prepend($("#fk"));
    			});
    			//<input type="button" value="将反恐插入到天津后面"  id="b3"/>
    			$("#b3").click(function () {
    				$("#tj").after($("#fk"));
    			});
    			//<input type="button" value="将反恐插入到天津前面"  id="b4"/>
    			$("#b4").click(function () {
    				$("#tj").before($("#fk"));
    			});
    		});
    	</script>
    </head>
    <body>
    	<input type="button" value="将反恐放置到city的后面"  id="b1"/>
    	<input type="button" value="将反恐放置到city的最前面"  id="b2"/>
    	<input type="button" value="将反恐插入到天津后面"  id="b3"/>
    	<input type="button" value="将反恐插入到天津前面"  id="b4"/>
    	<ul id="city">
    		<li id="bj" name="beijing">北京</li>
    		<li id="tj" name="tianjin">天津</li>
    		<li id="cq" name="chongqing">重庆</li>
    	</ul>
    	<ul id="love">
    		<li id="fk" name="fankong">反恐</li>
    		<li id="xj" name="xingji">星际</li>
    	</ul>
    	<div id="foo1">Hello1</div>  
    </body>
    </html>

**2、节点删除**

删除自己及后代：.empty()  
后代后代保留自己：.remove(\[expr\])

<!DOCTYPE html>
    <html>
    <head>
    
    	<title>删除节点</title>
    	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
    	<script  src="/js/jquery-3.3.1.min.js"></script>
    	
    	<style type="text/css">
    		div,span{
    			width: 140px;
    			height: 140px;
    			margin: 20px;
    			background: #9999CC;
    			border: #000 1px solid;
    			float:left;
    			font-size: 17px;
    			font-family:Roman;
    		}
    	</style>
    	
    	<script type="text/javascript">
    		$(function () {
    			// <input type="button" value="删除<li id='bj' name='beijing'>北京</li>"  id="b1"/>
    			$("#b1").click(function () {
    				$("#bj").remove();
    			});
    			// <input type="button" value="删除city所有的li节点   清空元素中的所有后代节点(不包含属性节点)"  id="b2"/>
    			$("#b2").click(function () {
    				$("#city").empty();
    			})
    		  });
    		</script>
    </head>
    
    <body>
    	<input type="button" value="删除<li id='bj' name='beijing'>北京</li>"  id="b1"/>
    	<input type="button" value="删除所有的子节点   清空元素中的所有后代节点(不包含属性节点)"  id="b2"/>
    	<ul id="city">
    		<li id="bj" name="beijing">北京</li>
    		<li id="tj" name="tianjin">天津</li>
    		<li id="cq" name="chongqing">重庆</li>
    	</ul>
    	<p class="hello">Hello</p> how are <p>you?</p> 
    </body>
    </html>

原文：[https://blog.csdn.net/mollen/article/details/83021818][https_blog.csdn.net_mollen_article_details_83021818]

[https_blog.csdn.net_mollen_article_details_83021818]: https://blog.csdn.net/mollen/article/details/83021818