jQuery基础--案例练习

发布时间：2020-08-16 01:16:46 作者：M_x_M
来源：网络阅读：2151

1.端口案例改进，操作更灵活
jQuery基础--案例练习

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .hide{
            display: none;
        }
        .model{
            position: fixed;
            top: 50%;
            left: 50%;
            width: 500px;
            height: 350px;
            margin-top: -200px;
            margin-left: -250px;
            background-color: aliceblue;
            z-index: 10;
        }
        .model p,h3{
            text-align: center;
        }
        .model p input[type="text"]{
            width: 300px;
            height: 28px;
        }
        .model p input[type="button"]{
            width: 150px;
            height: 35px;
        }
        .shadow{
            position: fixed;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            background-color: black;
            opacity: 0.6;
            z-index: 9;
        }
    </style>
</head>
<body>
    <a onclick="addModel();">添加</a>
    <table border="1">
        <thead>
            <tr>
                <th>地址</th>
                <th>端口</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td name="host">1.1.1.11</td>
                <td name="port">80</td>
                <td><a class="edit">编辑</a>|<a>删除</a></td>
            </tr>
            <tr>
                <td name="host">1.1.1.12</td>
                <td name="port">80</td>
                <td><a class="edit">编辑</a>|<a>删除</a></td>
            </tr>
            <tr>
                <td name="host">1.1.1.13</td>
                <td name="port">80</td>
                <td><a class="edit">编辑</a>|<a>删除</a></td>
            </tr>
        </tbody>
    </table>
    <div class="model hide">
        <p><h3>操作</h3></p>
        <p>地址：<input type="text" name="host"/></p>
        <p>端口：<input type="text" name="port"/></p>
        <p><input type="button"  value="取消" onclick="removeModel();"/></p>
    </div>
    <div class="shadow hide"></div>
    <script src="jquery-1.12.4.js"></script>
    <script>
        //打开添加框
        function addModel() {
            $('.model,.shadow').removeClass('hide');
            $('.model p input[type="text"]').val('');
        }
        //关闭添加框
        function removeModel() {
            $('.model,.shadow').addClass('hide');
        }
        //点击编辑时执行函数
        $('.edit').click(function () {
            $('.model,.shadow').removeClass('hide');
            //获取当前点击元素的父级标签的所有兄弟标签
            var tds=$(this).parent().prevAll();
            tds.each(function () {
                // $('.model input[name="?"]')获取name=？的输入框
                //$(this).attr('name')获取被点击td标签的name值并带入？
                //val(）赋值
                //$(this).text()h获取被点击td标签的html文本
                $('.model input[name='+$(this).attr('name')+']').val($(this).text());
            })
        })
    </script>
</body>

2.菜单切换内容
jQuery基础--案例练习

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .menu{
            margin: 0 auto;
            height: 35px;
            line-height: 35px;
            width: 400px;
            background-color:#999999;
        }
        .menu .menu-item{
            float: left;
            width: 65px;
            border-right: 1px solid #fdfdfd;
            text-align: center;
            color: #ffffff;
            cursor: pointer;
        }
        .content{
            margin: 0 auto;
            height: 200px;
            width: 398px;
            border: 1px dashed #999999;
            border-top: 0px;
        }
        .hide{
            display: none;
        }
        .active{
            background-color: #ff6600;
        }
    </style>
</head>
<body>
<div class="menu">
    <div class="menu-item active">菜单一</div>
    <div class="menu-item">菜单二</div>
    <div class="menu-item">菜单三</div>
</div>
<div class="content">
    <div>内容一</div>
    <div class="hide">内容二</div>
    <div class="hide">内容三</div>
</div>
<script src="jquery-1.12.4.js"></script>
<script>
    $('.menu-item').click(function () {
        //被点击div的样式添加active，其他兄弟div样式去掉div
        $(this).addClass('active').siblings().removeClass('active');
        //获取被点击div的index索引
        var index=$(this).index('.menu-item');
        //根据索引找到content内容孩子中的对应div并移除样式hide，其他兄弟div添加h样式ide
        $('.content').children().eq(index).removeClass('hide').siblings().addClass('hide');
    })
</script>
</body>

3.点赞按钮
jQuery基础--案例练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .content{
            padding: 45px;
            border-bottom:1px dashed #ff6600;
        }
        .item{
            width: 35px;
            position: relative;
        }
    </style>
</head>
<body>
    <div class="content">
        <div class="item">
            <span>赞</span>
        </div>
    </div>
    <div class="content">
        <div class="item">
            <span>赞</span>
        </div>
    </div>
    <div class="content">
        <div class="item">
            <span>赞</span>
        </div>
    </div>

    <script src="jquery-1.12.4.js"></script>
    <script>
        //当点击.item时执行
        $('.item').click(function () {
           AddFavor(this);
        })

        //点赞函数
        function AddFavor(self) {
            var fontSize=15;
            var top=0;
            var right=0;
            var opacity=1;

            //创建+1标签
            var tag=document.createElement('span');
            $(tag).text('+1');
            $(tag).css('color','#ff6600');
            $(tag).css('position','absolute');
            $(tag).css('fontSize',fontSize+'px');
            $(tag).css('top',top+'px');
            $(tag).css('right',right+'px');
            $(tag).css('opacity',opacity);
            $(self).append(tag);

            //计时器每35mm执行一次
            var obj=setInterval(function () {
                fontSize+=5;
                top-=5;
                right-=5;
                opacity-=0.1;

                $(tag).css('fontSize',fontSize);
                $(tag).css('top',top);
                $(tag).css('right',right);
                $(tag).css('opacity',opacity);

                //当tag透明度小于零时，移除计数器并移除tag
                if(opacity<0){
                    clearInterval(obj);
                    $(tag).remove();
                }
            },35)

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

4.登陆验证
jQuery基础--案例练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    .error{
        color:red;
    }
</style>
<body>
<form id="f1" action="https://www.baidu.com/" method="post">
    <p>用户:<input type="text" name="user" msg="用户名" /></p>
    <p>密码:<input type="password" name="password" msg="密码" /></p>
    <P>邮箱:<input type="text" name="email" msg="邮箱" /></P>
    <p>电话:<input type="text" name="tel" msg="电话" /></p>
    <input type="submit" value="提交">
</form>
<script src="jquery-1.12.4.js"></script>
<script>
    //当页面框架加载完成后执行
    $(function () {

        $(':submit').click(function () {
            $('.error').remove()
            var flag=true;
            //遍历input
            $('#f1').find('input[type="text"],input[type="password"]').each(function () {
                var v=$(this).val();
                var n=$(this).attr('msg');
                //如果为空
                if(v.length<=0){
                    flag=false;
                    var tag=document.createElement('span')
                    tag.className="error";
                    tag.innerHTML=n+"为必填";
                    $(this).after(tag);
                    //return false;
                }
            })
            return flag;
        })
    })
</script>
</body>
</html>

jQuery基础--案例练习

相关阅读