利用Jqurey写一个输入内容增加并且可以删除,上下移动的标签



最终结果如下,输入内容增加标签并且可以删除,上下移动:


代码赏析:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>todolist</title>
<style type="text/css">
.list_con{
width:600px;
margin:50pxauto 0;
}
.inputtxt{
width:550px;
height:30px;
border:1pxsolid #ccc;
padding:0px;
text-indent:10px;           
}
.inputbtn{
width:40px;
height:32px;
padding:0px;
border:1pxsolid #ccc;
}
.list{
margin:0;
padding:0;
list-style:none;
margin-top:20px;
}
.list li{
height:40px;
line-height:40px;
border-bottom:1pxsolid #ccc;
}

.list li span{
float:left;
}

.list li a{
float:right;
text-decoration:none;
margin:010px;
}
</style>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function(){
// 1.获取元素
var $inputTxt = $("#txt1");
var $addBtn = $("#btn1");
var $list = $("#list");

// 按钮点击事件
$addBtn.click(function(){

// 2.判断是否为空
var sContent = $inputTxt.val();
if(sContent == ""){
alert("请输入内容");
return;
}

// 3.将新增的内容 添加到列表
// ul 加 li 内部增加
var sNewContent = $('<li><span>'+ sContent +'</span><a href="javascript:;" class="up"> ↑ </a><a href="javascript:;" class="down"> ↓ </a><a href="javascript:;" class="del">删除</a></li>');
$list.append(sNewContent);
// 清空输入框
$inputTxt.val("");
})

// 4.删除 上移动 下移动
$list.delegate("a","click",function(){
// 根据class 的名称 判断 到底是哪一个按钮
var sClassName = $(this).prop("class");

// 根据按钮做出选择
if(sClassName =="del"){//删除
$(this).parent().remove();

}else if(sClassName =="up"){//上移动
// 父元素
var $currentLi = $(this).parent();
// 前元素
var $preLi = $currentLi.prev();

// 5.判断 到头 和到尾
if($preLi.length == 0){
alert("到顶了");
return;
}
// 交换位置
$currentLi.insertBefore($preLi);
}else if(sClassName =="down"){//向下
// 父元素
var $currentLi = $(this).parent();
// 前元素
var $preLi = $currentLi.next();

// 5.判断 到头 和到尾
if($preLi.length == 0){
alert("到底了");
return;
}
// 交换位置
$currentLi.insertAfter($preLi);
}
})



})
</script>

</head>
<body>

<div class="list_con">
<h2>To do list</h2>
<input type="text" name="" id="txt1"class="inputtxt">
<input type="button" name="" value="增加"id="btn1" class="inputbtn">
<ul id="list"class="list">

<li><span>学习html</span><ahref="javascript:;"class="up"></a><a href="javascript:;"class="down"></a><a href="javascript:;"class="del">删除</a></li>
<li><span>学习css</span><ahref="javascript:;"class="up"></a><a href="javascript:;"class="down"></a><a href="javascript:;"class="del">删除</a></li>
<li><span>学习javascript</span><ahref="javascript:;"class="up"></a><a href="javascript:;"class="down"></a><a href="javascript:;"class="del">删除</a></li>

</ul>

</div>
</body>
</html>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/473945.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

java的注释、关键字、标识符、变量常量、数据类型、运算符、流程控制等

java的注释、关键字、标识符、变量常量、 数据类型、运算符、流程控制等 1. java概述 1.1 java的技术体系 Java SE&#xff1a;是Java的标准版&#xff0c;提供了完整的java核心API。 Java EE&#xff1a;是Java的企业版&#xff0c;主要用于开发…

LeetCode 851. 喧闹和富有(拓扑排序)

文章目录1. 题目2. 解题1. 题目 在一组 N 个人&#xff08;编号为 0, 1, 2, ..., N-1&#xff09;中&#xff0c;每个人都有不同数目的钱&#xff0c;以及不同程度的安静&#xff08;quietness&#xff09;。 为了方便起见&#xff0c;我们将编号为 x 的人简称为 "perso…

Jquery练习题—实现分组添加功能

实现分组添加功能&#xff1a; <title>Insert title here</title> <script type"text/javascript" src"js/jquery-1.12.4.min.js"></script> <script type"text/javascript"> $(function(){ //需求1&#xff1a;…

PostgreSQL参数学习:vacuum_defer_clean_age

官方文档&#xff1a; http://www.postgresql.org/docs/9.3/static/runtime-config-replication.html 为了防止slave端读取数据时&#xff0c;因为读到的是旧有数据而被强制取消&#xff0c;设定了这么一个以transaction为单位的值。 就是可以保证经过这么多的trsanction后&…

java的常用引用类、数组、String类

java的常用引用类、数组、String类 1. 常用引用类 1.1 Scanner 一个简单的文本扫描器类。 使用&#xff1a; //创建扫描器对象 Scanner sc new Scanner(System.in); //接收用户输入字符串类型的数据 String str sc.next(); //接收用户输入整数类型的数据 …

json-ajax-jsonp-cookie

json json是 JavaScript Object Notation的首字母缩写&#xff0c;单词的意思是javascript对象表示法&#xff0c;这里说的json指的是类似于javascript对象的一种数据格式&#xff0c;目前这种数据格式比较流行&#xff0c;逐渐替换掉了传统的xml数据格式。 json是轻量级,易解…

LeetCode 981. 基于时间的键值存储(哈希+二分查找)

