jQuery实例 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="jquery-3.2.1.min.js"></script>

    <style>
        * {
            margin: 0px;
            padding: 0px;
        }

        li {
            list-style: none;
        }

        .hid {
            display: none;
        }

        .nav-content {
            width: 180px;
            margin: 100px 100px;
            background-color: #dadac8;
        }

        .nav-title {
            padding: 5px 0px 5px 10px;
            background-color: cornflowerblue;
            border: 1px solid darkgreen;
        }

        .small-nav li {
            margin-left: 30px;
        }

    </style>
    <title>菜单练习</title>
</head>
<body>
<div class="nav">
    <div class="nav-content">
        <div class="nav-title">Python</div>
        <div class="small-nav hid">
            <ul>
                <li>数据类型</li>
                <li>函数</li>
                <li>面向对象</li>
            </ul>
        </div>

        <div class="nav-title">MySQL</div>
        <div class="small-nav hid">
            <ul>
                <li>基础</li>
                <li>单表查询</li>
                <li>多表查询</li>
            </ul>
        </div>

        <div class="nav-title">JavaScript</div>
        <div class="small-nav hid">
            <ul>
                <li>BOM</li>
                <li>DOM</li>
                <li>jQuery</li>
            </ul>
        </div>
    </div>
</div>

<script>
    $('.nav-title').click(function () {
        if  ($(this).next().hasClass('hid')){
            $('.small-nav').addClass('hid');
            $(this).next().removeClass('hid')
        }else{
            $('.small-nav').addClass('hid')
        }

    })
</script>
</body>
</html>
左侧菜单实例

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>模态框示例</title>
    <script src="jquery-3.2.1.min.js"></script>
    <style>
        .test .btn {
            height: 50px;
            width: 150px;
            position: absolute;
            left: 300px;
            top: 300px;
            border: 1px dashed red;
            font-size: 18px;
        }

        .hid {
            display: none;
        }

        .hid-box {
            width: 300px;
            height: 200px;
            background-color: rgba(255,50,99,0.3);
            color: white;
            text-align: center;
            padding-top: 50px;
            margin: 200px 0px 0px 500px;
            position: fixed;
            z-index: 1000;
        }

        .bg {
            width: auto;
            height: 800px;
            background-color: rgba(10,250,10,0.2);
            position: fixed;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            z-index: 999;
        }
    </style>
</head>
<body>

<div class="bg hid"></div>

<div class="test">
    <input type="button" class="btn" value="点我打开模态框">

    <div class="hid-box hid">
        你站在这里不要动
        <p></p>
        我去给你买两个橘子
        <p></p>
        <input type="button" value="嗯嗯" class="close">
    </div>



    <script>

        $('.btn').click(function () {
            $('.hid-box').removeClass('hid');
            $('.bg').removeClass('hid')
        });

        $('.close').click(function () {
            $('.hid-box').addClass('hid');
            $('.bg').addClass('hid')
        })

    </script>
</div>
</body>
</html>
模态框示例

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>全选框示例</title>
    <script src="jquery-3.2.1.min.js"></script>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }
    .download {
        border: 1px dashed grey;
        background-color: #dadccc;
        padding: 5px 0px;
        width: 600px;
        height: auto;
        position: fixed;
        left: 50%;
        top: 50%;
        margin-left: -300px;
        margin-top: -150px;
    }

    .jishuhang {
        background-color: #b9b9aa;
    }
    .oushuhang {
        background-color: #dadccc;
    }
