jQuery插件总结

Posted 2021-01-02 caseywei

一.JQuery之jQuery Validate(表单验证)插件
1.引用jQuery和jQuery Validate到页面
2.基本语法设置:
使用validate()来写验证规则


rules 设置验证规则
验证规则中的一些规则设置：
required:true,   //必填
remote: { //远程校验
    url:”remote.php”,
    type:”post”
},
minlength:5, //最小长度
maxlength:18 , //最大长度
rangelength:[5,18] ,     //长度范围
min:2, //最小值
max:10, //最大值
rang:[2,10] ,   //值范围
email:true, //邮箱格式
url:true, //url格式
date:true, //日期格式
dateISO:true, //ISO日期格式
number:true, //数字
digits:true, //整数
equalTo:”#pwd” //与另一元素值相等


messages 设置提示信息


$(‘#form1‘).validate({
        //设置验证规则
        rules:{
            username: {
                required: true,
                minlength: 2,
                maxlength: 15
            }
        },
        //设置提示信息
         messages:{
                username:{
                     required:"必须填写用户名" ,
                     minlength:"用户名长度小于2位",
                     maxlength:"用户名长度大于15位"
                }
        }
    })


3.自定义规则:
使用这个方法来自定义规则
jQuery.validator.addMethod()
// 邮政编码验证
jQuery.validator.addMethod("postCode", function(value, element) {
    var codeReg= /^[0-9]{6}$/;
    return this.optional(element) || (codeReg.test(value));
}, "请正确填写您的邮政编码");


// 手机号码验证
jQuery.validator.addMethod("mobile", function(value, element) {
    var mobileReg = /^1[34578][0-9]{9}$/;
    return this.optional(element) || (mobileReg.test(value));
}, "请正确填写您的手机号码");


例：//自定义
      //手机  添加设置规则mobile
      jQuery.validator.addMethod("mobile",function(value,element){
          var mobileReg = /^1[34578][0-9]{9}$/;
          return this.optional(element) || (mobileReg.test(value));
      })


4.自定义提示样式
使用errerElement来定义标签
使用success来定义的样式和显示内容
        errorElement: "label",
        success: function(label) {
            label.addClass("ok").html(‘验证成功‘);
        },
        validClass: "ok"


例：
 //验证通过
errorElement: "span",
success: function(label) {
        label.addClass("ok").html(‘验证通过‘);
     },
validClass: "ok"


5.普通按钮提交和超链接异步提交方式
使用jquery.validate插件默认提交是普通按钮提交方式，如果使用超链接提交方式
不用通过validate()方法表单验证也能提交到后台
所以如果碰到超链接提交方式的话我们要对超链接进行处理
当点击超链接的时候用jQuery方式提交
例：
//当点击超连接的时候让他提交
$(‘.submit‘).click(function(){
        //同步提交会自动触发validate()方法来验证是否通过
        $(‘#form1‘).submit();
    });
使用这种方式提交会自动触发表单验证，默认提交方式也会自动触发


如果采用异步方式提交，他是不会自动触发表单验证的
所以我们在提交的时候要手动对表单验证进行判断
首先:给validate()方法声明一个变量名 (这是一个对象)
然后:使用对象中的form()方法拿到他 返回值是bool值


普通按钮使用异步提交方式
首先:阻止他的默认提交
然后:使用.post或者.get异步提交方式进行提交


例：
serialize()方法把表单中的值进行串行化提交
$(‘#form1‘).submit(function(){
       //使用异步提交他不会自动触发validate()方法
       //所以需要我们是否form()方法自动判断表单是否通过
       if(myValidate.form()){
           //使用post方法进行异步提交
           $.post("test.php",$("#form1").serialize(),function(res){
               alert(res);
           },‘json‘)
       }
       return false;
   });