文章目录1. 题目2. 解题1. 题目 创建一个基于时间的键值存储类 TimeMap&#xff0c;它支持下面两个操作&#xff1a; set(string key, string value, int timestamp) 存储键 key、值 value&#xff0c;以及给定的时间戳 timestamp。 get(string key, int timestamp) 返回先…

java的类与对象

java的类与对象 1 面向对象 1.1 面向对象与面向过程的区别 面向过程和面向对象都是解决问题的逻辑方法&#xff0c;面向过程是强调解决问题的步骤&#xff0c;可以先定义多个函数&#xff0c;在使用的使用调用函数即可&#xff1b;面向对象把问题分解成多个对象&#xff0c;…

学车总结

学车总结&#xff1a; 1、左脚离合&#xff0c;右脚油门和刹车。2、左脚脚跟着地&#xff0c;用脚尖控制离合。3、踩离合要快&#xff0c;松要慢点&#xff1b;刹车刚好相反。4、平时不要猛打方向盘&#xff0c;轻微调整就行&#xff0c;需要拐急弯要降低车速。5、换挡时需要将…

建设网站需要的Bootstrap介绍与操作

01-流体布局 流体布局,就是使用百分比来设置元素的宽度,元素的高度值固定, calc()&#xff1a;可以通过计算的方式给元素添加尺寸,比如:width:calc(25%-4px); box-sizing&#xff1a;content-box默认的盒子计算方式 2.border-box 盒子的计算方式从边框开始,盒子的尺寸,边框和…

04.卷积神经网络 W4.特殊应用:人脸识别和神经风格转换

文章目录1. 什么是人脸识别2. One-Shot学习3. Siamese 网络4. Triplet 损失5. 人脸验证与二分类6. 什么是神经风格迁移7. 深度卷积网络在学什么8. Cost function9. Content cost function10. Style cost function11. 一维到三维推广作业参考&#xff1a;吴恩达视频课深度学习笔…

java的封装,继承,多态

java的封装&#xff0c;继承&#xff0c;多态 1 封装 1.1 封装 指一种将抽象性函式接口的实现细节部份包装、隐藏起来的方法。封装可以被认为是一个保护屏障&#xff0c;防止该类的代码和数据被外部类定义的代码随机访问。要访问该类的代码和数据&#xff0c;必须通过严格的…

详解一个自己原创的正则匹配IP的表达式

第一种方法&#xff08;可以匹配有点毛病&#xff09;&#xff1a;检测IP地址的正则表达式 正则表达式&#xff1a; ((2[0-4]\d|25[0-5]|[01]?\d\d?)\.){3}(2[0-4]\d|25[0-5]|[01]?\d\d?) ((2[0-4]\d|25[0-5]|[01]?\d\d?)\.){3}(2[0-4]\d|25[0-5]|[01]?\d\d?) 红色块代…

亚洲赛前训练计划

回顾和加深所学算法。 主要回顾用途及使用方法。 图论方面&#xff1a; 1.dfs,bfs 2.强连通&#xff0c;点双连通&#xff0c;边双连通&#xff0c;2-sat 3.匈牙利算法km,以及不等式解 4.网络流&#xff0c;费用流 5.最短路&#xff0c;SPFA&#xff0c;dijstra, floay,斯坦纳树…

天池在线编程 2020年9月26日 日常周赛题解

文章目录1. K步编辑2. 折纸3. 字符串的不同排列4. 硬币排成线题目地址&#xff0c;请点这 1. K步编辑 给出一个只含有小写字母的字符串的集合以及一个目标串(target)&#xff0c;输出所有可以经过不多于 k 次操作得到目标字符串的字符串。 你可以对字符串进行一下的3种操作:…

JavaScript试题练习题

1. 我们可以在下列哪个HTML元素中放置javascript代码&#xff1f; A.< script > B.<javascript > C.< js > D.<scripting > ★标准答案&#xff1a;A 2. 预测以下代码片段的输出结果: var str alert(typeof str); A.. string B..un…

Java的static,final,代码块,内部类,抽象类,接口等

Java的static&#xff0c;final&#xff0c;代码块&#xff0c;内部类&#xff0c;抽象类&#xff0c;接口等 1 static关键字月final关键字 1.1 static static表示静态。可以修饰属性&#xff0c;方法&#xff0c;代码块内部类等&#xff0c;总结如下&#xff1a; 特点修饰属…

使用parted划分GPT分区(转)

parted命令可以划分单个分区大于2T的GPT格式的分区&#xff0c;也可以划分普通的MBR分区&#xff0c;fdisk命令对于大于2T的分区无法划分&#xff0c;所以用fdisk无法看到parted划分的GPT格式的分区。 Parted 命令分为两种模式&#xff1a;命令行模式和交互模式。 1、命令行模式…

04.卷积神经网络 W4.特殊应用:人脸识别和神经风格转换(作业:快乐屋人脸识别+图片风格转换)

文章目录作业1&#xff1a;快乐房子 - 人脸识别0. 朴素人脸验证1. 编码人脸图片1.1 使用卷积网络编码1.2 Triplet 损失2. 加载训练过的模型3. 使用模型3.1 人脸验证3.2 人脸识别作业2&#xff1a;神经风格转换1. 问题背景2. 迁移学习3. 神经风格转换3.1 计算内容损失3.2 计算风…

javascript练习题

1.用typeof bar”object”判断bar是否是一个object的潜在缺陷是什么&#xff1f;怎样才能避免这种缺陷&#xff1f; 答&#xff1a;尽管用typeof bar”object”是一个判断bar是一个object的可靠方法&#xff0c;但是令人惊讶的是&#xff0c;在JavaScript中null也是一个object!…