jQuery插件

Posted 2021-01-01 sui776265233

tags:

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

1 jQuery 插件的网站

2 经典jQuery插件

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

官网 https://select2.org/
github https://github.com/select2/select2

用法

$(dom).select2()
$(dom).select({
  width:,
  data:,
  ajax:,
  ....
})

2.2 datetimepicker 时间日期插件

github https://github.com/xdan/datetimepicker
文档 https://xdsoft.net/jqplugins/datetimepicker/

用法

//设置语言
$.datetimepicker.setLocale(‘zh‘);
//调用插件
$(dom).datetimepicker({
  datepicker:,
  timepicker:,
  format:"Y-m-d H:i",
  value:，
  ....
})

<!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 图片懒加载

官网 https://appelsiini.net/projects/lazyload/
github https://github.com/tuupola/jquery_lazyload/tree/2.x
用法
```
$("#lazyWrapper img").lazyload()
```
?

2.5 layer 弹窗插件

官网 http://layer.layui.com/?alone
github https://github.com/sentsin/layer/

用法

layer.alert()
layer.confirm()
layer.msg()
layer.load()
layer.tips()
layer.colse()
layer.open({
  type: ,
  title: ,
  content: 
  ....
})
...

2.6 nice validator 表单验证

官网 https://validator.niceue.com/
github https://github.com/niceue/nice-validator
用法
```
$("form").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

官网 http://gsgd.co.uk/sandbox/jquery/easing/
github https://github.com/gdsmith/jquery.easing
用法
```
$(dom).hide(speed, easing, fn)
```
?

3 自定义jQuery 插件

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

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

}

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

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

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

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

Jquery插件 easyUI属性汇总

[vscode]--HTML代码片段（基础版，reactvuejquery）

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

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

jQuery应用代码片段