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>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏非著名程序员

基础篇章:关于 React Native 之 RefreshControl 组件的讲解

(友情提示:RN学习,从最基础的开始,大家不要嫌弃太基础,会的同学请自行略过,希望不要耽误已经会的同学的宝贵时间) 我们已经讲完了 ScrollView 和 L...

2205
来自专栏GIS讲堂

OL3+中链家地图找房功能实现

看看链家的地图找房功能,其实比较简单,主要包涵: 1)基于行政区划的统计展示; 2)分级别展示,逐级钻取。

1923
来自专栏非著名程序员

基础篇章:关于 React Native 之 Picker 组件的讲解

(友情提示:RN学习,从最基础的开始,大家不要嫌弃太基础,会的同学请自行略过,希望不要耽误已经会的同学的宝贵时间) 今天我们就讲Picker ,顾名思义就是选择...

1848
来自专栏程序员的知识天地

七夕快到了!表白小程序制作详解,撩翻你的女神!

大家可能都会在抖音上刷过,那种表白小程序,但在我看来表白还是亲口说出来比较好,这类小程序只适合在平常的一些小节日给对方一个惊喜。话不多说,现在进入正题:

1941
来自专栏用户2442861的专栏

Qt学习之路_14(简易音乐播放器)

http://www.cnblogs.com/tornadomeet/archive/2012/09/23/2699077.html

7412
来自专栏电光石火

Markdown 语法手册 (完整整理版)

1. 斜体和粗体 代码: *斜体*或_斜体_ **粗体** ***加粗斜体*** ~~删除线~~ 显示效果: ...

85110
来自专栏Alan's Lab

[swift]读取svg图片为UIBezierPath,开心做动画

最近手痒又想整点动画玩玩,但是想了几个主意发现稍微复杂一点的手写都一定会累爆。这篇文章记录一下今天折腾的一个方案。说来简单,就是用矢量设计工具舒舒服服的做好设计...

1252
来自专栏Google Dart

Flutter 构建完整应用手册-设计基础知识 顶

这本食谱包含演示如何在写Flutter应用程序时解决常见问题的食谱。 每个配方都是独立的,可以作为参考帮助您构建应用程序。

1171
来自专栏hightopo

基于 HTML5 Canvas 的工控机柜 U 位动态管理

2304
来自专栏React Native开发圈

React Native 文档查看组件

GitHub - forrest23/ReactNativeComponents: React Native组件大全

2111

扫码关注云+社区

领取腾讯云代金券