jQuery新增列表

最新推荐文章于 2022-03-21 19:48:19 发布

小歘欻

最新推荐文章于 2022-03-21 19:48:19 发布

阅读量305

点赞数

分类专栏： HTML 文章标签： html5 javascript jquery css

本文链接：https://blog.csdn.net/qq_33840688/article/details/118876921

版权

HTML 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
		<script>
			$(function(){
				var $btn = $('#btn')
				var $txt = $('#txt')
				
				$btn.click(function(){
					var $val = $txt.val()
					if($val){
						// href='javascript:;' 什么都不做a标签也有样式
						$('#con_list ul').append('<li><span>'+$val+'</span><a href="#" class="up">↑</a><a href="#" class="down">↓</a><a href="#" class="del">删除</a></li>')
						
						// 设置完成后清空输入框
						$txt.val('')
					}
					else{
						alert('请输入值')
					}
				})
				// $('#con_list li').delegate('.del','click',function(){
				// 	$(this).parent().remove()
				// })
				// $('#con_list li').delegate('.up','click',function(){
				// 	// 在当前父级元素的后面插入他前一个父级元素
				// 	$(this).parent().insertBefore($(this).parent().prev())
				// })
				// $('#con_list li').delegate('.down','click',function(){
				// 	$(this).parent().insertAfter($(this).parent().next())
				// })
				
				// 只用一次委托 节省资源
				$('#con_list ul').delegate('a','click',function(){
					var $handle = $(this).prop('class')
					// 将当前元素的父级元素插入到 当前父级元素的上一个同级元素 之前
					if($handle == 'up'){
						$(this).parent().insertBefore($(this).parent().prev())
					}
					if($handle == 'del'){
						$(this).parent().remove()
					}
					if($handle == 'down'){
						$(this).parent().insertAfter($(this).parent().next())
					}
				})
			})
		</script>
	</head>
	<style>
		*{
			padding: 0px;
		}
		#con_list{
			height: 500px;
			width: 600px;
			margin: 0 auto;
		}
		#txt{
			width: 500px;
			height: 30px;
			font-size: 20px;
		}
		#btn{
			width: 80px;
			height: 35px;
			font-size: 20px;
		}
		ul{
			list-style: none;
			margin-top: 50px;
		}
		li{
			border-bottom: 1px solid black;
			height: 50px;
			line-height: 50px;
		}
		a{
			float: right;
			text-decoration: none;
			margin-right: 15px;
		}
	</style>
	<body>
		
		<div id="con_list">
			<h1>学习目标</h1>
			<input type="text" name="" id="txt" value="" />
			<input type="button" name="" id="btn" value="增加" />
			<ul>
				<li><span>学习css</span><a href="#" class="up">↑</a><a href="#" class="down">↓</a><a href="#" class="del">删除</a></li>
				<li><span>学习html</span><a href="#" class="up">↑</a><a href="#" class="down">↓</a><a href="#" class="del">删除</a></li>
				<li><span>学习python</span><a href="#" class="up">↑</a><a href="#" class="down">↓</a><a href="#" class="del">删除</a></li>
			</ul>
		</div>
	</body>
</html>

小歘欻

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery新增列表

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript" src="jquery-1.9.1.min.js"></script> <script> $(function(){ var $btn = $('#btn') v.
复制链接

扫一扫