模态框的理解 ,jQ: loading,进度条, 省级联动 表单验证 插件

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

加载延迟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 //不设置内容类型})