Web前端平时练习

最新推荐文章于 2024-07-14 18:10:31 发布
最新推荐文章于 2024-07-14 18:10:31 发布
阅读量61 收藏
点赞数
文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sealfight/article/details/130208765
版权

平时练习四

1. 使用jquery或vue实现如下界面效果：

示例
提示：
奇数行背景色：#FFF38F；偶数行背景色：#FFFFEE;选中行：#FF6500
选中行时，设置单选框选中状态

代码：

<!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>E4.1</title>
</head>
<body>
    <table>
        <tr>
            <td></td>
            <td class="name">姓名</td>
            <td>性别</td>
            <td>暂住地</td>
        </tr>
        <tr>
            <td> <input type="radio" name="select"> </td>
            <td class="name">张三</td>
            <td>男</td>
            <td>四川成都</td>
        </tr>
        <tr>
            <td> <input type="radio" name="select"> </td>
            <td class="name">李四</td>
            <td>女</td>
            <td>四川绵阳</td>
        </tr>
        <tr>
            <td> <input type="radio" name="select"> </td>
            <td class="name">王五</td>
            <td>男</td>
            <td>四川南充</td>
        </tr>
        <tr>
            <td> <input type="radio" name="select"> </td>
            <td class="name">赵六</td>
            <td>男</td>
            <td>四川自贡</td>
        </tr>
        <tr>
            <td> <input type="radio" name="select"> </td>
            <td class="name">陈勇</td>
            <td>男</td>
            <td>四川德阳</td>
        </tr>
        <tr>
            <td> <input type="radio" name="select"> </td>
            <td class="name">罗梅</td>
            <td>女</td>
            <td>四川宜宾</td>
        </tr>
    </table>

</body>
</html>

<script src="./jquery-3.6.4.js"></script>

<script>

    $("tr:odd").css("background", "#FFF38F");

    $("tr:even").css("background", "#FFFFEE");

    $("tr:eq(0)").css({"background":"white", "font-weight": "bold"});

    $("tr").click(function(){
        // console.log(this);
        $(this).find("input:radio").prop("checked","true");
        $("tr:odd").css({"background":"#FFF38F", "color": "black"});
        $("tr:even").css({"background":"#FFFFEE", "color": "black"});
        $("tr:eq(0)").css({"background":"white", "color": "black"});

        $(this).css({"background":"#FF6500", "color": "white"});
    });
</script>

<Style>

    table{
        border-collapse: collapse;    
    }

    td{
        border: 1px solid black;
    }

    tr > td:nth-child(1){
        text-align: center;
        width: 60px;
    }

    tr > td:nth-child(2){
        text-align: center;
        width: 60px;
    }

    tr > td:nth-child(3){
        text-align: center;
        width: 60px;
    }

    tr > td:nth-child(4){
        text-align: center;
        width: 100px;
    }

</Style>

2.使用jquery或vue实现内容过滤，效果如下图所示：

示例
提示：
Jquery中提供了filter方法进行过滤，如$(“选择器”).filter(内容过滤器)
搜索过程中可先隐藏hide所有数据行，满足条件的行进行显示show（）

代码：

<!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>E4.2</title>
</head>
<body>

    <div>
        <label>查询：</label>
        <input id="input">
    </div>

    <table>
        <tr>
            <td class="name">姓名</td>
            <td>性别</td>
            <td>暂住地</td>
        </tr>
        <tr>
            <td class="name">张山</td>
            <td>男</td>
            <td>浙江宁波</td>
        </tr>
        <tr>
            <td class="name">李四</td>
            <td>女</td>
            <td>浙江杭州</td>
        </tr>
        <tr>
            <td class="name">王五</td>
            <td>男</td>
            <td>湖南长沙</td>
        </tr>
        <tr>
            <td class="name">找六</td>
            <td>男</td>
            <td>浙江温州</td>
        </tr>
        <tr>
            <td class="name">Rain</td>
            <td>男</td>
            <td>浙江杭州</td>
        </tr>
        <tr>
            <td class="name">MAXMAN</td>
            <td>女</td>
            <td>浙江杭州</td>
        </tr>
        <tr>
            <td class="name">王六</td>
            <td>男</td>
            <td>浙江杭州</td>
        </tr>
        <tr>
            <td class="name">李字</td>
            <td>女</td>
            <td>浙江杭州</td>
        </tr>
        <tr>
            <td class="name">李四</td>
            <td>男</td>
            <td>湖南长沙</td>
        </tr>
    </table>

