css js jquery 练习题2

已于 2022-01-26 10:49:32 修改
阅读量331 收藏
点赞数
文章标签： javascript css jquery
于 2021-04-27 10:36:59 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ATCG7/article/details/116193745
版权

在这里插入图片描述

<!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>
    <!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>
            textarea {
                width: 800px;
                height: 200px;
                border: 1px solid #000;

            }

            div {
                position: relative;
            }

            button {
                width: 80px;
                position: absolute;
                left: 727px;
                top: 207px;
            }
            ul{
                width: 750px;
            }
            li{
                list-style: none;
                border-bottom: 1px solid #000;
                line-height: 30px;
            }
        </style>
    </head>

    <body>
        <div class="main">
            <textarea class="content" name="" id="" cols="30" rows="10" style="resize: none;"></textarea>
            <button>提交</button>
        </div>
        <ul>

        </ul>
    </body>
    <script>
        window.onload = function () {
            var btn = document.querySelector("button");
            btn.onclick = function () {
                var ul = document.querySelector('ul');
                var content = document.querySelector(".content").value;
                var li = document.createElement("li");
                var text = document.createTextNode(content);
                li.appendChild(text);
                ul.appendChild(li);
            }


        }
    </script>

    </html>
</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>
        .top{
            background-color: #000;
            color: #fff;
            width: 673px;
            height: 50px;
        }
        .top ul{
            padding: 0;
        }
        .top li{
            float: left;
            list-style: none;
            padding-left: 80px;
            padding-right: 80px;
            line-height: 50px;
            text-align: center;
        }
        
        .mid li{
            list-style: none;
            border-bottom: 1px dotted #aaa;
            line-height: 50px;
        }
        .zhong{
            display: block;
        }
        .nozhong{
            display: none;
        }
        .topys{
            background-color: #aaa;
        }
    </style>
</head>
<body>
    <div class="main">
        <div class="top">
            <ul>
                <li class="lis">热门排行</li>
                <li class="lis">美图速递</li>
                <li class="lis">前沿科技</li>
            </ul>
        </div>
        <div class="mid">
            <ul class="item">
                <li>1111111111111111111111111</li>
                <li>1111111111111111</li>
                <li>111111111111111111111111</li>
                <li>1111111111111111111111</li>
            </ul>
            <ul class="item">
                <li>鹅鹅鹅教官 这所中学样的冬雨成了网红</li>
                <li>最伤身体的是个生活习惯一定要避开</li>
                <li>12岁孩子带着父亲去西藏 吃住行自己拿主意</li>
                <li>16岁男孩暑假干了量月工地 练出满身及肉 置为赚学费</li>
            </ul>
            <ul class="item">
                <li>格好高和讴歌和宫内红花沟啊哈孤儿关机恶哦啊哈</li>
                <li>11111111111111111111</li>
                <li>111111111111111111</li>
                <li>111111111111111111111111</li>
            </ul>
        </div>

    </div>
    <script>
        window.onload=function(){
            var top=document.querySelector('.top');
            var lis=document.querySelectorAll('.lis');
            var items=document.querySelectorAll('.item');
            // console.log(lis);
            for(var i=0;i<lis.length;i++){
                lis[i].setAttribute('index',i);
                lis[i].onmouseenter=function(){
                    for(var i=0;i<lis.length;i++){
                        lis[i].className="";
                    }

                    this.className="topys";
                    for(var i=0;i<lis.length;i++){
                        items[i].style.display='none';
                    }
                    items[this.getAttribute('index')].style.display='block';

                }
            }
        }
    </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>
        .main {
            width: 400px;
            height: 300px;
            background-color: skyblue;
        }

        .top {
            background-color: royalblue;
            text-align: center;
            margin-bottom: 30px;

        }

        input {
            width: 250px;
            height: 38px;
            margin-left: 75px;
        }

        button {
            width: 250px;
            height: 38px;
            background-color: royalblue;
            margin-left: 75px;
        }

        .tishi,
        .mtishi {
            height: 30px;
            color: red;
        }

        p {
            margin: 0;
            padding-left: 75px;
        }
    </style>
</head>

