前端笔记之jQuery01-优快云博客

本文深入探讨了jQuery动画效果，如隐藏、显示、滑动及淡入淡出，并演示了手动轮播图的实现。同时，文章讲解了如何遍历jQuery对象、绑定事件，以及模拟抽奖功能，最后介绍了表单验证器插件的使用。
摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery</title>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <script src="js/jquery.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #canvas {
            width: 100%;
            height: 300px;
            background-color: rgb(256, 125, 86);
        }

        .container {
            margin-bottom: 10px;
            border: 1px solid red;
        }

        #ad {
            /*width: 800px;*/
            width: 100%;
            /*height: 400px;*/
            margin: 10px auto;
            overflow: hidden;
        }

        #ad ul {
            /*width: 3200px;*/
            /*width: 400%;*/
            height: 300px;

            position: relative;
            /*left: -800px;*/
        }

        #ad ul li {
            /*width: 25%;*/
            list-style: none;
            float: left;
            display: inline-block;
        }

        #ad li img {
            /*width: 800px;*/
            width: 100%;
        }

        #sp input[type=button] {
            margin: 10px;
            width: 100px;
        }
        #event {
            width: 80%;
            height: 200px;
            background-color: red;
            margin: 0 auto;
        }
        #prize {
            width: 80%;
            height: 300px;
            margin: 20px auto;
        }
        #randomPrize {
            width: 150px;
            height: 100px;
        }
        #randomPrize img, #prize img {
            width: 100%;
            height: 100%;
        }
        .footer {
            width: 80%;
            margin: 10px auto;
        }
        .footer > div:nth-child(1) {
            float: left;
        }
        .footer > div:nth-child(2) {
            float: left;
            margin-left: 100px;
            margin-top: 30px;
        }
        #registerFrom {
            width: 60%;
            margin: 0 auto;
        }
    </style>
</head>
<body>

<div class="container text-center">
    <h1>jQuery动画</h1>
    <input type="button" value="隐藏div" id="hide">
    <input type="button" value="显示div" id="show">
    <input type="button" value="切换隐藏显示" id="toggle">

    <input type="button" value="向上滑动" id="slideUp">
    <input type="button" value="向下滑动" id="slideDown">
    <input type="button" value="切换滑动" id="slideToggle">

    <input type="button" value="淡出" id="fadeOut">
    <input type="button" value="淡入" id="fadeIn">
    <input type="button" value="淡入淡出切换" id="fadeToggle">
    <hr>
    <div id="canvas"></div>
</div>
<div class="container text-center">
    <h1>jQuery手动轮播图</h1>
    <div id="ad">
        <ul>
            <li><img src="img/1.webp"></li>
            <li><img src="img/2.webp"></li>
            <li><img src="img/3.webp"></li>
            <li><img src="img/4.webp"></li>
            <li><img src="img/1.webp"></li>
            <li><img src="img/2.webp"></li>
            <li><img src="img/3.webp"></li>
            <li><img src="img/4.webp"></li>
        </ul>
        <div id="sp">
            <input type="button" value="pre" id="pre"><input type="button" value="next" id="next">
        </div>
    </div>
</div>
<div class="container text-center">
    <h1>遍历jQuery对象</h1>
    <ul id="course">
        <li>java</li>
        <li>python</li>
        <li>hadoop</li>
        <li>vue</li>
        <li>springboot</li>
    </ul>
</div>
<div class="container text-center">
    <h1>jQuery绑定事件</h1>
    <div id="event"></div>
</div>
<div class="container text-center">
    <h1>模拟抽奖</h1>
    <div id="prize"><img src="img/1.webp" alt=""></div>
    <div class="footer">
        <div id="randomPrize"><img src="img/1.webp" alt=""></div>
        <div>
            <input type="button" value="开始" id="start">
            <input type="button" value="暂停" id="stop">
        </div>
    </div>
</div>
<div class="container text-center">
    <h1>表单验证器插件</h1>
    <form action="#" id="registerFrom" class="form-horizontal">
        <div class="form-group">
            <label for="username" class="col-md-2 control-label">用户名</label>
            <div class="col-md-10">
                <input class="form-control" type="text" name="username" id="username">
            </div>
        </div>
        <div class="form-group">
            <label for="password" class="col-md-2 control-label">密码</label>
            <div class="col-md-10">
                <input class="form-control" type="password" name="password" id="password">
            </div>
        </div>
        <div class="form-group">
            <label for="checkpwd" class="col-md-2 control-label">确认密码</label>
            <div class="col-md-10">
                <input class="form-control" type="password" name="checkpwd" id="checkpwd">
            </div>
        </div>
    </form>
</div>

