JavaScript基础204——Jquery应用《上》

其他 2018-10-18 16:41:13 阅读次数: 0
一、选择器
  • 注意点： 案例中引入的/js/jquery-3.3.1.min.js文件放在html文件同路径下

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]
  • 某元素包含某些值：[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>

猜你喜欢

转载自blog.csdn.net/mollen/article/details/83021818
204
今日推荐
Linus “吃狗粮”最积极！
开源日报 | Winamp播放器即将开源；生成式AI之战升级第二轮；Linus“吃狗粮”最积极；AI进入泡沫前期；吴泳铭为阿里云带来了什么？
NetBSD 禁止提交由 AI 生成的代码
Apache Doris 2.0.10 版本正式发布！
开源日报 | 大模型开战；大模型独角兽被曝卖身；周鸿祎建议谷歌开源所有产品；最大开源AI社区提供1000万美元共享GPU
开源日报 | Chrome内置Gemini的意义不在于Gemini；中国AI追随之路的五大误区；ECharts创始人“下海”养鱼；谷歌I/O开发者大会什么都有，只是没有惊喜
微软回应中国区AI团队“打包赴美”传闻
周排行
SVN服务端安装在阿里云
实战 | 相机标定
webpack核心概念
note20——》只要肯低头吃苦，人生就会有救
PAT甲级 1062 Talent and Virtue （25 分）排序
NG Toolset开发笔记--5GNR Resource Grid（26）
如何对待上司
oracle命令
第9章 STL迭代器
logstash使用es映射模板
每日归档
更多
2024-05-20(36)
2024-05-19(0)
2024-05-18(4)
2024-05-17(34)
2024-05-16(6)
2024-05-15(24)
2024-05-14(0)
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022