<body>
    <div class="main">
        <div class="top">
            <h1>注册</h1>
        </div>
        <form action="">
            <input type="text" id="username" placeholder="请输入您的用户名">
            <div class="tishi"></div>
            <input type="password" id="password" placeholder="请输入您的密码">
            <div class="mtishi"></div>
            <button id="btn">提交</button>
        </form>
    </div>
    <script>
        window.onload = function () {
            var btn = document.querySelector('#btn');
            btn.onclick = function () {
                var iptuser = document.querySelector('#username');
                var usertext = document.querySelector('#username').value;
                var iptpass = document.querySelector('#password');
                var passtext = document.querySelector('#password').value;
                document.querySelector('.tishi').innerHTML = '';
                document.querySelector('.mtishi').innerHTML = '';
                var keycode = usertext.charCodeAt(0);
                if (usertext.length < 6 || usertext.length > 18) {
                    var p = document.createElement('p');
                    var text = document.createTextNode("用户名长度必须为6到18位");
                    p.appendChild(text);
                    document.querySelector('.tishi').appendChild(p);

                }
                
                else if (keycode < 65 || (keycode > 90 && keycode < 97) || keycode > 122) {
                    var p = document.createElement('p');
                    var text = document.createTextNode("用户名必须以英文字母开头！");
                    p.appendChild(text);
                    document.querySelector('.tishi').appendChild(p);

                }
                if (passtext.length < 6) {
                    var p = document.createElement('p');
                    var text = document.createTextNode("密码长度不能小于6位！");
                    p.appendChild(text);
                    document.querySelector('.mtishi').appendChild(p);
                }

                return false
            }
        }
    </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>
        table {
            border-collapse: collapse;
            width: 500px;
            margin: 10px auto;
            text-align: center;
        }

        td,
        th {
            border: 1px solid #000;
        }

        .bg {
            background-color: #ff6500;
        }
    </style>
</head>

<body>
    <table>
        <thead>
            <tr>
                <th></th>
                <th>姓名</th>
                <th>性别</th>
                <th>暂住地</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><input name="select" type="radio" value="select"></input></td>
                <td>张三</td>
                <td>男</td>
                <td>四川成都</td>
            </tr>
            <tr>
                <td><input name="select" type="radio" value="select"></input></td>
                <td>张三</td>
                <td>女</td>
                <td>四川成都</td>
            </tr>
            <tr>
                <td><input name="select" type="radio" value="select"></input></td>
                <td>张三</td>
                <td>男</td>
                <td>四川成都</td>
            </tr>
            <tr>
                <td><input name="select" type="radio" value="select"></input></td>
                <td>张三</td>
                <td>男</td>
                <td>四川成都</td>
            </tr>
            <tr>
                <td><input name="select" type="radio" value="select"></input></td>
                <td>张三</td>
                <td>男</td>
                <td>四川成都</td>
            </tr>
            <tr>
                <td><input name="select" type="radio" value="select"></input></td>
                <td>张三</td>
                <td>男</td>
                <td>四川成都</td>
            </tr>
            <tr>
                <td><input name="select" type="radio" value="select"></input></td>
                <td>张三</td>
                <td>女</td>
                <td>四川成都</td>
            </tr>
        </tbody>
    </table>
    <script src="../excise/jquery-3.6.0.min.js"></script>
    <script>
        $(function () {
            $('tbody tr:odd').css("background", "#ffffee");
            $('tbody tr:even').css("background", "#f8f18e");
            $("tbody tr").mouseover(function () {
                $(this).css("background", "#ff6500");
            })
            $("tbody tr").mouseout(function () {
                $('tbody tr:odd').css("background", "#ffffee");
                $('tbody tr:even').css("background", "#f8f18e");
            })
            $("tbody tr").click(function(){
                $(this).find("input[name=select]").prop("checked",true);
            })
        })
    </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>
        .top{
            width: 500px;
            margin: 10px auto;

        }
        table{
            width: 500px;
            margin: 10px auto;
            border-collapse: collapse;
            text-align: center;
        }
        th,td{
            border: 1px solid #000;
        }
    </style>