</body>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="js/jquery.validate.js"></script>
<script>
    $(function () {
        $(function () {
            $("#hide").click(function () {
                $("#canvas").hide(1000, function () {

                });
            });
            $("#show").click(function () {
                $("#canvas").show(1000, function () {

                });
            });
            $("#toggle").click(function () {
                $("#canvas").toggle(1000, function () {

                });
            });

            $("#slideUp").click(function () {
                $("#canvas").slideUp(1000, function () {

                });
            });
            $("#slideDown").click(function () {
                $("#canvas").slideDown(1000, function () {

                });
            });
            $("#slideToggle").click(function () {
                $("#canvas").slideToggle(1000, function () {

                });
            });

            $("#fadeOut").click(function () {
                $("#canvas").fadeOut(1000, function () {

                });
            });
            $("#fadeIn").click(function () {
                $("#canvas").fadeIn(1000, function () {

                });
            });
            $("#fadeToggle").click(function () {
                $("#canvas").fadeToggle(1000, function () {

                });
            });
        });
        $(function () {
            var isRunning = false;
            var currentIndex = 0;
            var $ul = $("#ad ul");
            var count = $("#ad ul li").length;


            $ul.css("width", 100 * count + "%");
            $("#ad ul li").css("width", 100 / count + "%");

            var ulWidth = Number($ul.css("width").replace("px", ""));
            $("#pre").click(function () {
                if (isRunning) {
                    return;
                }
                isRunning = true;

                var left = Number($ul.css("left").replace("px", ""));
                if (left >= 0) {
                    isRunning = false;
                    return;
                }

                left = left + ulWidth / count + 'px';
                $ul.animate({left: left}, 500, function () {
                    isRunning = false;
                    currentIndex -= 1;
                    console.log(currentIndex)
                });
            });
            $("#next").click(function () {
                if (isRunning) {
                    return;
                }
                isRunning = true;

                var right = Number($("#ad ul").css("left").replace("px", ""));
                if (Math.round(ulWidth * (1 - count)) >= Math.round(right * count)) {
                    isRunning = false;
                    return;
                }

                right = right - ulWidth / count + 'px';
                $ul.animate({left: right}, 500, function () {
                    isRunning = false;
                    currentIndex += 1;
                    console.log(currentIndex)
                });
            });


            $(window).on('resize', function () {
                ulWidth = Number($ul.css("width").replace("px", ""));
                $ul.css("left", ulWidth / count * currentIndex * -1);
            });
        });
        $(function () {
            var lis = $("#course li");
            for(var i = 0; i < lis.length; i++) {
                console.log(i, $(lis[i]).text());

            }
            console.log(">>>>>>>");
            lis.each(function (index, elem) {
                console.log(index, $(elem).text());
            });
            console.log(">>>>>>>");
            $.each(lis, function (index, elem) {
                console.log(index, $(elem).text());
            });
        });
        $(function () {
           $("#event").on({
               "mouseover": function (e) {
                   $(e.target).css("background-color", "orange");
               },
               "mouseout": function (e) {
                   $(e.target).css("background-color", "red");
               },
               "click": function (e) {
                   $(e.target).css("background-color", "pink");
                   // 解绑当前对象的悬停事件
                   $(e.target).off("mouseover");
               }
           });

        });
        $(function () {
            var imgs = ["1.webp", "2.webp", "3.webp", "4.webp"];
            var index = 0;
            var timer = null;

            $("#start").click(function () {
                $(this).prop("disabled", true);
                $("#stop").prop("disabled", false);

                timer = setInterval(function () {
                    index = (++index) % 4;
                    $("#randomPrize img").attr("src", "img/" + imgs[index]);
                }, 50);
            });
            $("#stop").click(function () {
                $(this).prop("disabled", true);
                $("#start").prop("disabled", false);

                $("#prize img").attr("src", "img/" + imgs[index]);
                clearInterval(timer);
            });
        });
        $(function () {
           $("#registerFrom").validate({
               /*验证规则*/
               rules: {
                   username: {
                       required: true,
                       checkUserName: [5, 10]
                   },
                   password: {
                       required: true,
                       rangelength: [8, 20]
                   },
                   checkpwd: {
                       required: true,
                       rangelength: [8, 20],
                       equalTo: "#password"
                   }
               },
               /*验证规则不通过胡信息提示*/
               messages: {
                   username: {
                       required: "输入不能为空",
                       checkUserName: "用户名长度在5-10之间"
                   },
                   password: {
                       required: "密码不呢那个为空",
                       rangelength: "密码长度在8-20之间"
                   },
                   checkpwd: {
                       required: "密码不呢那个为空",
                       rangelength: "密码长度在8-20之间",
                       equalTo: "密码不一致"
                   }
               }
           });

            /**
             * 自定义验证规则
             * value 是验证对象胡值，此处是用户名输入内容
             * elem 是验证对象，此处是用户名输入框
             * params 验证规则传入的参数，此处传入了[5, 10]
             */
           $.validator.addMethod("checkUserName", function (value, elem, params) {
               if (value.length >= params[0] && value.length <= params[1]) {
                   return true;
               }
               return false;
           });
        });
    });
</script>
</html>