二.jQuery之jQuery form插件(AJAX表单提交)
为了解决AJAX无法异步提交文件域的问题
1.1.引用jQuery和jQuery form插件到页面
2.使用ajaxSubmit()方法
ajaxSubmit()
先阻止默认提交然后使用这个方法来进行提交然后对后台处理好的数据进行展示
例：
 $("#form1").submit(function(){
          $(this).ajaxSubmit(function(res){
               alert(res);
         })
            return false;
})


三.jQuery之layer插件(弹窗)
1.引用jQuery和layer插件到页面


2.这个插件的网站:http://layer.layui.com


3.插件中的一些方法：
//提示框
layer.alert(‘内容‘)
//提示层
layer.msg(‘玩命提示中‘);
//tips层
layer.tips(‘Hi，我是tips‘, ‘吸附元素选择器，如#id‘;
)
例：
 $("button:first").on("click",function(){
                layer.alert("我是提示框");
            });
            $("button:first").next().on("click",function(){
                layer.msg("玩命提示中");
            });
            $("button:eq(2)").on("click",function(){
                //tips: 是它的配置项
                layer.tips("我是tips提示层","#div",{
                    tips:[2,"blue"]


                  })
            });


//页面层
layer.open()
例：
$("button:eq(3)").on("click",function(){
                layer.open({
                    type:1,
                    //遮罩层
                    shadeClose: true,
                    //遮罩透明度
                    shade: 0.8,
                    //不显示标题
                    title:"用户登录",
                    //加上边框
                    skin:"layui-layer-rim",
                    //宽高
                    area:[‘420px‘,‘240px‘],
                    //要在弹出层中写什么内容
                    content:"html内容",
                    //关闭的时候让他触发一些事情
                    cancel:function(index){
                        layer.close(index);
                        layer.msg("拜拜",{time:5000,icon:6})
                    }
                })
            })




四.jQuery之jQuery lazyload (延迟加载)
1.引用jquery和jquery.lazyload.js到页面
2.为图片加入样式lazy 图片路径引用方法用data-original
例:<img src="imgs/loading.gif" class="lazy" data-original="imgs/4m.jpg"/>
3.js初始化lazyload并设置图片显示方式
例:
 $(function(){
             $("img.lazy").lazyload(function(){
                 effect:"fadeIn";
             })
        })


五.jQuery之kindEditor(富文本编辑器)
下载地址:http://kindeditor.net/demo.php
1.引用jquery和kindEditor插件
2.然后调用插件
例：
 <script>
        $(function(){
            KindEditor.ready(function(K){
                K.create("#detail",{
                    allowFileManager:true
                })
            })
        })
    </script>


六.myFocus轮播图神器插件
下载地址:http://demo.jb51.net/js/myfocus/demo.html
1.引入myFocus插件
2.调用插件
 <script>
 myFocus.set({
                id:‘myFocus‘,//焦点图盒子ID
                pattern:‘mF_ladyQ‘,//风格应用的名称
                time:3,//切换时间间隔(秒)
                trigger:‘mouseover‘,//触发切换模式:‘click‘(点击)/‘mouseover‘(悬停)
                width:560,//设置图片区域宽度(像素)
                height:300,//设置图片区域高度(像素)
                txtHeight:‘default‘//文字层高度设置(像素),‘default‘为默认高度，0为隐藏
            });
 </script>


七.DatePicker（时间日期选择插件）
下载地址:http://www.my97.net/dp/demo/index.htm




八.三级联动插件
日期三级联动
1.引用插件
<script src="../jQuery_plug-in/js_times/YMDClass.js"></script>
2.调用插件
<script>
    //new YMDselect(‘year‘,‘month‘,‘day‘);
    new YMDselect(‘year‘,‘month‘,‘day‘,1988,8,8);
</script>


省市县三级联动
1.引用插件
<script src="../jQuery_plug-in/qqJsAddress/geo.js"></script>
2.调用插件
<script>
    setup();
    preselect(‘河南省‘);
</script>