模態框的理解 ,jQ: loading,進度條, 省級聯動 ,富文本編輯器 表單驗證 插件
加載延遲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");
模態框的理解 ,jQ: loading,進度條, 省級聯動 ,富文本編輯器 表單驗證 插件