</head>
<body>
    <form class="top">
        查询：<input type="text" id="btn">
    </form>
    <table>
        <thead>
            <tr>
                <th>姓名</th>
                <th>性别</th>
                <th>暂住地</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>张三</td>
                <td>男</td>
                <td>浙江宁波</td>
            </tr>
            <tr>
                <td>李四</td>
                <td>女</td>
                <td>浙江宁波</td>
            </tr>
            <tr>
                <td>王五</td>
                <td>男</td>
                <td>浙江宁波</td>
            </tr>
            <tr>
                <td>赵六</td>
                <td>男</td>
                <td>浙江宁波</td>
            </tr>
            <tr>
                <td>Rain</td>
                <td>男</td>
                <td>浙江宁波</td>
            </tr>
            <tr>
                <td>MAXMAN</td>
                <td>男</td>
                <td>浙江宁波</td>
            </tr>
            <tr>
                <td>王六</td>
                <td>男</td>
                <td>浙江宁波</td>
            </tr>
            <tr>
                <td>李紫</td>
                <td>男</td>
                <td>浙江宁波</td>
            </tr>
            <tr>
                <td>李四</td>
                <td>男</td>
                <td>浙江宁波</td>
            </tr>
        </tbody>
    </table>
    <script src="../excise/jquery-3.6.0.min.js"></script>
    <script>
        $(function(){
            $("tbody tr:odd").css("background","#ffffee");
            $('tbody tr:even').css("background", "#f8f18e");
            $("#btn").keyup(function(){
                var txt=$("#btn").val();
                $("tbody tr").hide();
                $("tbody tr").filter(":contains('"+txt+"')").show();
            })
        })
    </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>
        form{
            width: 500px;
            margin: 30px auto;
        }
        select{
            border: 2px solid rgb(126, 144, 245);
        }
    </style>
</head>

<body>
    <form action="">
         <select name="province" id="province"></select>
         <select name="city" id="city"></select>
    </form>
    <script type="text/javascript" src="./jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function () {
            var arrpro = ["请选择", "河北省", "辽宁省", "山东省"];
            var arrcity = [["请选择"],["请选择", "石家庄", "邯郸", "唐山", "张家口", "廊坊"], ["请选择", "沈阳", "大连", "鞍山"], ["请选择", "济南", "青岛", "淄博", "烟台"]];

console.log(document.getElementById("one").innerHTML);
            for (var i = 0; i < arrpro.length; i++) {
                $("#province").append($("<option>").val(i).html(arrpro[i]));
            }

            $("#province").change(function () {
                $("#city").empty();
                
                for (var i = 0; i < arrcity[$(this).val()].length; i++) {
                    $("#city").append($("<option>").html(arrcity[$(this).val()][i]));
                }
            })
           
        })

       
    </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>
        div {
            width: 100px;
            margin: 20px auto;
        }

        form {
            width: 700px;
            margin: 20px auto;
        }

        #btndiv {
            width: 80px;
            margin: 20px auto;
        }

        #line {
            width: 100%;
            height: 10px;
            margin-top: 50px;
            border-top: 1px solid #000;
        }

        table {
            width: 500px;
            margin: 100px auto;
            border-collapse: collapse;
            text-align: center;
            margin-top: 10px;
        }

        th,
        tr,
        td {
            border: 1px solid #333;
        }

        a {
            color: blue;
            text-decoration: underline;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div>添加新员工</div>
    <form id="form">
        name: <input type="text" id="name">
        email: <input type="text" id="email">
        salary: <input type="text" id="salary">
        <br>
        <div id="btndiv"><button>Submit</button></div>


    </form>
    <div id="line"></div>
    <table>
        <thead>
            <tr>

                <th>Name</th>
                <th>Email</th>
                <th>Salary</th>
                <th> </th>

            </tr>
        </thead>
        <tbody>

        </tbody>
    </table>
    <script type="text/javascript" src="./jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function () {



            $("button").click(function () {

                var name = $("#name").val();
                var email = $("#email").val();
                var salary = $("#salary").val();

                var tr = $("<tr></tr>");
                tr.appendTo("tbody");

                var name = $("<td>" + name + "</td>");
                name.appendTo('tbody tr:last');

                var email = $("<td>" + email + "</td>");
                email.appendTo('tbody tr:last');

                var salary = $("<td>" + salary + "</td>");
                salary.appendTo('tbody tr:last');

                var del = $("<td><a class='del'>Delete</a></td>");
                del.appendTo("tbody tr:last");

                $(".del").click(function () {
                    $(this).parent().parent().remove();
                })
                return false

            })

        })
    </script>
