码迷,mamicode.com
首页 > Web开发 > 详细

jQuery基础--案例练习

时间:2018-07-27 01:10:17      阅读:222      评论:0      收藏:0      [点我收藏+]

标签:port   点击   click   head   pac   border   lin   host   process   

1.端口案例改进,操作更灵活
技术分享图片技术分享图片

<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,h2{
            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><h2>操作</h2></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.菜单切换内容
技术分享图片

<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>

jQuery基础--案例练习

标签:port   点击   click   head   pac   border   lin   host   process   

原文地址:http://blog.51cto.com/13803166/2150776

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!