jquery实例

凤栖梧桐123

已于 2022-06-28 21:08:02 修改

阅读量621

点赞数

分类专栏： jquery 文章标签： jquery

于 2022-06-28 21:06:33 首次发布

本文链接：https://blog.csdn.net/weixin_46673625/article/details/125498828

版权

jquery 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

jquery自定义登录认证

登录验证是每个网站和系统必不可少的功能,而针对登录验证的方式有很多，现在将我做的登录验证的效果及代码思路写出来给大家参考。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            color: red;
            font-size: 16px;
        }
    </style>
</head>
<body>
<div>
  用户名:<input type="text" id="username">
    <span class="c1"></span>
</div>
<div>
  密码:<input type="password" id="password">
     <span class="c1"></span>
</div>
<button id="btn">提交</button>

<script src="jquery.js"></script>
<script>
    $('#btn').click(function (){
        var user = $('#username').val();
        var pwd = $('#password').val();
        if (user.length === 0){
            $('#username').siblings('.c1').text('用户名不能为空');
        }else{
             $('#username').siblings('.c1').text();
        }
        if (pwd.length === 0){
            $('#password').siblings('.c1').text('密码不能为空');
        }else{
             $('#username').siblings('.c1').text();
        }

    })
</script>
</body>
</html>

效果图展示

如果用户名为空点击提交时，会提示‘用户名不能为空’，密码为空，会提示‘密码不能为空’

如果用户名或者密码不为空，取消提示

jquery实现表格的全选反选和取消实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<button id="choose_all">全选</button>
<button id="reverse">反选</button>
<button id="cancel">取消</button>
<table border="2">
    <thead>
    <tr>
        <th>#</th>
        <th>姓名</th>
        <th>爱好</th>

    </tr>
    </thead>
    <tbody>
    <tr>
        <td>
            <input type="checkbox" >
        </td>
        <td>B哥</td>
        <td>玛卡巴卡</td>
    </tr>
    <tr>
        <td>
            <input type="checkbox" >
        </td>
        <td>豆子</td>
        <td>鬼灭</td>
    </tr>
    <tr>
        <td>
            <input type="checkbox" >
        </td>
        <td>黑炭</td>
        <td>蝴蝶忍</td>
    </tr>
    </tbody>
</table>

<script src="jquery.js"></script>
<script>
    $('#choose_all').click(function(){
        $(':checkbox').prop('checked',true)
    })

    $('#cancel').click(function(){
        $(':checkbox').prop('checked',false)
    })
    $('#reverse').click(function(){
        var a = $(':checkbox');
        for(var i = 0;i<a.length;i++){
            var status=a.eq(i).prop('checked');
            // if (status === true){
            //     a.eq(i).prop('checked',false);
            // }else
            // {
            //     a.eq(i).prop('checked',true);
            // }
            a.eq(i).prop('checked',!status)
        }
    })
</script>
</body>
</html>

效果图展示

当用户点击全选按钮时，全部选中，点击取消时，取消选中，点击反选时，给其赋相反的值实现反选

jquery实现表格的增删改

点击新增会弹出对话框同时把新增的内容添加到表格里面，点击编辑会弹出对话框，同时改变后，覆盖原数据，点击开除会删除一行数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            position: fixed;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            background-color: rgba(0,0,0,0.3);
            z-index:50;

        }
        .c2{
            height: 200px;
            width: 300px;
            background-color: whitesmoke;
            position: absolute;
            top:50%;
            left: 50%;
            margin-top: -100px;
            margin-left: -150px;
            z-index:100;
        }
        .hide{
            display: none;
        }
    </style>
</head>
<body>
<button id="add1">新增</button>

<table border="2">
    <thead>
    <tr>
        <th>#</th>
        <th>姓名</th>
        <th>爱好</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td><input type="checkbox"></td>
        <td>mike</td>
        <td>sing</td>
        <td>
            <button class="fire">开除</button>
            <button class="edit">编辑</button>
        </td>
    </tr>
     <tr>
        <td><input type="checkbox"></td>
        <td>amy</td>
        <td>玛卡巴卡</td>
        <td>
            <button class="fire">开除</button>
            <button class="edit">编辑</button>
        </td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>dog brother</td>
        <td>girl</td>
        <td>
            <button class="fire">开除</button>
            <button class="edit">编辑</button>
        </td>
    </tr>
    </tbody>
</table>

<div class="cc hide">
    <div class="c1"></div>
    <div class="c2">
        <div>
            姓名:<input type="text" id="username">
        </div>
        <div>
             爱好:<input type="text" id="hobby">
        </div>
        <div>
       <button id="sub">提交</button>
       <button id="cancel">取消</button>
        </div>
    </div>
</div>
<script src="jquery.js"></script>
<script>
    var flag; //标识一下是新增动作
    var editBtn;
    //新增
    //1 点击新增按钮弹出模态对话框
    $('#add1').click(function (){
        $('.cc').removeClass('hide');
        $('#username').val('');
        $('#hobby').val('');
        flag=1;

    });
    //用户输入内容，点击确认按钮 生成一条记录添加到table标签后面
    $('#sub').click(function (){
        if(flag===1){
            //2.1获取用户输入的内容(取变量名尽量不用name)
            var username = $('#username').val();
            var hobby = $('#hobby').val();

            //2.2创建tr标签 然后将用户输入的数据放入到tr对应的td去

            var newTr = '<tr><td><input type="checkbox"></td><td>'+username+'</td><td>'+hobby+'</td><td> <button class="fire">开除</button>  <button class="edit">编辑</button></td></tr>'
            //2.3将创建的标签添加到table标签后
            $('tbody').append(newTr);
            //2.4关闭对话框

            }
        else{//表示编辑的保存动作
            //1.1获取该行的数据
            var newUsername = $('#username').val();
            var newHobby = $('#hobby').val();
            var hobby = editBtn.parent().prev().text(newHobby);
            var username = editBtn.parent().prev().prev().text(newUsername);
            //1.2赋值给模态对话框中的input标签
            $('#username').val(username);
            $('#hobby').val(hobby);


        }
        $('.cc').addClass('hide');
    })
    $('#cancel').click(function (){
        $('.cc').addClass('hide');
    })
    //开除
    $('tbody').on('click','.fire',function (){
        $(this).parent().parent().remove();
    })
    //编辑
    $('tbody').on('click','.edit',function (){
        //弹出模态对话框，并且赋值给输入框
        flag=2
        editBtn = $(this)
        $('.cc').removeClass('hide');
        var hobby = $(this).parent().prev().text();
        var username = $(this).parent().prev().prev().text();
        //1.2赋值给模态对话框中的input标签
        $('#username').val(username);
        $('#hobby').val(hobby);



    })

</script>
</body>
</html>