</body>
</html>

<script src="./jquery-3.6.4.js"></script>

<script>

$(function(){
        $("tr:odd").css("background", "#FFF38F");

        $("tr:even").css("background", "#FFFFEE");

        $("tr:eq(0)").css({"background":"white", "font-weight": "bold"});

        $("div > input").bind("input propertychange",function(event){
        let inputMessage = $("div > input").val();

        $("tr").filter("tr:nth-child(1) ~ tr").hide();
        
        $("tr").each(function(){
            console.log(inputMessage);
            console.log(1);
            var text = $(this).children("td:first").text();
            console.log(text);
            
            if (text.includes(inputMessage))
            {
                $(this).show();
            }
            
        });
    });
});

</script>

<Style>

    div{
        line-height: 50px;
    }

    div > input{
        border: 1px solid black;
    }

    table{
        border-collapse: collapse;    
    }

    td{
        border: 1px solid black;
    }

    tr > td:nth-child(1){
        text-align: center;
        width: 150px;
    }

    tr > td:nth-child(2){
        text-align: center;
        width: 60px;
    }

    tr > td:nth-child(3){
        text-align: center;
        width: 100px;
    }

</Style>

3.使用 JQuery或vue 实现级联选择框，界面实现效果参考如下图。

示例

代码：

<!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>E4.3</title>
</head>
<body>
    <div>
        <select id="selectProvince">
            <option value="">请选择</option>
        </select>
        <select id="selectCity">
            <option value="">请选择</option>
        </select>        
    </div>
</body>
</html>

<script src="./jquery-3.6.4.js"></script>

<script>
    var provinceTag;
    var province = ['河北省','辽宁省','山东省'];
    var city =[['石家庄', '邯郸', '唐山', '张家口', '廊坊'],
                ['沈阳市', '大连市', '抚顺市', '辽阳市'],
                ['济南市', '临沂市', '莱芜市', '菏泽市']];

    $(function() {
        for(var i=0;i<province.length;i++){
            $('#selectProvince').append('<option>'+province[i]+'</option>');
        }

        $('#selectProvince').change(function(){
            $('#selectCity').children().not(':eq(0)').remove();
            provinceTag = $(this).children('option:selected').index();
            var subCity = city[provinceTag-1];
            for(var j=0;j<subCity.length;j++){
                $('#selectCity').append('<option>'+subCity[j]+'</option>');
            }
         })
    })
</script>

4.使用Jquery或vue实现将输入数据添加至表格中，通过点击Delete可删除所在行数据。

示例
代码：

<!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>E4.4</title>
</head>
<body>
    
    <form>
        <fieldset>
            <label id="main">添加新员工</label>
            <br>
            <label>name:  <input id="name"   type="text"/></label>
            <label>email: <input id="email"  type="text"/></label>
            <label>salary:<input id="salary" type="text"/></label>
            <br>
            <input id="submit" type="button" value="Submit"/>
        </fieldset>
    </form>

    <table>
        <thead>
            <tr>
                <th style="width: 60px;">Name</th>
                <th style="width: 140px;">Email</th>
                <th style="width: 62px;">Salary</th>
                <th style="width: 65px;"></th>
            </tr>
        </thead>

        <tbody>
            <tr>
                <td>Tom</td>
                <td>tom@tom.com</td>
                <td>5000</td>
                <td class="deleteBtn">Delete</td>
            </tr>
            <tr>
                <td>Jerry</td>
                <td>jerry@sohu.com</td>
                <td>8000</td>
                <td class="deleteBtn">Delete</td>
            </tr>
            <tr>
                <td>Bob</td>
                <td>bob@tom.com</td>
                <td>10000</td>
                <td class="deleteBtn">Delete</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

<script src="./jquery-3.6.4.js"></script>

<script>
    $(function(){

        $("td.deleteBtn").click(function(){
                $(this).parents("tr").remove();
        });

        $("#submit").click(function(){
            if (($("#name").val().trim() != "") && ($("#email").val().trim() != "") && ($("#salary").val().trim() != "")){
                let name   = $("#name").val();
                let email  = $("#email").val();
                let salary = $("#salary").val();

                $("table").append("<tr><td>" +name + "</td><td>" +email + "</td><td>" +salary + "</td>" +"<td class='del'>Delete</td></tr>");
                $("td:last").prop("class", "deleteBtn");
                $("td:last").css({"text-decoration":"underline", "color":"blue", "border":"2px solid grey", "padding":"5px",});
            }
            
            $("td.deleteBtn").click(function(){
                $(this).parents("tr").remove();
        });

        });

    });
