模态框的理解 ,jQ: loading,进度条, 省级联动 ,富文本编辑器 表单验证 插件

Posted 2021-01-05 gaoguowen

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

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

开始

     $(‘#box‘).ajaxStart() 多个ajax共享一个Start

发送

.ajaxSend()

成功

.ajaxSuccess()

完成

. ajaxComplete()

完成后有错误

.ajaxError() 

停止

.ajaxStop()多个ajax共享一个Stop

 

Nprogress:进度条引入 css jsNprogress.start（）Nprogress.done()一般配合.ajaxStart()/ .ajaxStop() 使用

基于jquery的表单插件 : jquery-form

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

    $(‘表单元素‘).ajaxSubmit({

    形参和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 获取?后面的参数包括?

bootcdn 里面的插件 速度比自己下载添加更快事件委托this 指向会改变为真正用到事件的对象

上传图片 头像 文件 插件: 1. webUploader ---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 //不设置内容类型})四,

省 市 区级联动jquery.region 每个select都要添加id 和自定义id id="p/c/d" data-id="城市编码"// 默认地区

<div id="hometown"><select id="p" data-id="130000" ><option > 请选择省市 </option></select><select id="c" data-id="1302340"><option > 请选择市 </option></select><select id="d" data-id="1302347" ><option > 请选择区/县 </option></select><div>

$("#hometown").region({

url:"json文件路径",

})

 

富文本编辑器百度: UEditer

CKEditor :<div ><textarea name="txt" id="text" cols="30" rows="10"></textarea></div>//在ajax请求前添加for(var k in CKEDITOR.instances){CKEDITOR.instances[k].updataElement()}

CKEDITOR.replace("text");