学生信息表更新- jQuery的简单应用

最新推荐文章于 2022-11-22 15:33:53 发布

一个狮子座程序员

最新推荐文章于 2022-11-22 15:33:53 发布

阅读量417

点赞数

分类专栏：笔记文章标签： html jquery

本文链接：https://blog.youkuaiyun.com/weixin_44031282/article/details/108903274

版权

笔记专栏收录该内容

16 篇文章

订阅专栏

本文介绍了jQuery在更新学生信息表中的应用。首先解释了jQuery是一个集成JavaScript常用方法的库，然后强调了引用jQuery库的重要性，以及在不同情况下使用入口函数的注意事项。最后，提供了作者的实践案例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、jQuery简单来说就是集成了绝大部分js常用方法的一个方法库，想要应用就应当引用这个库。

// 可以通过 script 标签进行引入
<script src="./js/jquery-1.12.4.js"></script>

2、在进行jQuery代码编辑时候应当注意：
如果代码文件在标签之后，则无需特别注明入口函数，但是若jQuery代码文件在之前则应当注明入口函数；

$(document).ready(function){ }		//这是jQuery入口函数的复杂写法
$(function(){ }) 					//这是jQuery入口函数的简单写法

3、下面是我编撰的简单案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格更新</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        /* .box0{
            border:1px solid green;
            
            position:absolute;
        } */
        .box1, .box2{
            width: 1000px;
            height: auto;
            border: 1px solid rgb(146, 146, 146);
            margin: 50px auto 30px;
            /* position: relative;
            top: 50px; */
        }
        .box1{
            /* height:80px; */
            padding:2%;
        }
        table{
            width: 1000px;
            height: auto;
            border-spacing: 0px;
            border-collapse: collapse;
        }
        tr th{
            border: 1px solid #000;
            background-color: rgb(76, 255, 121);
        }
        td{
            text-align: center;
            border: 1px dashed black;
            background-color: #fff;
        }
    </style>
    <script src="../9.16 东哥文件/jquery-1.12.4.js"></script>
    <script >
        $(function(){
            $('#add').click(function(){
                // val() 方法返回或设置被选元素的值。元素的值是通过 value 属性设置的。该方法大多用于 input 元素。
                var $num = $('#num').val(); 
                var $name = $('#name').val();
                var $sno = $('#sno').val();

                var $sex=$('#man:checked').val()?'男':'女';

                $('table').append("<tr><td>"+$num+"</td><td>"+$name+"</td><td>"+$sno+"</td><td>"+$sex+"</td><td><a href='javascript:;'>删除</a></td>")   

                $('a').click(function() {
                    $(this).parents('tr').remove(); // parents()方法，获得当前匹配元素集合中每个元素的祖先元素
                })    
            });
        })
    </script>
    
</head>
 <body> 
<!-- <div class="box0"> -->
    <div class="box1">
        <form action="">
            <span>序号：</span>
            <input type="text" id="num">
            <span>姓名：</span>
            <input type="text" id="name">
            <span>学号</span>
            <input type="text" id="sno">
            <span>性别：</span>
            <input type="radio" id="man" checked="checked" name="gender" value="男">男
            <input type="radio" id="nv" name="gender" value="女">女
            <input type="button" id="add" value="添加">
        </form>
    </div>
    <div class="box2">
        <table>
            <tr>
                <th>序号</th>
                <th>姓名</th>
                <th>学号</th>
                <th>性别</th>
                <th>操作</th>
            </tr>
            <tr>
                <td>1</td>
                <td>*爱*</td>
                <td>**********</td>
                <td>男</td>
                <td><a href="javascript:;">删除</a></td>
            </tr>
        </table>
    </div>
<!-- </div> -->
</body>
</html>