高级网页设计Class-jQuery练习

最新推荐文章于 2024-04-20 09:46:43 发布
最新推荐文章于 2024-04-20 09:46:43 发布
阅读量215 收藏 1
点赞数
分类专栏： jQuery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41056807/article/details/88713911
版权

todolist（结合bootstrap布局和模态框）

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>todolist</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="css/bootstrap.css">
    <style>
        #todolist .form-control {
            display: inline-block;
            width: 250px;
            margin-right: 6px;
        }

        #todolist li {
            list-style: none;
            margin: 8px;
            border: 1px solid #eee;
            padding: 5px 15px
        }

        .rank {
            width: 20px;
            height: 20px;
            color: #fff;
            background-color: #0F0F0F;
            display: inline-block;
            line-height: 20px;
            text-align: center;
            margin-right: 8px;
            margin-left: 10px;
            border-radius: 50%;
        }

        .name {
            display: inline-block;
            margin-right: 10px;
        }

        .tl-update {
            margin: 0 8px;
        }

        .update {
            display: inline-block;
            visibility: hidden;
        }

        #todolist h2 {
            margin-bottom: 15px;
        }

        .add {
            margin: 40px;
            transition: all 1s;
            padding: 20px;
            box-shadow: 5px 0px 5px #eee, -5px 0 5px #eee,
            0 5px 5px #eee, 0 -5px 5px #eee;
            border: 1px solid #ccc;
            border-radius: 6px;
            background: linear-gradient(#fff, #eee);
        }

        .add .form-control {
            display: inline-block;
            width: 250px;
        }

        .add button {
            margin-left: 10px;
        }
    </style>
</head>
<body>
<div id="todolist" class="col-md-9 col-md-offset-2">
    <h2>todo-list
        <button class="btn btn-group-lg btn-success insert pull-right">新增</button>
    </h2>
    <ul>
        <li data-id="112">
            <span class="rank">1</span>
            <span class="name">名称</span>
            <div class="update">
                <input type="text" class="form-control ">
                <button class="btn btn-info btn-sm save">保存</button>
                <button class="btn btn-info btn-sm cancel">取消</button>
            </div>

            <button class="btn btn-primary  pull-right tl-del">删除</button>
            <button class="btn btn-primary pull-right tl-update">修改</button>
        </li>
        <li data-id="112">
            <span class="rank">2</span>
            <span class="name">名称</span>
            <div class="update">
                <input type="text" class="form-control ">
                <button class="btn btn-info btn-sm save">保存</button>
                <button class="btn btn-info btn-sm cancel">取消</button>
            </div>

            <button class="btn btn-primary  pull-right tl-del">删除</button>
            <button class="btn btn-primary pull-right tl-update">修改</button>
        </li>
        <li data-id="112">
            <span class="rank">3</span>
            <span class="name">名称</span>
            <div class="update">
                <input type="text" class="form-control ">
                <button class="btn btn-info btn-sm save">保存</button>
                <button class="btn btn-info btn-sm cancel">取消</button>
            </div>

            <button class="btn btn-primary  pull-right tl-del">删除</button>
            <button class="btn btn-primary pull-right tl-update">修改</button>
        </li>
        <li data-id="112">
            <span class="rank">4</span>
            <span class="name">名称</span>
            <div class="update">
                <input type="text" class="form-control ">
                <button class="btn btn-info btn-sm save">保存</button>
                <button class="btn btn-info btn-sm cancel">取消</button>
            </div>

            <button class="btn btn-primary  pull-right tl-del">删除</button>
            <button class="btn btn-primary pull-right tl-update">修改</button>
        </li>

    </ul>
    <div class="add">
        <span>请输入您要添加的内容：</span>
        <input type="text" class="form-control">
        <button class="btn btn-primary pull-right">取消</button>
        <button class="btn btn-primary pull-right">增加</button>

    </div>
</div>


<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">你确认要删除吗</h4>
            </div>
            <div class="modal-body">删除了的话他就永远消失了的！！</div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary delelte">确认删除</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script>
    $(function () {
        var index;//暂存要删除的行的序号，全局变量

        //点击修改按钮之后，显示修改的内容，在其中点击保存，可以保存修改，点击取消，可以取消修改。
        //复杂的修改使用model模态框实现，实现方法同修改按钮。
        //on,可以给javascript动态添加的html元素增加事件，如果用click增加事件，只能给网页中已有的html元素增加。

    

        $("#todolist button:last").click(function(){
            var text=$("#todolist input:last").val();//获得输入值
            var N=$("#todolist ul>li").length+1;//;//序号
            if(text!=""){
                var row=`
            <li data-id="112">
             <span class="rank">${N}</span>
             <span class="name">${text}</span>
             <div class="update">
             	<input type="text" class="form-control ">
             	<button class="btn btn-info btn-sm save">保存</NOtton>
             	<button class="btn btn-info btn-sm cancel">取消</NOtton>
             </div>

             <button class="btn btn-primary  pull-right tl-del">删除</NOtton>
             <button class="btn btn-primary pull-right tl-update">修改</NOtton>
       	  </li>
            `;
                $("#todolist ul").append(row);
                $("#todolist input:last").val("").focus();

                $("#todolist ul li:last .tl-update").on("click",function () {
                    $(this).prev().prev().css("visibility","visible").prev().hide();

                });

                // 删除
                // on动态添加事件
                $("#todolist .tl-del:last").on("click",function () {
                    index = $("#todolist .tl-del").index(this);//记录点击序号
                    // 打开模态框
                    $("#myModal").modal();

                });
            }
        });

        
        // update默认的增加
        // $().on("click",function () {
        $("#todolist li .tl-update").on("click",function(){
            $(this).prev().prev().css("visibility","visible").prev().hide();
            // $(this).siblings(".update").css("visibility",visible).prev().hide();

        });
        // // })

        // 删除
        // on动态添加事件
        $("#todolist .tl-del").on("click",function () {
            index = $("#todolist .tl-del").index(this);//记录点击序号
            // 打开模态框
            $("#myModal").modal();

        });
        // 模态框上的delete确认删除
        $("#myModal .delelte").click(function () {
            $("#todolist li").eq(index).remove();
            $("#myModal").modal("hide");

            paixu();//执行排序 序号
        });
        // 删除之后的排序 序号需要修改
        function paixu() {
            // var n =$("#todolist li").length;
            var xuhao=1;
            $("#todolist li").each(function (i,el) {//循环li(jQuery特有 for)

                $(this).children(".rank").text(xuhao++);
                console.log(xuhao);
            })
        }
    })


</script>
</body>
</html>

在这里插入图片描述

todolist（2）

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>todolist</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="css/bootstrap.css">
    <style>
        #todolist .form-control {
            display: inline-block;
            width: 250px;
            margin-right: 6px;
        }

        #todolist li {
            list-style: none;
            margin: 8px;
            border: 1px solid #eee;
            padding: 5px 15px
        }

        .rank {
            width: 20px;
            height: 20px;
            color: #fff;
            background-color: #0F0F0F;
            display: inline-block;
            line-height: 20px;
            text-align: center;
            margin-right: 8px;
            margin-left: 10px;
            border-radius: 50%;
        }

        .name {
            display: inline-block;
            margin-right: 10px;
        }

        .tl-update {
            margin: 0 8px;
        }

        .update {
            display: inline-block;
            visibility: hidden;
        }

        #todolist h2 {
            margin-bottom: 15px;
        }

        .add {
            margin: 40px;
            transition: all 1s;
            padding: 20px;
            box-shadow: 5px 0px 5px #eee, -5px 0 5px #eee,
            0 5px 5px #eee, 0 -5px 5px #eee;
            border: 1px solid #ccc;
            border-radius: 6px;
            background: linear-gradient(#fff, #eee);
        }

        .add .form-control {
            display: inline-block;
            width: 250px;
        }

        .add button {
            margin-left: 10px;
        }
    </style>
</head>

<body>
<div id="todolist" class="col-md-9 col-md-offset-2">
    <h2>todo-list
        <button class="btn btn-group-lg btn-success insert pull-right">新增</button>
    </h2>
    <ul>
        <li data-id="112">
            <span class="rank">1</span>
            <span class="name">名称</span>
            <div class="update">
                <input type="text" class="form-control ">
                <button class="btn btn-info btn-sm save">保存</button>
                <button class="btn btn-info btn-sm cancel">取消</button>
            </div>

            <button class="btn btn-primary  pull-right tl-del">删除</button>
            <button class="btn btn-primary pull-right tl-update">修改</button>
        </li>
        <li data-id="112">
            <span class="rank">2</span>
            <span class="name">名称</span>
            <div class="update">
                <input type="text" class="form-control ">
                <button class="btn btn-info btn-sm save">保存</button>
                <button class="btn btn-info btn-sm cancel">取消</button>
            </div>

            <button class="btn btn-primary  pull-right tl-del">删除</button>
            <button class="btn btn-primary pull-right tl-update">修改</button>
        </li>
        <li data-id="112">
            <span class="rank">3</span>
            <span class="name">名称</span>
            <div class="update">
                <input type="text" class="form-control ">
                <button class="btn btn-info btn-sm save">保存</button>
                <button class="btn btn-info btn-sm cancel">取消</button>
            </div>

            <button class="btn btn-primary  pull-right tl-del">删除</button>
            <button class="btn btn-primary pull-right tl-update">修改</button>
        </li>
        <li data-id="112">
            <span class="rank">4</span>
            <span class="name">名称</span>
            <div class="update">
                <input type="text" class="form-control ">
                <button class="btn btn-info btn-sm save">保存</button>
                <button class="btn btn-info btn-sm cancel">取消</button>
            </div>

            <button class="btn btn-primary  pull-right tl-del">删除</button>
            <button class="btn btn-primary pull-right tl-update">修改</button>
        </li>

    </ul>
    <div class="add">
        <span>请输入您要添加的内容：</span>
        <input type="text" class="form-control">
        <button class="btn btn-primary pull-right">取消</button>
        <button class="btn btn-primary pull-right">增加</button>

    </div>
</div>


<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">你确认要删除吗</h4>
            </div>
            <div class="modal-body">删除了的话他就永远消失了的！！</div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary delelte">确认删除</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script>
    $(function () {
        var index; //暂存要删除的行的序号，全局变量

        //点击修改按钮之后，显示修改的内容，在其中点击保存，可以保存修改，点击取消，可以取消修改。
        //复杂的修改使用model模态框实现，实现方法同修改按钮。
        //on,可以给javascript动态添加的html元素增加事件，如果用click增加事件，只能给网页中已有的html元素增加。
        $("#todolist button:last").click(function () {
            var text = $("#todolist input:last").val();
            var N = $("#todolist ul>li").length + 1;
            if (text != "") {
                var row =
                    `
			     <li data-id="112">
             <span class="rank">${N}</span>
             <span class="name">${text}</span>
             <div class="update">
             	<input type="text" class="form-control ">
             	<button class="btn btn-info btn-sm save">保存</button>
             	<button class="btn btn-info btn-sm cancel">取消</button>
             </div>
             
             <button class="btn btn-primary  pull-right tl-del">删除</button>
             <button class="btn btn-primary pull-right tl-update">修改</button>      	  	 
					 </li>	
					 `;
                $("#todolist ul").append(row);
                $("#todolist input:last").val("").focus();
                $("#todolist ul li:last .tl-update").on("click", update);
                $("#todolist ul li:last .save").on("click", edit);
                $("#todolist ul li:last .cancel").on("click", cancel);

                $("#todolist ul li:last .tl-del").on("click", function () {
                    index = $("#todolist .tl-del").index(this);
                    $("#myModal").modal();
                });
            }

        }); // end of add

        //start of update
        //on  动态增加添加点击事件
        $("#todolist li .tl-update").on("click", update);

        $("#todolist ul li .tl-del").on("click", function () {
            index = $("#todolist .tl-del").index(this);
            $("#myModal").modal();
        });

        $("#myModal .delelte").on("click", del);

        $(".save").on("click", edit);

        $(".cancel").on("click", cancel);

        $(".add button:first").on("click", cancel);

        $("#todolist button:first").click(function () {
            $("#todolist button:last").click();

        })

        function update() {
            $(this).prev().prev().css("visibility", "visible").prev().hide();
        }

        function del() {


            $("#todolist li").eq(index).remove();
            $("#myModal").modal("hide");
            //sort
            var n = 1;
            $("#todolist li").each(function () {
                $(this).children(".rank").text(n++);
            })
        }

        function edit() {
            $(this).parent().prev().text($(this).prev().val());
            $(this).prev().val(null).focus();
            $(this).parent().css("visibility", "hidden").prev().show();
        }

        function cancel() {
            $(this).parent().children("input").val(null).focus();
        }

    })
</script>
</body>

</html>
宝拉不想努力了
关注
专栏目录
基于Jquery的网站设计
12-27
该部分内容是本作者基于Jquery和Bootstrap制作的课程设计，内容包括五个页面和相关的JS代码。
【JQuery】JQuery使用——网页作业
一个记录积累的地方
07-19 9724
说一哈：此文章是网页设计最后的一个小作品，在最后使用JQuery做些交互效果时也参看别人的文章也有些不懂的地方，所以打算自己写一个做总结，如果想看JQuery部分的请直接空降第三节。 一、网页基本框架 1.站点结构导航 此文章是网页设计最后的一个小作品，在最后使用JQuery做些交互效果时也参看别人的文章也有些不懂的地方，所以打算自己写一个做总结，如果想看JQuery部分的请直接空降第三节。...
JQuery使用——网页作业
weixin_33811961的博客
07-19 935
说一哈：此文章是网页设计最后的一个小作品，在最后使用JQuery做些交互效果时也参看别人的文章也有些不懂的地方，所以打算自己写一个做总结，如果想看JQuery部分的请直接空降第三节。一、网页基本框架1.站点结构导航此文章是网页设计最后的一个小作品，在最后使用JQuery做些交互效果时也参看别人的文章也有些不懂的地方，所以打算自己写一个做总结，如果想看JQuery部分的请直接空降第三节。2.网页结构...
jQuery练习
09-25
应用jQuery设计的动态网页——购物车。 1.点击复选框按钮，选中要购买的物品，计算付款金额。 2.点击加号或减号，物品数量增加1或减去1，付款金额随着物品数量的改变而改变。 3.点击删除图标，删除该商品，同时减去该商品的钱数。
web网页基础设计大作业 html+css+纯jquery
01-04
网页基础设计大作业 欢迎共享，讨论
Curso-Jquery-Avanzado：高级Jquery
02-14
本教程“Curso-Jquery-Avanzado”专注于高级 jQuery 技术，旨在帮助开发者提升在网页开发中的技能水平。** ### 一、jQuery 基础回顾 在深入高级主题之前，我们需要回顾 jQuery 的基本用法。jQuery 通过 `$` 符号...
Ukesoppgaver-jQuery
05-10
标题"Ukesoppgaver-jQuery"表明这是一个关于jQuery的每周练习项目，可能是针对某个课程DATA1700的学习者设计的，旨在帮助他们逐步掌握jQuery的核心概念和技术。 **HTML与jQuery的关系** HTML（超文本标记语言）是...
JS/JQuery-第7章上机练习.zip
04-20
1. **选择器与DOM操作**：JQuery的选择器是其强大之处，它支持CSS选择器以及更高级的API，如`$("#id")`用于选取ID为特定值的元素，`$(".class")`选取所有具有指定类名的元素。在这一章中，你可能需要练习如何使用...
JS/JQuery-第6章上机练习.zip
04-20
在本资源"JS/JQuery-第6章上机练习.zip"中，我们聚焦于JavaScript的基础与jQuery库的应用。JavaScript是一种广泛用于网页和网络应用的编程语言，它为网页添加交互性和动态功能。jQuery则是一个轻量级、高性能的...
JQuery使用练习
09-26
本练习旨在帮助你熟悉并掌握jQuery的基本用法，包括选择器、事件、文档处理、函数以及属性的运用。 首先，让我们详细探讨jQuery的选择器。jQuery的选择器基于CSS选择器，允许你高效地选取DOM元素。例如，`$("#id")`...
html网页设计大作业
01-04
html网页设计大作业，关于植物，包含7个页面，css文件
期末作品网页制作css+js+jquery
01-29
作品实现了以下的js功能： （1） 使用正则表达式验证注册页面信息 （2） 网站首页动态显示系统时间 （3） 动态改变导航菜单样式 （4） 制作图片轮显效果 （5） 制作随光标滚动的广告图片效果 （6） 制作光标移到某图片上显示该图片对应大图 （7）制作弹出式广告，并3秒后自动关闭 主题是旅游网站，网页简单不炫酷但是页面很漂亮ins风。
jQuery购物网页经典制作案例
11-26
本文实例为大家分享了jQuery购物网页经典案例，供大家参考，具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>今日团购模块</title> <style type="text/css" rel="stylesheet"> *{ margin:0px ; padding:0px; font-size: 12px ; } #pruduce{ width:948px ; background-col
jquery作业
淮南草的博客
03-31 695
实现通过选择 checkbox 完成对应数据的修改 并保存 源码如下： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> <st...
网页制作课作业基于HTML+CSS+JavaScript+jquery仿慕课网教学培训网站设计实例 企业网站制作
Q_2709137139的博客
08-13 150
1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。2.网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。3.知识应用：技术方面主要应用了网页知识中的: Div+CSS、鼠标滑
大学生网页制作期末作业——html+css+javascript+jquery旅游官网6页 html大学生网站开发实践作业 web网页设计实例作业
最新发布
VX_WJ88950106的博客
04-20 737
👨‍🎓静态网站的编写主要是用 HTML DⅣV+ CSSJS等来完成页面的排版设计👩‍🎓，一般的网页作业需要融入以下知识点：div布局、浮动定位、高级css、表格、表单及验证、js轮播图、音频视频Fash的应用、uli、下拉导航栏、鼠标划过效果等知识点，学生网页作业源码，制作水平和原创度都适合学习或交作业用，记得点赞。 🏀 精彩专栏推荐👇🏻👇🏻👇🏻 💝 【作者主页——🔥获取更多优质源码】 💝 【web前端期末大作业——🔥🔥毕设项目精品实战案例(1000套)】 文章目录🌰一、网站题目👨‍🎓二、网站
低功耗高摆率Class-AB OTA电路设计与分析
"本文介绍了一种低功耗大摆率的Class-AB OTA(运算跨导放大器)电路设计，采用Class-AB复合型差分对、非线性电流镜传输和交叉耦合对管正反馈三种结构的结合，旨在提高在低功耗条件下的工作速度。设计的OTA在低功耗下...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值