Java复习打卡day43

于 2021-05-14 11:52:46 发布
阅读量82 收藏
点赞数
文章标签： jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_51630304/article/details/116785653
版权

Java复习打卡day43

jquery实例–文档处理–内部插入

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>jQuery实例--文档处理--内部插入</h1>
    <ul>
        <li>苹果</li>
        <li>李子</li>
        <li>火龙果</li>
    </ul>
    名称: <input type="text" name="tname"><br><br>
    <button>前插入</button><br><br>
    <button>后插入</button><br><br>
</body>
<script src="./jquery-3.5.0.min.js"></script>
<script>
    //jquery入口
    $(function(){
        //为按钮绑定点击事件；
        $('button').click(function(){
            //获取输入框中的内容
            var tname = $('input[name = "tname"]').val();
            switch($(this).html()){
                case "前插入":
                    $('<li>'+tname+'</li>').prependTo('ul');
                    break;
                case "后插入":
                    $('<li>'+tname+'</li>').appendTo('ul')
                    break;
            }
        });
    });
</script>
</html>

jquery实例–文档处理–insert

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>jQuery实例</h1>
    <ul class="uu">
        <li class="active">苹果</li>
        <li>香蕉</li>
        <li>西瓜</li>
        <li>樱桃</li>
        <li>白梨</li>
    </ul>
    名称：<input type="text" name="tname"><br><br>
    <button>前添加</button><br><br>
    <button>后追加</button>
</body>
<script src="./jquery-3.5.0.min.js"></script>
<script>
    //jquery入口
    $(function(){
        //获取所有li标签，并绑定点击事件
        $('ul.uu li').click(function(){
            $('ul.uu li').removeClass('active');
            $(this).addClass('active');
        });
        //获取按钮并绑定点击事件
        $('button').click(function(){   
            // 获取输入框内的内容
            var tname = $('input[name = "tname"]').val();
            //获取按钮文本并判断执行操作
            switch($(this).html()){
                case "前添加":
                    $('<li>'+tname+'</li>').insertBefore('li.active');
                    break;
                case "后追加":
                    $('<li>'+tname+'</li>').insertAfter('li.active').click(function(){
                        $('ul.uu li').removeClass('active');
                        $(this).addClass('active');
                    });
                    break;
            }
        });
        
    });
    

</script>
</html>

jquery实例–文档处理–外部插入和删除

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1 id="hid">jQuery实例--文档处理--外部插入和删除</h1>
    <form >
        姓名：<input type="text" title="姓名" name="uname"><br><br>
        年龄：<input type="text" title="年龄" name="age"><br><br>
        电话：<input type="text" title="电话" name="phone"><br><br>
        邮箱：<input type="text" title="邮箱" name="email"><br><br>
        地址：<input type="text" title="地址" name="address"><br><br>
    </form>

    <script src="./jquery-3.5.0.min.js"></script>
    <script>
        //jquery入口
        $(function(){
            //获取所有的输入框，并绑定获取焦点和失去焦点的事件
            $('input:text').focus(function(){
                //获的焦点事件处理
                var title = $(this).prop('title');
                $('<span>请输入正确的'+title+'信息</span>').insertAfter(this).css('color','red');
            }).blur(function(){
                //失去焦点事件处理
                $(this).next('span').remove();
            });
        });
    </script>

</body>
</html>