</script>

<Style>
    #main{
        font-weight: bold;
    }

    fieldset{
        border: 0px;
        text-align: center;
        border-bottom: 1px solid black;
    }
    
    input{
        margin-top: 30px;
        margin-bottom: 10px;
    }

    #submit{
        border: 1px solid #4e7cb3;
    }
    
    table{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        border-collapse: collapse;
        width: 330px;
        text-align: center;
    }
    
    td, th{
        border: 2px solid grey;
        padding: 5px;
    }
    
    .deleteBtn{
        text-decoration: underline;
        color: blue;
    }
</Style>
Sealgost
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
web前端笔记
m0_74148715的博客
02-28 1159
html、css
从零开始学WEB前端——HTML实战练习
热门推荐
su_zui的博客
02-09 1万+
????项目介绍 先做个自我介绍，本人是一个没人写前端所以就自学前端的后端程序员????。在此项目中我会和大家一起从零基础开始学习前端，从后端程序员的视角来看前端，受限于作者的水平本项目暂时只会更新到前端框架VUE，不会涉及node.js。该项目适合零基础的小白或者和我一样开发网站没人写前端所以自学前端的后端程序员????。 该项目的学习顺序是按照我自己学习时总结出来的，其中的每个知识点都是我认真去理解的，同时也查了很多的资料，所有的参考资料我都放在了文章末尾。尊重开源，尊重知识产权。每一个案例我都亲手写过
web前端面试学习指南
web全栈开发的博客
05-30 334
分享一款面试实用题库 web前端面试助手 这篇文章很长，但的确是一篇非常干的干货，讲诉了 HTML、JavaScript、CSS、jQuery使用的一些规范与建议，前端的同学可以认真阅读此文，并比较自己平时的一些习惯，看是否有改进的地方…… HTML 咋地了, DOCTYPE? 不定义DOCTYPE是一种可以被判死刑的罪行。 以前你可能用的是下面的DOCTYPE，不过你要知道现在已经有更简洁清晰的代码取而代之了。 <!DOCTYPE html PUBLIC "-/....
Web前端开发面试考点指南
YunWisdom
08-03 1423
Web 前端面试指南与高频考题解析指南 第一章 面试准备：简历编写和面试前准备 一般来说，跳槽找工作要经历投递简历、准备面试、面试和谈 offer 四个阶段。其中面试题目会因你的等级和职位而异，从入门级到专家级，广度和深度都会有所增加。不过，不管什么级别和职位，面试题目一般都可以分类为理论知识、算法、项目细节、技术视野、开放性题、工作案例等内容。接下来重点来说下简历和知识点梳理的方法。 准备一份合适的简历 首先，什么样子的简历更加容易拿到面试邀请？笔者作为一名在 BAT 中待...
web前端平时作业.zip
04-01
如果不想用积分 可以去这里下载 ... zucc web 前端课 一些平时作业 并不完整, ...Web前端设计从入门到实战 HTML5 CSS3 JavaScript项目案例开发 第2版 张树明 这本书上的一些练习 , 这本书的练习书上有二维码 可以下载的
web前端中一个注册页面
12-24
自己平时的练习，我是今年才学的web，做的不好，希望大家不要介意，希望对大家有帮助。
平时练习的一些前端动效基于HTML5CSS3CanvasSvg
08-10
本主题聚焦于"平时练习的一些前端动效基于HTML5CSS3CanvasSvg"，这表明我们将探讨如何利用这些现代Web技术来创建动态、引人入目的用户界面。 **HTML5** 是超文本标记语言的最新版本，它极大地增强了Web开发的功能，...
平时练习的一些前端动效，基于HTML5，CSS3，Canvas，Svg.zip
02-12
这个名为"平时练习的一些前端动效，基于HTML5，CSS3，Canvas，Svg.zip"的压缩包文件，显然是一个关于前端动效的实践项目，涉及到现代Web技术的核心元素：HTML5、CSS3以及Canvas和SVG。下面我们将详细探讨这些知识点...
web:这个文件夹里面是web方面的代码，扩展自己平时学习练习时写的代码
03-22
在IT行业中，Web开发是一项至关重要的技能，涵盖了前端和后端技术，以及各种框架和工具。这个名为"web"的文件夹显然包含了作者在学习和练习Web开发时编写的代码。"系统开源"的标签表明这些代码可能是基于开源项目...
前端技术学习记录-基础知识（二）JavaScript基本语法
adanjeep的博客
07-11 194
/ 声明一个String类型的变量name name = "Alice";// 初始化变量name int age;// 声明一个int类型的变量age age = 25;// 初始化变量age。静态强类型：Java语言，在申明变量时，需要明确定于变量的类型。对明确申明的变量，需要做强制转换，才会发生变化，否则不变。//数字 a = "hahaha";//字符串 </script>动态弱类型语言：变量可以存放在不同类型的值（动态）=== 比较相等（不会进行隐式类型转换）>>> 无符号右移（逻辑右移）
如何搭建互联网医院系统源码？医疗陪诊APP开发实战详解
meihusdk的博客
07-11 267
希望本文能够为正在或即将从事相关开发的技术人员提供一些参考和帮助。通过不断的努力和创新，我们可以为患者提供更优质的医疗服务，推动医疗行业的数字化转型。
微信小程序开发笔记之”表单读不出数据“解决指南
qq_46396470的博客
07-12 300
脑瓜子好了后，忘记了表单控件必须要加上。提交后打印的字典是空的，卡了十几分钟。
Node多版本管理器NVM安装使用
GongWeiBuQi的博客
07-11 195
安装node很方便，只需要一条命令可以轻松切换node版本可以多版本node并存。
【vueUse库Reactivity模块各函数简介及使用方法--下篇】
xiejunlan的博客
07-11 1396
vueUseReactivity函数构想中的refWithControl函数可能的实现方式总结2. syncRef构想中的syncRef函数可能的实现方式注意事项总结3.syncRefs构想中的syncRefs函数可能的实现方式注意事项总结假想的toReactive函数注意事项假设的toReactive函数实现结论5.toReftoRef函数介绍使用方法示例代码总结6.toRefstoRefs函数介绍使用方法示例代码总结7.toValue使用 Vue 3 自身的 API示例使用 vueUse 的类似功能。
Javafx利用fxml变换场景的小细节
2301_80311013的博客
07-09 891
在这个代码中，在JavaFX中，FXMLLoader是用来加载FXML文件并将其转换为Java对象（例如控制器类）的工具。当您使用FXMLLoaderFXMLLoader在整个过程中，FXMLLoader是使用JavaFX的后台线程（也称为JavaFX线程）来执行这些操作的，这是为了保持UI线程的响应性。这意味着在用户界面（UI）线程中，您不会看到任何阻塞，即使FXMLLoader正在执行耗时的操作。当FXMLLoader完成加载并调用load()方法时，它会返回一个Parent。
this指向解析
最新发布
Zrf2191318455的博客
07-14 217
2.3：调用构造函数personA中的show2函数，为箭头函数，指向外层最近的普通函数的this，在第一题中，person1只是一个对象，所以指向windows，但是在第二题中，personA为构造函数，show2指向的就是personA，所以依旧打印personA。1.8：调用person1中的show4函数，并再次调用返回函数，show4为普通函数，返回函数为箭头函数，箭头函数的this指向为外面最近一层普通函数的this，即show4的this，因此打印person1。
ReactRouter v6升级的步骤
feixin369的博客
07-14 189
React Router v6 引入了一个 Routes组件，它有点像Switch，但功能要强大得多。与Switch相比，RoutesReact.lazy。
一个使用Go语言和现代Web技术构建跨平台桌面应用程序开源项目
yunmoon的博客
07-10 1051
Wails作为一个桥梁，连接强大的Go后端逻辑与丰富的Web前端界面，允许开发者利用两者的最佳特性来开发应用。
web前端基础练习题
02-28
以下是一些常见的Web前端基础练习题： 1. 创建一个简单的HTML页面，包含一个标题、一个段落和一个图片。 2. 使用CSS样式设置页面的背景颜色、字体样式和大小。 3. 创建一个导航栏，包含多个链接，并使用CSS样式进行...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值