jQuery中的插件使用

最新推荐文章于 2021-06-14 16:10:08 发布

小召小召

最新推荐文章于 2021-06-14 16:10:08 发布

阅读量172

点赞数

文章标签： jquery js

本文链接：https://blog.csdn.net/originalApril/article/details/115469663

版权

文章目录

一、前端验证插件
- 1.jQuery原生写法（示例）
- 2.jQuery插件写法
二、懒加载

一、前端验证插件

前端验证插件 jquery.validate.js
参考网址：https://jqueryvalidation.org/

1.jQuery原生写法（示例）

<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset='UTF-8'>
    <title>Document</title>
</head>
<body>
    <form action="" id="commentForm" methods="get">
        <fieldset>
            <p>
                <label for="cname">用户名（必须的，至少两个字符）：</label>
                <input type="text" id="cname" minlength="2">
            </p>
            <p>
                <label for="cemail">邮箱（必须的，邮箱格式）：</label>
                <input type="text" id="cemail">
            </p>
            <p>
                <input class="submit" type="submit" value="提交" />
            </p>
        </fieldset>
    </form>

    <script src="./js/jquery-1.11.1.js"></script>
    <script>
        $(function(){
            $("#commentForm").submit(function(){
                var $cname=$("#cname").val()
                var $cemail=$("#email").val()
                // 判断
                if($cname==''){
                    alert("用户名不能为空！")
                    return false;//不允许表单提交
                }
                if($email==''){
                    alert("邮箱不能为空！")
                    return false
                }
                return true//允许表单提交
            })
        })
    </script>
</body>
</html>

结果如下：
在这里插入图片描述

2.jQuery插件写法

代码示例如下：

<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset='UTF-8'>
    <title>Document</title>
    <style>
        /* 规则提示中的文本样式 */
        .error{
            color: red;
        }
        label .error{
            color: red;
        }
    </style>
</head>
<body>
    <form action="index.jsp" id="commentForm" methods="get">
        <fieldset>
            <p>
                <label for="cname">用户名(必须的,至少两个字符)</label>
                <input id="cname" name="cname" type="text" required minlength="2" >
            </p>
            <p>
                <label for="password">密码(必须的)</label>
                <input id="password" name="password" type="text" required minlength="2" >
            </p>
            <p>
                <label for="confirm_password">确认密码(必须的)</label>
                <input id="confirm_password" name="confirm_password" type="text" required minlength="2" >
            </p>
            <p>
                <label for="cemail">邮箱(必须的,邮箱)</label>
                <input id="cemail" name="cemail" type="text"  required >
            </p>
            <p>
                <label for="nicheng">昵称(必须的)</label>
                <input id="nicheng" name="nicheng" type="text"  required >
            </p>
            <p>
                <input class="submit" type="submit" value="提交" />
            </p>
        </fieldset>
    </form>
    
    <script src="./js/jquery-1.11.1.js"></script>
    <script src="./js/jquery.validate.js"></script>
    <script src="./js/messages_zh.js"></script>
    <script>
        $(function(){
            // 编码验证
            $("#commentForm").validate({
                // 规则
                rules:{
                    cname:"required",
                    password:{
                        required:true,
                        minlength:5,
                    },
                    confirm_password:{
                        required:true,
                        minlength:5,
                        equalTo:"#password"//和password一样
                    },
                    cemail:{
                        required:true,
                        email:true,
                    },
                    nicheng:{
                        required:true,
                        minlength:5,
                        maxlength:15,
                    }
                },
                // 信息
                messages:{
                    cname:"请输入用户名",
                    cemail:{
                        required:"邮箱是必须的",
                        email:"邮箱格式必须有@"
                    },
                    nicheng:{
                        required:"昵称是必须的",
                        minlength:"最小长度是5位的",
                        maxlength:"最大的长度是15位的"
                    },
                    //如果不写password信息
                    password:{
                        required:"密码是必须的"
                    }
                    //...
                }
            })
        })
    </script>
</body>
</html>

结果如下：
在这里插入图片描述

二、懒加载

懒加载原理：详见大神博客：
https://blog.csdn.net/w1418899532/article/details/90515969
代码示例如下：

<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset='UTF-8'>
    <title>Document</title>
</head>
<body>
    <!-- jquery.lazyload.js 是没有src的 有的是一个data-original -->
    <img class="lazy" alt="" data-original="imgs/1.jpg" width="600" height="400">
    <img class="lazy" alt="" data-original="imgs/2.jpg" width="600" height="400">
    <img class="lazy" alt="" data-original="imgs/3.jpg" width="600" height="400">
    <img class="lazy" alt="" data-original="imgs/4.jpg" width="600" height="400">
    <img class="lazy" alt="" data-original="imgs/5.jpg" width="600" height="400">
    <script src="./js/jquery-1.11.0.min.js"></script>
    <script src="./js/jquery.lazyload.js"></script>
    <script>
        $(function(){
            $("img.lazy").lazyload({effect:"fadeIn"}) //效果 淡入
        })
    </script>
</body>
</html>