几种 jQ 插件类简介

模态框: 打开一个弹框 不关闭它就不能做框外的操作 必须关闭或弹出另外的弹框

 

加载延迟loading + 进度条只要有请求 就处理一下监控ajax 全局事件jquery: 

 $('#box').ajaxStart() //开始 多个ajax共享一个start

$('#box').ajaxSend()//发送

$('#box').ajaxSuccess()//成功

$('#box').ajaxComplete()//完成

$('#box').ajaxError() //完成后有错误

$('#box').ajaxStop()// 停止 多个ajax共享一个Stop

 

 

Nprogress :

进度条引入 css js   

 Nprogress.start（）启动

 Nprogress.done() 关闭

 一般配合.ajaxStart() / .ajaxStop() 使用

 

基于jquery的表单插件 :

jquery-form

每个表单都要有name属性!!! 自动封装表单数据

    $('表单元素').ajaxSubmit(options)    
    //形参和ajax一样
   // 表单data不用添加 会自动提交

 

 

表单验证 jquery.validate 

//自定义属性

data-required//必填 禁止提交空

data-pattern="/^\d+$/" //禁止提交数字以外的字符串

data-describedby='for_name'

data-description='name' //匹配描述错误信息 多个文本框可以共用

data-conditional = "f1 f2 f3 ">

<span id="for_name">提示错误信息</span>$(表单元素).vakidate({

 
conditional:{
    f1:function(){
    console.log(arguments);
  //  第一个参数为文本框的输入值
    return false;
    },
    f2:function(){
    console.log(arguments);
    return false;
    },f2:function(){
    console.log(arguments);
       // 三个函数只要有一个返回值的false就不能提交
    return false;
    }
    description:{
    name:{
    required :"内容不能为空",
    pattern : "只能填写数字"
        }
    }
})

 

 

基于bootstrap的时间选择器bootstarp-datepicker

一.样式控制

//自定义属性

// 日期格式

data-provide='datepicker'

data-date-format="yy-mm-dd"

data-date-language="zh-CN"//语言有一个文件 locales 很多压缩的js 中文为 zh-CN.js 

 

 

二.js 控制

 

    $('表单元素').datepicker({
format:"yy-mm-dd",//日期格式
language:"zh-CN"//语言
 
})

 

location.search // 可获取 url '?'后面的参数包括'?'

 

 

bootcdn 里面的插件 上传图片/头像/ 文件

速度比自己下载添加更快

事件委托this 指向会改变为真正用到事件的对象

 

插件:

1. webUploader

HTML

<div id="uploader" class="wu-example">
    <!--用来存放文件信息-->
    <div id="thelist" class="uploader-list"></div>
    <div class="btns">
        <div id="picker">选择文件</div>
        <button id="ctlBtn" class="btn btn-default">开始上传</button>
    </div>
</div>

 

JS

//js
var uploader = WebUploader.create({

    // swf文件路径
    swf: BASE_URL + '/js/Uploader.swf',

    // 文件接收服务端。
    server: 'http://webuploader.duapp.com/server/fileupload.php',

    // 选择文件的按钮。可选。
    // 内部根据当前运行是创建，可能是input元素，也可能是flash.
    pick: '#picker',

    // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
    resize: false
});

 

2./Uploaderify

一,

<form action="上传路径" methods='post/get上传方式'enctype="
表单上传文件必须添加: multipart/form-data" name="form"><input type="file" /></form>

二,

var form = document.form ;
var fd = new FormData(form);
var xhr=new XMLHttpRequest();xhr.open("post","后台路径")xhr.send(fd); 传递了所有数据(包含了其他文本)

三,

var fd =new FormData(form);
$.ajax({url:"",type:"post",data:fd,processData:false, // 不处理数据contenType:false //不设置内容类型})