</style>
<body>
<table class="download">
    <thead>
        <tr class="title">
            <th>选择</th>
            <th>歌曲名</th>
            <th>演唱者</th>
            <th>大小</th>
        </tr>
    </thead>
    <tbody>
        <tr class="jishuhang">
            <td><input type="checkbox" value="歌曲1"> </td>
            <td>《瞎几把乱写的歌》</td>
            <td>付勇</td>
            <td>8.88M</td>
        </tr>
        <tr class="oushuhang">
            <td><input type="checkbox" value="歌曲2"> </td>
            <td>《自己都不会唱的歌》</td>
            <td>付勇</td>
            <td>8.88M</td>
        </tr>
        <tr class="jishuhang">
            <td><input type="checkbox" value="歌曲3"> </td>
            <td>《一句歌词都没有的歌》</td>
            <td>付勇</td>
            <td>8.88M</td>
        </tr>
        <tr class="oushuhang">
            <td><input type="checkbox" value="歌曲4"> </td>
            <td>《怎么都学不会的歌》</td>
            <td>付勇</td>
            <td>8.88M</td>
        </tr>
        <tr>
            <td colspan="3">
                <input class="quanxuan" type="button" value="全选">
                <input class="fanxuan" type="button" value="反选">
                <input class="quxiao" type="button" value="取消">
            </td>
        </tr>
    </tbody>
    <script>
        $('.quanxuan').click(function () {
            $(':checkbox').prop('checked',true)
        });

        $('.quxiao').click(function () {
            $(':checkbox').prop('checked',false)
        });

        $('.fanxuan').click(function () {
            var $checkboxEles = $(':checkbox')
            for (var i= 0;i<$checkboxEles.length;i++){
                if ($($checkboxEles[i]).prop('checked')){
                    $($checkboxEles[i]).prop('checked',false)
                }else{
                    $($checkboxEles[i]).prop('checked',true)
                }
            }
        })
    </script>

</table>
</body>
</html>
全选框示例

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>返回顶部示例</title>
    <script src="jquery-3.2.1.min.js"></script>

    <style>
        .main{
            height: 2000px;
        }

        .hide{
            display: none;
        }

        .fanhui{
            background-color: #6a686d;
            position: fixed;
            right: 100px;
            bottom: 100px;
            border: 1px solid black;
        }
    </style>
</head>
<body>
<div class="main">
    请将你的鼠标滚轮往上滚！！！！！！！！！！
</div>
<div class="fanhui hide">
     返回顶部
</div>
<script>
    $(window).scroll(function () {
        if ($(window).scrollTop() > 100){
            $('.fanhui').removeClass('hide')
        }else{
            $('.fanhui').addClass('hide')
        }
    });

    $('.fanhui').click(function () {
        $(window).scrollTop(0)
    })
</script>
</body>
</html>
返回顶部示例

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>输入框验证示例</title>
    <style>
        .jinggao{
            color: red;
        }
        .hide{
            display: none;
        }
    </style>
    <script src="jquery-3.2.1.min.js"></script>
</head>
<body>
<form>
    <input type="text">
    <span class="jinggao hide">输入内容不能为空</span>
    <script>

        $(':text').blur(function () {
            if($(this).val() == ''){
                $('.jinggao').removeClass('hide')
            }
        });

        $(':text').focus(function () {
            $('.jinggao').addClass('hide')
        })

    </script>
</form>
</body>
</html>
输入框验证示例

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>多选操作</title>
</head>
<body>
<table border="1" style="margin: 200px 0px 0px 300px">
    <thead>
    <tr>
        <th>选择</th>
        <th>姓名</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td><input type="checkbox" value="0"></td>
        <td>小明</td>
        <td>
            <select>
                <option value="0">上线</option>
                <option value="1">下线</option>
                <option value="2">离线</option>
            </select>
        </td>
    </tr>
    <tr>
        <td><input type="checkbox" value="0"></td>
        <td>小花</td>
        <td>
            <select>
                <option value="0">上线</option>
                <option value="1">下线</option>
                <option value="2">离线</option>
            </select>
        </td>
    </tr>
    <tr>
        <td><input type="checkbox" value="0"></td>
        <td>小虎</td>
        <td>
            <select>
                <option value="0">上线</option>
                <option value="1">下线</option>
                <option value="2">离线</option>
            </select>
        </td>
    </tr>
    </tbody>
</table>
<script src="jquery-3.2.1.min.js"></script>
<script>
    var key_flag = false;
    var $bodyEle = $('body');
    $bodyEle.on('keydown',function (evt) {
        if (evt.keyCode === 17){
            key_flag = true;
        }
    });

    $bodyEle.on('keyup',function () {
        key_flag = false;
    });

    $('select').on('change',function () {
        var value = $(this).val();
        var checkedEles = $(':checkbox');
        for (var i=0;i<checkedEles.length;i++){

            if (key_flag && $(checkedEles[i]).prop('checked')){
                $(checkedEles[i]).parent().siblings().last().find('select').val(value);
            }
        }
    })


</script>
</body>
</html>
按下ctrl同步操作

 

posted @ 2018-03-14 16:26  人生不如戏  阅读(149)  评论(0)  编辑  收藏  举报