jQuery(三)

序：两种绑定时间的方式：

　　1、jQ_obj.click(function () {})。

　　2、jQ_obj.on('click', function () {})。

一、克隆事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="jQuery351.js"></script>
    <style>
        #copy {
            height: 100px;
            width: 100px;
            border: orange 5px solid;
            text-align: center;
        }
    </style>
</head>
<body>
<button id="copy">点击复制</button>
<script>
    let $copyEle = $('#copy')
    $copyEle.on('click', function () {
        $(this).clone(true).insertAfter($(this))
    })
</script>
</body>
</html>

二、自定义模态框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="jQuery351.js"></script>
    <style>
        .hide {
            display: none;
        }

        #z0 {
            font-size: 40px;
            color: deepskyblue;
        }

        #z1 {
            position: fixed;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            background: rgba(125, 125, 125, 0.3);
            z-index: 1;
        }

        #z2 {
            height: 300px;
            width: 300px;
            background: lightcoral;
            position: fixed;
            top: 50%;
            left: 50%;
            margin-top: -150px;
            margin-left: -150px;
            z-index: 2;
        }
    </style>
</head>
<body>
<span id="z0">最底层的内容</span>
<button id="on">点击打开盖层</button>
<div id="z1" class="hide"></div>
<div id="z2" class="hide">
    <button id="off">点击关闭盖层</button>
</div>
<script>
    let $onEle = $('#on')
    let $offEle = $('#off')
    let $z1Ele = $('#z1')
    let $z2Ele = $('#z2')
    $onEle.on('click', function () {
        $z1Ele.removeClass('hide')
        $z2Ele.removeClass('hide')
    })
    $offEle.on('click', function () {
        $z1Ele.addClass('hide')
        $z2Ele.addClass('hide')
    })
</script>
</body>
</html>

三、隐藏/打开子菜单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="jQuery351.js"></script>
    <style>
        ul {
            list-style-type: none;
            font-size: 40px;
            color: red;
        }

        li {
            font-size: 30px;
            color: blue;
        }

        #left_div {
            width: 300px;
            height: 1000px;
            position: absolute;
            top: 0;
            left: 0;
            background: navajowhite;
        }

        .left_ul {
            height: 260px;
            width: 300px;
            position: absolute;
            left: 20px;
        }

        .hide {
            display: none;
        }
    </style>
</head>
<body>
<div id="left_div">
    <div class="left_ul" style="top: 30px">
        <ul>aaa
            <li>a1</li>
            <li>a2</li>
            <li>a3</li>
        </ul>
    </div>
    <div class="left_ul" style="top: 360px">
        <ul>bbb
            <li>b1</li>
            <li>b2</li>
            <li>b3</li>
        </ul>
    </div>
    <div class="left_ul" style="top: 690px">
        <ul>ccc
            <li>c1</li>
            <li>c2</li>
            <li>c3</li>
        </ul>
    </div>
</div>
<script>
    let $liEle = $('li')
    let $ulEle = $('ul')
    $liEle.addClass('hide')
    $ulEle.on('click',
        function () {
            $(this).children().toggleClass('hide')
        })
</script>
</body>
</html>

四、返回顶部按钮

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="jQuery351.js"></script>
    <style>
        .hide {
            display: none;
        }

        #to_top {
            height: 50px;
            width: 50px;
            background: orange;
            position: fixed;
            right: 30px;
            bottom: 30px;
            text-align: center;
        }

        #left_div {
            height: 2000px;
            width: 300px;
            background: lightcoral;
        }
    </style>
</head>
<body>
<div id="left_div"></div>
<button id="to_top" class="hide">返回顶部</button>
<script>
    let $windowEle = $(window)
    let $to_topEle = $('#to_top')
    $windowEle.on('scroll', (function () {
        if ($(this).scrollTop() > 200) {
            $to_topEle.removeClass('hide')
        } else {
            $to_topEle.addClass('hide')
        }
    }))
    $to_topEle.on('click', function () {
        $windowEle.scrollTop(0)
    })
</script>
</body>
</html>

五、登录校验

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="jQuery351.js"></script>
    <style>
        .remind {
            color: red;

        }

        .hide {
            display: none;
        }
    </style>
</head>
<body>
<div>
    username: <input type="text" id="username"><span class="remind hide"
                                                     id="username_remind">&nbsp&nbsp&nbsp用户名不能为空</span>
</div>
<div>
    password: <input type="text" id="password"><span class="remind hide"
                                                     id="password_remind">&nbsp&nbsp&nbsp密码不能为空</span>
</div>
<button id="send">提交</button>
<script>
    let $sendEle = $('#send')
    let $usernameEle = $('#username')
    let $passwordEle = $('#password')
    let $inputELe = $('input')
    $sendEle.on('click', function () {
        if (!$usernameEle.val()) {
            $('#username_remind').removeClass('hide')
        }
        if (!$passwordEle.val()) {
            $('#password_remind').removeClass('hide')
        }
    })
    $inputELe.on('focus', function () {
        $(this).next().addClass('hide')
    })
</script>
</body>
</html>

六、实时监视input

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="jQuery351.js"></script>
    <style>
        .hide {
            display: none;
        }
    </style>
</head>
<body>
<input type="text"><span style="color: red" class="hide">&nbsp&nbsp&nbsp长度不能大于10</span>
<script>
    let $inputEle = $('input')
    $inputEle.on('input', function () {
        if ($(this).val().length > 10) {
            $(this).next().removeClass('hide')
        }
        if ($(this).val().length < 11) {
            $(this).next().addClass('hide')
        }
    })
</script>
</body>
</html>

七、hover事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="jQuery351.js"></script>
    <style>
        #div1 {
            height: 100px;
            width: 100px;
            border: 5px black solid;
        }

        #div2 {
            height: 100px;
            width: 100px;
            margin-top: 30px;
            border: lightblue 5px solid;
        }

        .to_red {
            background: red;
        }
    </style>
</head>
<body>
<div id="div1">移上来下边的变红，移出恢复</div>
<div id="div2"></div>
<script>
    let $div1Ele = $('#div1')
    $div1Ele.hover(
        function () {
            $('#div2').addClass('to_red')
        },
        function () {
            $('#div2').removeClass('to_red')
        }
    )
</script>
</body>
</html>

八、任意位置按“Q”则关闭窗口

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="jQuery351.js"></script>
</head>
<body>
<div style="font-size: 40px; text-align: center; height: 300px;  300px; border: lightcoral 5px solid">按Q关闭窗口</div>
<script>
    let $windowEle = $(window)
    $windowEle.keydown(function (event) {
        if (event.keyCode === 81) {
            window.close()
        }
    })
</script>
</body>
</html>
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/caoyu080202201/p/12927464.html