jQuery插件

Posted sui776265233

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jQuery插件相关的知识,希望对你有一定的参考价值。

1 jQuery 插件的网站

2 经典jQuery插件

2.1 ### select2 下拉框搜索插件

2.2 datetimepicker 时间日期插件

技术分享图片
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery插件</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="../jquery.datetimepicker.css">
    <style>
        select {
            width:200px;
        }
    </style>
</head>
<body>
    <h1>jquery插件</h1>
    <hr>

    <label for="#">请选择您的籍贯</label>
    <select name="" id="jiguan">
        <option value="1">上海</option>
        <option value="1">北京</option>
        <option value="1">新疆</option>
        <option value="1">台湾</option>
        <option value="1">香港</option>
        <option value="1">澳门</option>
        <option value="1">西藏</option>
        <option value="1">火星</option>
        <option value="1">云南</option>
        <option value="1">福建</option>
        <option value="1">辽宁</option>
        <option value="1">吉林</option>
        <option value="1">黑龙江</option>
        <option value="1">黑龙江</option>
    </select>

    <hr>

    <label for="birthDay">请输入您的生日:</label>
    <input type="text" id="birthDay">

    <script src="../jquery.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
    <script src="../jquery.datetimepicker.full.js"></script>
    <script>
        $(function(){
            $(#jiguan).select2();

            //时间日期插件
            $.datetimepicker.setLocale(zh);
            $(#birthDay).datetimepicker({
                 format:"Y-m-d H:i"
            });
        })
    </script>
</body>
</html>
jQuery插件下拉选框和日期

2.3 fullpage 全屏滚动插件

  • 官网 https://alvarotrigo.com/fullPage/zh/

  • github https://github.com/alvarotrigo/fullpage.js/

  • 用法

    <!--HTML部分-->
    <div id="fullpage>
        <div class="section"></div>
        <div class="section">
            <div class="slide"></div>
            <div class="slide"></div>
            <div class="slide"></div>
        </div>
        <div class="section"></div>
        <div class="section"></div>
    </div>
    自定义的导航 卸载包裹元素的外面
    
    <!--JS部分-->
    <script>
        $("#fullpage").fullpage({
          navigation: true,
          sectionsColor: []
          .....
        })
    </script>?
技术分享图片
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>全屏滚动</title>
    <link href="https://cdn.bootcss.com/fullPage.js/2.9.7/jquery.fullpage.css" rel="stylesheet">
    <style>
        .slide {
            color: #fff;
            font-size:100px;
            text-align: center;
        }
    </style>
</head>
<body>
    <!--HTML部分-->
    <div id="fullpage">
        <div class="section">
            <h2>Page1</h2>
        </div>
        <div class="section">
            <div class="slide">A</div>
            <div class="slide">B</div>
            <div class="slide">C</div>
        </div>
        <div class="section">
            <h2>Page3</h2>
        </div>
        <div class="section">
            <h2>Page4</h2>
        </div>
    </div>


    <script src="../jquery-3.3.1.js"></script>
    <script src="https://cdn.bootcss.com/fullPage.js/2.9.7/jquery.fullpage.js"></script>
    <script>
        $(#fullpage).fullpage({
             navigation: true,
             sectionsColor: [red, green,purple, orange]
        });
    </script>
</body>
</html>
全屏滚动

2.4 lazyload 图片懒加载

2.5 layer 弹窗插件

2.6 nice validator 表单验证

技术分享图片
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单验证</title>
    <style>
        input {
            width: 300px;
            border:1px solid #ccc;
            padding:10px;
            font-size:16px;
        }
        button {
            width: 322px;
            border:1px solid #ccc;
            background:#f5f5f5;
            line-height: 40px;
            cursor: pointer;
            font-size:16px;
        }
        td.success {
            color:green;
        }
        td.error {
            color:red;
        }
    </style>