jquery实例–文档处理–删除操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul li{margin: 0px; padding: 0px;}
        ul{list-style: none;}
        ul li{line-height: 40px;padding-left: 20px;margin: 5px;background-color: #ddd;}
        ul li:hover{background-color: orange;}
        ul li.active{background-color: pink;}
    </style>
</head>
<body>
    <h1>jQuery实例--文档处理--删除操作</h1>
    <ul>
        <li>苹果</li>
        <li>香蕉</li>
        <li>西瓜</li>
        <li>芒果</li>
    </ul>
    <br><br>
    <button>删除</button><br><br>
    <button>清空</button>
</body>
<script src="./jquery-3.5.0.min.js"></script>
<script>
    //jquery入口
    $(function(){
        // 获取所有的li标签，绑定点击事件
        $('ul li').click(function(){
            $(this).toggleClass('active');
        });
        //获取两个按钮绑定点击事件
        $('button').click(function(){
            switch($(this).html()){
                case '删除':
                    $('ul li.active').remove();
                    break;  
                case '清空':
                    $('ul').empty();
                    break;
            }
        });
    });
</script>
</html>

jquery实例–显示，隐藏，切换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>jquery--实例</h1>
    <button>显示</button>
    <button>隐藏</button>
    <button>切换</button><br><br>
    <img src="./11.jpg" width="300px">
    <script src="./jquery-3.5.0.min.js"></script>
    <script>
        //jquery入口
        $(function(){
            //获取按钮绑定点击事件
            $('button').click(function(){
                //判断按钮上的文本，判断应当执行的操作
                switch($(this).html()){
                    case "显示":
                        // $('img').show('slow');
                        // $('img').slideDown('slow');
                        $('img').fadeIn('slow');
                        break;
                    case "隐藏":
                        // $('img').hide('slow');
                        // $('img').slideUp('slow');
                        $('img').fadeOut('slow');
                        break;
                    case "切换":
                        // $('img').toggle('slow');
                        // $('img').slideToggle('slow');
                        $('img').fadeToggle('slow');
                        break;
                }
            });
        });
    </script>
</body>
</html>

jquery实例–效果展示–短信墙特效

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul,li{margin: 0px;padding: 0px;}
        ul{width: 400px;list-style: none;}
        ul li{line-height: 80px;margin-bottom: 2px;background-color: #ddd;}
        #did{width: 400px;height: 326px;border: 1px solid orange;overflow: hidden; }
    </style>
</head>
<body>
    <h1>jQuery实例--jQuery效果展示--短信墙特效</h1>
    <div id="did">
        <ul class="uu">
            <li>苹果</li>
            <li>白梨</li>
            <li>香蕉</li>
            <li>芒果</li>
            <li>西瓜</li>
            <li>葡萄</li>
        </ul>
    </div>
</body>
<script src="./jquery-3.5.0.min.js"></script>
<script>
    //jquery入口
    $(function(){
        //定时每隔三秒执行一次
        setInterval(function(){
            //向下滑动显示
            //设置li标签最后的标签为隐藏，插入到最上面，并设置滑动显示
            // $('ul.uu li:last').hide().prependTo('ul.uu').slideDown('slow');

            //向上滑动展示
            $('ul.uu li:first').slideUp('slow',function(){
                $(this).appendTo('ul.uu').show();
            });
        },3000);
    });
</script>
</html>

jquery实例–效果展示–树形菜单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul{display: none;}
        h4{line-height: 40px;}
        h4:hover{background-color: #ddd;}
    </style>
</head>
<body>
    <h1>jQuery实例--jQuery效果展示--树形菜单</h1>
    <h4>水果菜单列表</h4>
    <ul>
        <li>苹果</li>
        <li>西瓜</li>
        <li>李子</li>
    </ul>
    <h4>水果菜单列表</h4>
    <ul>
        <li>苹果</li>
        <li>西瓜</li>
        <li>李子</li>
    </ul>
    <h4>水果菜单列表</h4>
    <ul>
        <li>苹果</li>
        <li>西瓜</li>
        <li>李子</li>
    </ul>
    <script src="./jquery-3.5.0.min.js"></script>
    <script>
        //获取所有的h4标签绑定点击事件
        $('h4').click(function(){
            $(this).next('ul').slideToggle('slow');
        });
    </script>
</body>
</html>
weixin_51630304
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Java复习打卡day13
weixin_51630304的博客
03-14 107
Java复习打卡day13九大常用类库ObjectsSystemDateCalendarStringDateFormatBigDecimalMathArrays 九大常用类库 Objects System Date Calendar String DateFormat BigDecimal Math Arrays
Java复习打卡day40
weixin_51630304的博客
05-06 72
Java复习打卡day40XML DOM的介绍 XML DOM的介绍 1.基本介绍： XML DOM 定义了访问和处理xml文档的标准方法。 XML DOM是 XML Document OObject Model 的缩写，即XML文档对象模型。 2.在学习之前，您应当具备的基础： ·HTML/XHTML ·JavaScript ·XML 如果大家在学之前没有掌握这些知识，可以查阅js 手册（网址：https://www.w3school.com.cn/xmldom/dom_intro.asp） 3.什么是D
Java复习打卡day21
weixin_51630304的博客
03-23 104
Java复习打卡day21线程池定长线程池缓存线程池单线程线程池周期性定长线程池Lambda表达式网络编程概述 线程池 线程池概述 为什么会出现线程池的概念？ 其实现场呢个执行任务的阶段分为四个步骤： 1.创建线程 2.创建任务 3.执行任务 4.结束线程 而，在这四个步骤中，真正起作用的是中间的两个，但是他们所消耗的时间却只占了总时间的5%， 所以有大量的时间被创建线程和结束线程占用了，当线程的数量增多时，这样的无用时间浪费只会降低程序的性能 所以就有了线程池的概念。
Java复习打卡day41
weixin_51630304的博客
05-07 132
Java复习打卡day41正则表达式匹配与搜索语法替换与分割表单验证JQuery基本使用 正则表达式 匹配与搜索 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=
Java学习打卡Day18
12-22
Java中的接口是面向对象编程的重要组成部分，它定义了一组方法签名，不包含任何具体实现。在Java学习中，了解接口的多态性及其应用是非常关键的。多态性允许我们用一个父类型的引用来指向子类型对象，这样就可以在不...
小白的20天Java学习打卡day1
12-22
【小白的20天Java学习打卡day1】 学习Java编程的第一步通常是理解基本概念，包括软件的本质、操作系统、编程语言的作用以及如何在Windows系统中进行基础操作。在本篇学习笔记中，我们将探讨这些关键点。 1. **什么...
员工打卡系统_java_java系统_打卡_
10-03
员工打卡系统是一个基于Java语言开发的应用程序，主要用于管理和记录企业员工的上下班打卡情况。在IT行业中，此类系统是企业日常运营的重要组成部分，因为它能够准确地跟踪员工的工作时间，提高人力资源管理效率。...
Java打卡系统源码.zip
05-17
Java打卡系统源码 Java打卡系统源码 Java打卡系统源码 Java打卡系统源码 Java打卡系统源码 Java打卡系统源码 Java打卡系统源码 ...
小白的20天Java学习打卡day2
12-22
太原理工大学机器人团队20天学习打卡day2 学习内容：Java 学习网站：b站 day02 今天的内容比昨天多很多，也更难理解，希望能坚持下去 1、打开DOS命令窗口，执行java HelloWorld,执行原理 java.exe命令会启动JVM JVM...
光纤振动传感器的研究.doc
07-16
传感器
光纤位移传感器实验.doc
07-16
传感器
传感器原理课程实践.doc
07-16
传感器
2018年度产成品出入库单excel模板
07-16
【作品名称】：2018年度产成品出入库单excel模板 【适用人群】：适用于希望学习不同技术领域的小白或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。
西藏民族大学考研，45个专业课历年考试真题及答案汇总，备考资料题库笔记，专业课调剂信息查询.pdf
07-16
西藏民族大学考研，45个专业课历年考试真题及答案汇总，备考资料题库笔记，专业课调剂信息查询.pdf
材料出库汇总表Excel模板
07-16
【作品名称】：材料出库汇总表Excel模板 【适用人群】：适用于希望学习不同技术领域的小白或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。
高校学生管理系统的设计与实现-开题报告.doc
最新发布
07-16
高校学生管理系统的设计与实现-开题报告.doc
java员工打卡签到代码
06-01
Java员工打卡签到代码的实现方式有很多种，以下是其中一种可能的实现方式： ```java import java.util.Date; public class Employee { private String name; private Date lastSignIn; public Employee(String name) { this.name = name; } public void signIn() { Date now = new Date(); System.out.println(name + "签到成功，时间：" + now); lastSignIn = now; } public void signOut() { Date now = new Date(); System.out.println(name + "签退成功，时间：" + now); } public void checkInStatus() { if (lastSignIn == null) { System.out.println(name + "尚未签到"); } else { System.out.println(name + "上次签到时间：" + lastSignIn); } } } ``` 上面的代码定义了一个`Employee`类，其中包含了员工的姓名和上次签到时间。类中有三个方法：`signIn()`、`signOut()`和`checkInStatus()`。`signIn()`方法表示员工签到，会打印出员工姓名和当前时间，并将当前时间记录为上次签到时间；`signOut()`方法表示员工签退，会打印出员工姓名和当前时间；`checkInStatus()`方法表示查询员工的签到状态，会打印出员工姓名和上次签到时间（如果已经签到过），否则会提示尚未签到。 如果要使用这段代码，可以在其他类中创建`Employee`对象，并调用其中的方法来完成打卡签到功能。例如： ```java public class Main { public static void main(String[] args) { Employee emp1 = new Employee("张三"); emp1.signIn(); emp1.checkInStatus(); emp1.signOut(); } } ``` 这段代码创建了一个名为`emp1`的`Employee`对象，姓名为“张三”。接着调用了`signIn()`方法进行签到，`checkInStatus()`方法查询签到状态，最后调用了`signOut()`方法进行签退。运行这段代码后，会打印出以下结果： ``` 张三签到成功，时间：Thu Jul 22 14:47:23 CST 2021 张三上次签到时间：Thu Jul 22 14:47:23 CST 2021 张三签退成功，时间：Thu Jul 22 14:47:28 CST 2021 ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值