jQuery第一天作业——百度换肤、表格、抽奖、轮播图、微博和选项卡

最新推荐文章于 2023-11-12 20:31:59 发布

·青红造了个白·

最新推荐文章于 2023-11-12 20:31:59 发布

阅读量187

点赞数

文章标签： jquery

本文链接：https://blog.csdn.net/weixin_43861647/article/details/119727745

版权

这篇博客详细介绍了使用jQuery实现百度换肤、创建表格、构建抽奖功能、制作轮播图以及设计微博和选项卡的步骤与技巧，适合初学者提升技能。

摘要由CSDN通过智能技术生成

一、百度换肤

<!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>
        *{
            margin: 0px;
            padding: 0px;
            list-style: none;
        }
        ul{
            width: 830px;
            height: 100px;
            margin: 100px auto;
        }
        li{
            float: left;
            margin-right: 10px;
            width:200px;
            height: 100px;
            cursor: pointer;
        }
        li:nth-of-type(4){
            margin-right: 0px;
        }
        li img{
            width: 200px;
            height: 100px;
        }
        body{
            background: url('../images/01.jpg');
        }
    </style>
</head>
<body>
    <ul>
        <li><img src="../images/01.jpg" alt=""></li>
        <li><img src="../images/02.jpg" alt=""></li>
        <li><img src="../images/03.jpg" alt=""></li>
        <li><img src="../images/04.jpg" alt=""></li>
    </ul>
    <script src="../js/jquery.min.js"></script>
    <script>
        $('li').click(function(){
            var picture = $(this).children().attr("src");
            $('body').css("background","url("+picture+")");
        });
    </script>
</body>
</html>

二、表格

<!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>
        * {
            margin: 0px;
            padding: 0px;
            list-style: none;
        }

        table {
            border-collapse: collapse;
            width: 345px;
            height: 30px;
        }

        th,
        td {
            border: 1px solid red;
            text-align: center;
        }
    </style>
</head>

<body>
    用户名:<input type="text" placeholder="请输入用户名">
    学号:<input type="text" placeholder="请输入学号">
    <button>新增</button>
    <button>批量删除</button>
    <br><br>
    <table>
        <tr>
            <th>选择</th>
            <th>姓名</th>
            <th>学号</th>
            <th>删除</th>
        </tr>
        <tr>
            <td><input type="checkbox" class="check"></td>
            <td>XXX</td>
            <td>学号</td>
            <td><a href="#">删除</a></td>
        </tr>
    </table>
    <br>
    <button>全选</button>
    <button>反选</button>
    <button>全不选</button>
    <script src="../js/jquery.min.js"></script>
    <script>
        function del(delList) {
            $(delList).parent().parent().remove();
        }
        $('a').click(function () {
            del(this);
        });
        $('button').eq(0).click(function () {
            // 新增
            var txt = $('input').eq(0).val();
            var number = $('input').eq(1).val();
            if(txt == '' || number == ''){
                alert('内容为空，请重新输入');
            }
            else{
                var newList = $('<tr></tr>');
                $(newList).html(`<td><input type="checkbox" class='check'></td>
                        <td>${txt}</td>
                        <td>${number}</td>
                        <td><a href="#">删除</a></td>`);
                $(newList).children('td').eq(3).children().click(function(){
                    del(this);
                });
                $('tr').eq(0).after(newList);

最低0.47元/天解锁文章

·青红造了个白·

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
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"> ..
复制链接

扫一扫