</head>
<body>
    <h1>注册</h1>
    <hr>

    <form action="user.php" id="myForm">
        <table>
            <tr>
                <td>用户名:</td>
                <td><input type="text" name="username" id="usernameInput"></td>
                <td></td>
            </tr>
            <tr>
                <td>邮箱:</td>
                <td><input type="text" name="email" id="emailInput"></td>
                <td></td>
            </tr>
            <tr>
                <td>密码:</td>
                <td><input type="password" name="pwd" id="pwdInput"></td>
                <td></td>
            </tr>
            <tr>
                <td>确认密码:</td>
                <td><input type="password" name="repwd" id="repwdInput"></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td>
                    <button>注 册</button>
                </td>
                <td></td>
            </tr>
        </table>
    </form>


    <script src="../jquery-3.3.1.js"></script>
    <script>
        //表单验证
        $(function(){
            //用户名验证事件
            $(#usernameInput).on(blur, checkUsername);
            //邮箱验证事件
            $(#emailInput).on(blur, checkEmail);
            //密码验证事件
            $(#pwdInput).on(blur, checkPwd);
            //确认密码 验证
            $(#repwdInput).on(blur, checkRepwd);

            //表单提交事件
            $(#myForm).on(submit, function(){
                return checkUsername() && checkEmail() && checkPwd() && checkRepwd();
            });


            //验证 用户名
            function checkUsername(){
                //获取 用户输入的内容
                var value = $(#usernameInput).val();
                //验证 用户输入是否合法  4~12位 数字/字母/下划线
                if (value.search(/^w{4,12}$/) === -1) {
                    $(#usernameInput).parent().next().text(用户名不合法 必须是4~12位数字、字母、下划线).attr(class, error)
                    return false;
                } else {
                    $(#usernameInput).parent().next().text(用户名可用).attr(class, success)
                    return true;
                }
            }


            //验证邮箱
            // [email protected]  [email protected]   [email protected]
            // www.niho.中国
            function checkEmail() {
                //获取用户的输入
                var value = $(#emailInput).val();
                //验证
                if (value.search(/^[w-][email protected][w-]+(..+){1,3}$/) === -1) {
                    $(#emailInput).parent().next().text(邮箱不合法).attr(class, error);
                    return false;
                } else {
                    $(#emailInput).parent().next().text(邮箱可用).attr(class, success);
                    return true;
                }
            }


            //验证密码  6-18位
            function checkPwd(){
                //获取用户输入
                var value = $(#pwdInput).val();
                //验证
                if (value.length < 6 || value.length > 18) {
                    $(#pwdInput).parent().next().text(密码必须是6到18位).attr(class, error);
                    return false;
                } else {
                    $(#pwdInput).parent().next().text(密码可用).attr(class, success);
                    return true;
                }
            }


            //确认密码
            function checkRepwd() {
                //获取用户输入和上一次密码
                var pwd = $(#pwdInput).val();
                var repwd = $(#repwdInput).val();

                //验证
                if (pwd !== repwd) {
                    $(#repwdInput).parent().next().text(两次密码不一致).attr(class, error);
                    return false;
                } else {
                    $(#repwdInput).parent().next().text(两次密码一致).attr(class, success);
                    return true;
                }
            }

        })
    </script>
</body>
</html>
表单验证

2.7 jQuery-easing

3 自定义jQuery 插件

jQuery.fn.extend() 给jQueryDom扩展方法

$.fn.extend({
  方法名:function(){}
})
//或者
$.fn.方法名 = function(){

}

jQuery.extend() 给jQuery 对象本身扩展方法

$.extend({
   方法名: function(){
   }
})

?

4 jQuery UI

5 jQueryMobile

6 Sizzle

7 Zepto

以上是关于jQuery插件的主要内容,如果未能解决你的问题,请参考以下文章

Java技术jQuery自定义插件开发实践

Jquery插件 easyUI属性汇总

[vscode]--HTML代码片段(基础版,reactvuejquery)

Jquery if复选框是否已选中Bootstrap开关

VIM 代码片段插件 ultisnips 使用教程

jQuery应用 代码片段