0821随堂笔记

最新推荐文章于 2025-10-29 23:14:28 发布

原创最新推荐文章于 2025-10-29 23:14:28 发布 · 222 阅读

0 ·

CC 4.0 BY-SA版权

本文详细介绍了前端开发中布局的重要性，以及如何利用jQuery进行高效的数据处理和DOM操作。通过实例展示了如何创建动态表格，处理表单数据，并实现模态框的显示与隐藏。

写代码，注意，布局

布局

模拟数据库为例

声明写在一块

函数的定义写在一起，函数按照类别集中放在一起

命名

一定注意，命名的规范

从现在起，命名不要太随便

命名的原则

起名字，见名知义

比如，要拿到一个套接字对象

起一个变量名接收

tcp_server = get_tcp_server()

命名的时候，变量以名词形式命

方法或者函数，以动词形式命名

在js与jquery中的命名

js 声明一个变量

var 变量 = 值

拿一个标签对象

aEle

aTag

拿一个字符串
aStr

bInt

jquery中命名

如果要拿一个标签对象

var $aTag = $(“a”);
var aTag = $aTag[0]

获取学生名称

获取input标签，取里面的value就可以

1，普通标签取值

<div> 张三 </div>

在这里插入图片描述

2， input控件取值

<input type="text">

对于input控件，通过value属性取值

对于jquery的input标签对象，通过val方法

可以获取该标签的value值

在这里插入图片描述

》找到标签

在这里插入图片描述

通过dom标签对象的value属性，可以拿到

input标签对象的value属性值

在这里插入图片描述

小结

获取form表单中控件的value值的比对

jquery对象.val()

相当于

dom对象.value

这些控件包括

input select 等等

》pycharm中写代码

考虑下，这个input控件是用一次还是用多次

如果只用一次两次，直接拿了直接调方法

如果要频繁的使用，先声明一个变量，然后要用时，随时用这个变量

获取下拉框中的value值

在这里插入图片描述

计算下一行的序号

在这里插入图片描述

定义新标签在内存中

在这里插入图片描述

往内存中的标签添加内容

<td>内容</td>

其它操作完结功能

<!DOCTYPE html>
<!--作者：pyhui-->
<html lang="zh-CN">
<head>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .modal{
            background: black;
            position:fixed;
            left:0;
            top:0;
            right:0;
            bottom:0;
            opacity: 0.4;
            /*display: none;*/
        }

        .info{
            position: fixed;
            background-color: white;
            width: 400px;
            height: 300px;
            left:50%;
            top: 50%;
            margin-top:-150px;
            margin-left:-200px;
            /*display: none;*/
        }
        form{
            width: 80%;
            height: 40%;
            /*background-color: yellow;*/
            margin: 50px auto 0;

        }
    </style>

<!--    js-->
    <script>

        $(main);

        function main() {
            // 绑定事件，当取消的按钮被点击的时候，有一个函数对应
            $("#btn_cancle").click(dismiss_modal);
            // 绑定事件，当显示按钮被点击的时候，模态框显示
            $("#btn_show").click(show_modal);
            // 绑定事件，当提交按钮点击的时候，新增一行
            $("#btn_tijiao").click(add_line_data);
            // 事件委托
            // 委托table标签，当删除按钮被点击的时候，执行一个事件
            $("table")

            // 点击提交添加一行
            function add_line_data() {
                // 数据的处理。。
                // 拿到学生姓名
                var stuName = $("form input[name=username]").val();
                // 拿到所学专业
                var subject = $("form select[name=subject]").val();
                // 计算下一行的序号
                // 得拿到最后一行的第一个td的值
                // 拿最后一行
                var $lastTrTag = $("table tr:last");
                // 拿第一个td
                var $firstTdTag = $lastTrTag.find("td:first");
                // 取td里面的值
                var indexStr = $firstTdTag.text();
                // 字符串转整数
                var indexInt = parseInt(indexStr)
                // 下一行的序号
                var nextIndexInt = indexInt + 1


                // 标签的处理，内存中准备新的标签。。。
                // tr行标签
                var $trTag = $("<tr>");
                // td序号标签
                var $tdIndex = $("<td>");
                // td学生姓名标签
                var $tdName = $("<td>");
                // td所学专业标签
                var $tdSubject = $("<td>");
                // td通用的操作标签
                var $tdAct = $("<td><a href=\"\" class=\"edit\">编辑</a>| <a href=\"\" class=\"del\">删除</a></td>");


                // 标签中插入数据
                // td序号标签，添入序号
                $tdIndex.text(nextIndexInt);
                // td姓名插入
                $tdName.text(stuName);
                // 专业的插入
                $tdSubject.text(subject);


                // 标签的填入操作
                // tr标签的填入。 使用 父标签.append（子标签的方法填入）
                $("table").append($trTag);
                // tr标签append，序号标签   <tr><td>序号</td></tr>
                // tr标签append，学生标签   <tr><td>序号</td> <td>学生姓名</td></tr>
                // tr添加专业标签
                // tr添加操作标签
                $trTag.append($tdIndex, $tdName, $tdSubject, $tdAct);

                // 添加前 table标签是这样的  <table> <tr>第一行</tr></table>
                // table标签append，我们准备好的这个tr标签   <table> <tr>第一行</tr><tr>上面准备好的tr</tr> </table>
            }

            // 让模态框出现
            function show_modal() {
                $(".modal").css("display","block");
                $(".info").css("display", "block");
            }


            //让模态框消失
            function dismiss_modal() {
                // 目标，点击取消，让模态框消失
                // 拿到标签对象
                var $divInfo = $(".info");
                // 操作标签对象的属性，设置css的display为none
                $divInfo.css("display","none");
                $(".modal").css("display","none");
            }
        }



    </script>
</head>
<body>

<input type="button" value="添加学生" id="btn_show">

<!--遮罩层-->
<div class="modal">1</div>

<!--信息层-->
<div class="info">
<!--    表单-->
    <form action="">
        姓名：<input type="text" name="username"> <br>
        <select name="subject" id="">
            <option value="python">python</option>
            <option value="php">php</option>
            <option value="go">go</option>
            <option value="java">java</option>
        </select>
        <br>


        <input type="button" value="提交" id="btn_tijiao">
        <input type="button" value="取消" id="btn_cancle">
    </form>
</div>

<h1>学生列表</h1>
<table border="1">
<tr>
    <td>序号</td>
    <td>学生姓名</td>
    <td>所选专业</td>
    <td>操作</td>
</tr>

<tr>
    <td>1</td>
    <td>张三</td>
    <td>python</td>
    <td><a href="" class="edit">编辑</a>| <a href="" class="del">删除</a> </td>
</tr>



</table>
</body>
</html>