</body>

</html>
天金小麻花
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
HTML&CSS&JS练习
qq_43711904的博客
12-01 449
目录 三线表： 校验名称长度： 全选操作： 数组的定义与使用： 定义和调用对象： 省市联动： 表格行元素的添加、删除、修改： 三线表： <!DOCTYPE html> <html lang="en"> <head> <meta charset=""utf-8 /> <title>de...
jQuery选择器上机练习题及答案.rar
12-02
(答案见下载资源) 上机任务1 用chrome打开dom.sample2.html页面...为某dom元素应用某css样式可以使用jQuery中的addClass方法，例如:将id为tt的div元素应用.bt样式，可用些语句：$("#tt").addClass("color","red");
html+css+js新手练习项目
10-08
html+css+js新手练习项目，里面包含例子源码，还有单独文件夹分类。适合新手练习用
jquery css属性练习
weixin_33688840的博客
09-07 70
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &am
jQuery-css样式操作练习
qq_44961203的博客
01-01 111
简单对css样式的一些操作 主要有以下三个方法： （1）addClass() 向被选元素添加一个或多个类。 （2）removeClass() 从被选元素删除一个或多个类。 （3）toggleClass() 对被选元素进行添加/删除类的切换操作(有就删，没有就加)。 （4）offset() 获取和设置元素坐标(坐标有时候会与当前浏览器窗口大小有关系)。 <!DOCTYPE html> <html lang="en"> <head> <meta charset=
前端css和js练习
herowgq的博客
08-17 87
一、流程 上午：css其他 导航条 超链接 图片墙 浮动定位 下午： 页面总体布局 js（java strict）前端 二、知识点 1.CSS 导航条 设置宽度，字体，链接，取消ul的小点，行转块 2.照片墙（1.可以用ps测量图片大小，用qq截图工具来吸取图片颜色2在body里面添加背景颜色） 3，超链接 颜色设置（点击前，悬浮状态，选中，点击后） （超链接是行内元素，需要转成块元素，实现可以在一个部分点击，而不是仅仅在一行点击） 4.写网页的思路：先整体后局部，如果给了尺寸，就先写出，如果没有给出需要先
jQuery练习题.docx
06-08
jQuery 练习题 本资源为 jQuery 练习题，包含答案，可以进行学习。下面是从该资源中生成的相关知识点： 一、 jQuery 基础知识 1. jQuery 显示隐藏的元素用 show() 方法实现。 2. jQuery 中，$.ajaxSetup() 用于...
JQuery练习题1
05-10
2. **链式操作**: jQuery对象支持链式调用，这意味着可以连续执行多个方法，如`$("#element").hide().fadeIn()`，先隐藏元素，再渐显出来。这种语法极大地提高了代码的可读性。 3. **DOM操作**: jQuery提供了一系列...
jQuery随机选择音乐试题代码.zip
11-22
2. CSS文件：定义页面的样式，包括布局、颜色、字体等。 3. JavaScript文件：实现逻辑功能，如随机选择试题、处理用户交互、验证答案等。 4. 可能还有JSON或其他格式的数据文件，存储试题的具体内容。 总的来说，这...
JS/JQuery-第7章上机练习.zip
04-20
在Chapter7目录下，可能包含了练习题、示例代码和解答，通过实际操作和调试，你可以更深入地理解和掌握上述知识点。同时，解决这些问题也将帮助你形成解决实际问题的能力，提升编程技巧。记得尊重原创，未经许可不要...
html+css+js之20个练手小项目-relax app
qq_40312477的博客
05-10 4234
Relax app的功能在于帮助你用于调整呼吸，放松身心。吸气~ 保持~ 呼气。 **需要实现：** - CSS-页面布局，包括圆环与移动的小球 - JS-随着呼吸，圆圈的缩放以及文本的改变
用纯css模拟下雪的效果
web前端开发
12-20 762
下雪效果只是一类效果的名称，可以是红包雨等一些自由落体的运动效果，本文就是用纯css模拟下雪的效果，更多效果大家可以自行发挥。1、前言由于公司产品的活动，需要模拟类似下雪的效果。浏览器...
css3下雪的效果,canvas实现简单的下雪效果
weixin_39650756的博客
08-04 168
canvas实现简单的下雪效果快到找工作的时候，我也开始想着写个什么小东西好，因为本人能力有限，那些炫酷的效果是无法搞出来，所以想了想想做出个类似canvas下雨效果的小demo，然后呢，到了网上啪的一搜索(百度是最好的老师)，哇，真的多，可是这些确实有点难。。。理解不了怎么办呢？总不能扣下别人的源码吧，我退而求其次，想到了用canvas实现一种下雪的效果。首先，确定好思路，我们要确定的有这么几点...
（前端页面HTML+CSS+JavaScript小练习）博客系统（只包括了前端代码，不是一个完整项目）
qq_52136076的博客
05-17 804
主要的项目构成如下，editor.md后面会讲怎么创建，这里先不用管，只需要把css文件，image文件和html页面创建好就可以，注意html页面与这几个文件同级。然后回跳转下来： 点击github下载，如果github下载不了，大家就下载一个steam加速器，然后里面有github加速的选项，就可以下载了。然后对应的css文件如下 ，新建一个文件夹，放置css文件，其中commen.css是全部页面都会用到的样式，所以写在一起。下面这个图片我这里网卡了，然后框里的东西没加载出来，不过不影响，
【传智播客二维码名片】【网页设计与网站开发HTML、CSS、JavaScript】【第四章】列表——实验作业题【实验2】
weixin_60897770的博客
06-12 793
【名片内容：李刚-网页设计师-案例41个……】新建一个test2.html页面，完成如下图所示的HTML文档。(1) 案例结构分析如下图所示。下图所示的 “二维码名片”，由图片和文字两部分构成，文字部分是对二维码图片的描述和说明，因此可以通过定义列表实现该图文混排效果。其中标记中插入图片，标记中放入对图片解释说明的文字。(2)样式分析。实现效果图所示样式的思路如下： ...
JavaScript综合实验2
m0_52949203的博客
05-10 834
一、实验目的 1.熟悉CSS的使用方法，能熟练定义CSS选择器，熟练书写CSS样式表； 2.掌握CSS设置网页的样式； 3.利用DOM技术实现动态操作网页元素。 二、实验内容 利用HTML，CSS和JavaScript三种技术完成表格页面级的操作，具体内容如下： （1）利用HTML编写网页： “编号”、“姓名”、“性别”三个文本框，“添加”按钮，一个“学生信息表”表格； （2）利用CSS设置表格的样式：实线边框，文本居中； （3）运用JavaScript DOM技术实现表格增加和删除记录。 页面效果如下：
HTML&CSS和JavaScript习题
qq_37667131的博客
09-18 1076
习题内容来源于“妙味课堂”微信公众号 HTML&amp;CSS习题： JavaScript习题：   以下是个人做的答案，仅供参考，有错留下评论，谢谢。 HTML&amp;CSS答案： 1.ABD 2.ACD 3.AB 4.AD 5.D 6.ABCD 7.ACD 8.ABCD 9.ABC 10.CD JavaScript习题答案： 1.ABCD 2.ACD ...
最简单的下雪效果
沐光之辰
09-09 160
就用下面2张图合成动态下雪效果 执行下面代码 <!doctype html> <html> <head> <meta charset="UTF-8"> <title>沐光之辰</title> <meta name="viewport" content="width=device-width,user-scalable=no"> <style> .con { overflow: hidden;
前端笔试题
weixin_42127307的博客
11-13 243
css,原生js简单考点
jquery课后练习
最新发布
09-04
- *1* *2* *3* [十、jQuery（上） - 章节课后练习题及答案](https://blog.csdn.net/weixin_57002282/article/details/125208920)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

天金小麻花

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值