記得還是15年的時候，工作需要，獨自寫后臺管理系統。。記得那時候，最讓我頭疼的不是后臺邏輯，而是數據的列表展示。 列很多的時候,頁面顯示問題;分頁樣式問題;表格樣式問題;數據加載...很多細節的問題，費時，而且總是達不到我想要的效果...也是那個時候，第一次接觸了datatable.js插件,只需要簡單的修改配置值，就可以改變表格的方方面面,真的是非常好的體驗。。。
不過，因為一些歷史原因，和時間問題，那時候對 ajax加載+服務端分頁+頁面刷新,仍然是一直很迷迷糊糊...剛好最近工作中需要做一個列表管理頁,所以就很自然的選擇了datatable.js,并且總算把 ajax加載數據+服務端分頁+reload這套流程弄通。也許還有很多種方案可以達到效果，但至少這個是肯定可行的.
樣式是基于bootstrap風格.
<!-- datatables樣式和bootstrap支持樣式 --> <link rel="stylesheet" type="text/css" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/plug-ins/28e7751dbec/integration/bootstrap/3/dataTables.bootstrap.css"> <script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-1.10.2.min.js"></script> <script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script> <script type="text/javascript" language="javascript" src="https://cdn.datatables.net/plug-ins/28e7751dbec/integration/bootstrap/3/dataTables.bootstrap.js"></script> <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> <!--form ajax提交--> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.form/4.2.1/jquery.form.js"></script>
<!-- search 框start --> <div class="container"> <nav class="navbar navbar-default"> <div class="container-fluid"> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <form class="navbar-form navbar-left"> <div class="form-group"> <input type="text" class="form-control" placeholder="用戶姓名" name="userName" id="searchUserName"> </div> & <div class="form-group"> <input type="text" class="form-control" placeholder="律所名" name="officeName" id="searchOfficeName"> </div> & <div class="form-group"> <input type="number" class="form-control" placeholder="狀態" name="be_valid" id="searchValid"> </div> <button type="button" class="btn btn-success" onclick="searchData()">搜索</button> </form> <form class="navbar-form navbar-right"> <button type="button" class="btn btn-primary btn-sm btn-warning" data-toggle="modal" data-target="#addModal"> 新增律所 </button> </form> </div><!-- /.navbar-collapse --> </div><!-- /.container-fluid --> </nav> </div> <!-- search 框end --> <div class="container"> <table id="mytable" class="table table-striped table-bordered table-hover" cellspacing="0" width="100%" style="white-space: nowrap;"> <thead> <tr> <th>用戶名</th> <th>用戶ID</th> <th>郵箱</th> <th>身份</th> <th>律所</th> <th>律所id</th> <th>律所簡報</th> <th>律所創建時間</th> <th>限制人數</th> <th>驗證碼</th> <th>狀態</th> <th>備注信息</th> <th>操作</th> </tr> </thead> <tbody></tbody> <tfoot> <tr> <th>用戶名</th> <th>用戶ID</th> <th>郵箱</th> <th>身份</th> <th>律所</th> <th>律所id</th> <th>律所簡報</th> <th>律所創建時間</th> <th>限制人數</th> <th>驗證碼</th> <th>狀態</th> <th>備注信息</th> <th>操作</th> </tr> </tfoot> </table> </div>
因為是服務端分頁,所以我頁面做了搜索框,進行自定義的參數搜索.
<script type="text/javascript"> var oTable; $(function(){ LoadData(); }); function searchData(){ oTable.draw(true); // oTable.ajax.reload(null,true); }function LoadData() { oTable = $('#mytable').DataTable({ //sDom: 'T<"clear">lfrtip', oLanguage: { sZeroRecords: "對不起，查詢不到任何相關數據", sInfoEmpty: "記錄數為0" }, sScrollX: "100%", sScrollXInner: "110%", bScrollCollapse: false, //可滾動 bDestory: true, //數據允許清空 bServerSide: true, //服務端處理分頁 bLengthChange: false, //是否允許自定義每頁顯示條數. iDisplayLength: 20, //每頁顯示10條記錄 bPaginate: true, //是否分頁 //sPaginationType: "amaze", //分頁樣式 "full_numbers" //bJQueryUI: true,//是否將分頁樣式應用到表格 bProcessing: true, //當datatable獲取數據時候是否顯示正在處理提示信息。 bFilter: false, //是否啟用條件查詢 bSearchable: false, //bStorable: false,//是否啟用列排序 //bInfo: true, //是否顯示分頁信息(頁腳信息) order: [[7, "desc"]], //默認按照第幾列排序,從1開始 bAutoWidth: false, //自動寬度 bStateSave: true, //狀態保存，使用了翻頁或者改變了每頁顯示數據數量，會保存在cookie中，下回訪問時會顯示上一次關閉頁面時的內容 ajax:{ dataType:'json', type:'POST', url: '/adminUserList', headers: { 'token': window.localStorage.token //取localStorage中的token，用來做安全校驗 }, dataSrc: "aaData", data:function(d){ //取搜索的參數值,在請求服務端時,附加到請求參數中 var userName=$('#searchUserName').val(); var officeName=$('#searchOfficeName').val(); var be_valid=$('#searchValid').val(); d.userName=userName; d.officeName=officeName; d.be_valid=be_valid; } }, columns: [ { data: "name", bSortable: false }, { data: "user_id", bSortable: false }, { data: "email", bSortable: false }, { data: "level_name", bSortable: false }, { data: "office_name", bSortable: false }, { data: "office_id", bSortable: false }, { data: "officeBriefing", bSortable: false }, { data: "office_create_time"}, { data: "limited_num", bSortable: false }, { data: "verify_code", bSortable: false }, { data: "be_valid", bSortable: false }, { data: "remark", bSortable: false }, { data: null, render: function (data, type, row) { return '<button type="button" class="btn btn-primary btn-sm" onclick="editShow(\''+data.user_id+'\')">編輯</button>'; }, bSortable: false } ] }); } </script>
@ResponseBody @RequestMapping(value = "/adminUserList",method = RequestMethod.POST) public AjaxListResponseDTO<AppUserShowDTO> getAdminUserList( @ApiParam(required = true, name = "start", value = "開始條數") @RequestParam Integer start, @ApiParam(required = true, name = "length", value = "取多少條") @RequestParam Integer length, @ApiParam(required = true, name = "userName", value = "用戶名") @RequestParam String userName, @ApiParam(required = true, name = "officeName", value = "律所名") @RequestParam String officeName, @ApiParam(required = true, name = "be_valid", value = "狀態") @RequestParam Integer be_valid, HttpServletRequest request) throws Exception{// Map<String,String[]> paramMap=request.getParameterMap(); String[] orderTypeArr=request.getParameterValues("order[0][dir]"); String lawOfficeOrderType=""; if(null!=orderTypeArr){ lawOfficeOrderType=orderTypeArr[0]; } AjaxListResponseDTO<AppUserShowDTO> responseDTO=new AjaxListResponseDTO<>(); //datatable.js 相關參數 String[] drawStrArr=request.getParameterValues("draw"); if(null!=drawStrArr){ responseDTO.setSEcho(Integer.parseInt(drawStrArr[0])); } Page<AppUserShowDTO> appUserShowDTOPage = authUserService.findAllUserAndLawOffice(userName,officeName,be_valid,null!=start?start:0,null!=length?length:20,lawOfficeOrderType,"超級管理員"); responseDTO.setITotalRecords((int) Math.ceil(appUserShowDTOPage.getTotal()));//實際需要傳數據總數,此處值不對 responseDTO.setITotalDisplayRecords((int) Math.ceil(appUserShowDTOPage.getTotal())); responseDTO.setAaData(appUserShowDTOPage.getResult()); return responseDTO; }
start(起始條數,注意，是條數而不是頁數 )和length(取多少條數據)為datatable默認會傳到服務端的2個參數, userName/officeName/be_valid則為我前端自定義的附加參數。
Page是List<T>泛型集合,是開源項目PageHelper-mybatis中的類。
服務端返回給前端的json數據也有格式要求，具體見AjaxListResponseDTO類定義.
/** * Created by xinhuiyang on 2017/6/9. */ @Data public class AjaxListResponseDTO<T>{ private Integer sEcho; private Integer iTotalRecords; private Integer iTotalDisplayRecords; private List<T> aaData; }
自此,就實現了帶搜索功能的服務端分頁效果.
首先,在之前的基礎上,需要添加一個js文件引用
<!-- 固定列 插件js --> <script src="https://cdn.datatables.net/fixedcolumns/3.2.2/js/dataTables.fixedColumns.min.js"></script>
其次,在配置項中添加一項:
oTable = $('#mytable').DataTable({ //sDom: 'T<"clear">lfrtip', oLanguage: {
sZeroRecords: "對不起，查詢不到任何相關數據",
sInfoEmpty: "記錄數為0" },
sScrollX: "100%",
sScrollXInner: "110%",
bScrollCollapse: false,
fixedColumns: { //固定列的配置項 leftColumns: 1, //固定左邊第一列 rightColumns:1 //固定右邊第一列 },
bDestory: true,
bServerSide: true,
.....省略......
然后，刷新頁面...至此，固定列效果就ok了。
現在的頁面效果，還有2個瑕疵:
其一是后臺返回"總條數"不對,我是時間趕,來不及寫查詢了..大家實際使用時,自己查詢一下就行,這個好解決;
其二是前端頁面，下角顯示頁碼總數和頁腳信息顯示有問題(見下圖),不知道當后臺"總條數"準確時，會不會就ok了。我后面還會找個時間，去修復一下的...當我有解決方案時,會補充在下面的,大家有知道原因和解決方案的，也歡迎評論在下方。
1.左邊數字沒顯示出來.
2.實際83條數據,每頁20條,應該最多到5頁的，但實際上,可以點任意頁，只不過從第6頁開始，數據都為空.
頁面顯示不對的問題已經找到原因并且解決.
原因是：后端分頁時,需要返回給前端更多的信息,如總數多少，過濾后多少等,所以我代碼中的AjaxListResponseDTO類就不符合后端分頁時的需求了，需要改動.
修改后的類定義為：
/** * Created by xinhuiyang on 2017/6/9. */ @Data @ApiModel public class AjaxListResponseDTO<T>{ @ApiModelProperty("必要。上面提到了，Datatables發送的draw是多少那么服務器就返回多少。 這里注" + "意，作者出于安全的考慮，強烈要求把這個轉換為整形，即數字后再" + "返回，而不是純粹的接受然后返回，這是 為了防止跨站腳本（XSS）攻擊。") private Integer draw; @ApiModelProperty("必要。即沒有過濾的記錄數（數據庫里總共記錄數）") private Integer recordsTotal; @ApiModelProperty("必要。過濾后的記錄數（如果有接收到前臺的過濾條件，則返回的是過濾后的記錄數）") private Integer recordsFiltered; @ApiModelProperty("必要。表中中需要顯示的數據。這是一個對象數組，也可以只是" + "數組，區別在于 純數組前臺就不需要用 columns綁定數據，會自動按照順序" + "去顯示 ，而對象數組則需要使用 columns綁定數據才能正常顯示。") private List<T> aaData; @ApiModelProperty("可選。你可以定義一個錯誤來描述服務器出了問題后的友好提示") private String error; }
相應的，controller部分代碼,也要給對應的屬性附上正確的值,改動后代碼如下：
@ResponseBody @RequestMapping(value = "/adminUserList",method = RequestMethod.POST) public AjaxListResponseDTO<AppUserShowDTO> getAdminUserList( @ApiParam(required = true, name = "start", value = "開始條數") @RequestParam Integer start, @ApiParam(required = true, name = "length", value = "取多少條") @RequestParam Integer length, @ApiParam(required = true, name = "userName", value = "用戶名") @RequestParam String userName, @ApiParam(required = true, name = "officeName", value = "律所名") @RequestParam String officeName, @ApiParam(required = true, name = "be_valid", value = "狀態") @RequestParam Integer be_valid, HttpServletRequest request) throws Exception{ // Map<String,String[]> paramMap=request.getParameterMap(); String[] orderTypeArr=request.getParameterValues("order[0][dir]"); String lawOfficeOrderType=""; if(null!=orderTypeArr){ lawOfficeOrderType=orderTypeArr[0]; } AjaxListResponseDTO<AppUserShowDTO> responseDTO=new AjaxListResponseDTO<>(); //datatable.js 相關參數 String[] drawStrArr=request.getParameterValues("draw"); if(null!=drawStrArr){ responseDTO.setDraw(Integer.parseInt(drawStrArr[0])); } int totalCountBeforeFilter=authUserService.countUserByLevel("超級管理員"); Page<AppUserShowDTO> appUserShowDTOPage = authUserService.findAllUserAndLawOffice(userName,officeName,be_valid,null!=start?start:0,null!=length?length:20,lawOfficeOrderType,"超級管理員"); responseDTO.setAaData(appUserShowDTOPage.getResult()); responseDTO.setRecordsTotal(totalCountBeforeFilter); responseDTO.setRecordsFiltered((int) appUserShowDTOPage.getTotal()); return responseDTO; }
然后，頁面的頁碼顯示就正確了(如圖):
本文版權歸作者和博客園共有，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文連接，否則保留追究法律責任的權利;
原文鏈接：https://www.cnblogs.com/Andrew-XinFei/p/7020055.html
文章來源：博客園
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
有些時候，我們前端從后端拿過來的JSON對象數據，某些字段并不是前端想要的，需要對一些字段名進行重命名。一般修改對象數組的對象屬性名，最簡便的就是通過遍歷對象數組的方法進行修改，但是用這個方法，如果處理的數據量很大，它的執行效率是非常低的。下面介紹一個更高效的方法，即通過正則的方法進行過濾修改。
JSON.parse(JSON.stringify(data).replace(/name/g, 'new_name')) //data為數組，name為修改前，new_name為修改后
解釋：1）JSON.stringify()把json對象轉成json字符串；
2）使用正則的replace()方法替換屬性名；
3）JSON.parse()把json字符串又轉成json對象。
修改多個屬性：當要修改多個屬性名時，多次調用replace方法，可以鏈式調用。如下面說明
JSON.parse(JSON.stringify(data).replace(/name1/g, 'new_name1').replace(/name2/g, 'new_name2').replace(/name3/g, 'new_name3')...)
文章來源：博客園
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
1、push()、pop()和unshift()、shift()
這兩組同為對數組的操作，并且會改變數組的本身的長度及內容。
不同的是 push()、pop() 是從數組的尾部進行增減，unshift()、shift() 是從數組的頭部進行增減。
var arr = [1, 2];
2、push()和unshift()
向數組的 尾部/頭部 添加若干元素，并返回 數組的 新長度；
arr.push(3,4)； //返回 arr 的新長度 4
arr ; // arr = [1,2,3,4];
arr.unshift(0,0.5); // 返回 arr 的新長度 6
arr ; // arr = [0,0.5,1,2,3,4];
3、pop()和shift()
從數組的 尾部/頭部 刪除1個元素(刪且只刪除1個)，并返回 被刪除的元素；空數組是繼續刪除，不報錯，但返回undefined；
arr.pop(); //返回 4；
arr ; // arr = [0,0.5,1,2,3];
arr.pop(); //返回 3；
arr ; // arr = [0,0.5,1,2];
arr.shift()； // 返回 0 ；
arr ; // arr = [0.5,1,2]
PS: pop()和shift() 不接受傳參，即使傳了參數也沒什么卵用~~；
arr.pop(3) ; // 返回 2；永遠返回最后一個；
arr ; // arr = [0.5,1];
arr.shift(1); // 返回 0.5; 永遠返回第一個；
arr ; // arr = [1];
arr.pop() ; // 返回 1；
arr ; // arr = [];
arr.shift() // 返回 undefined；
arr ; // arr = [];
文章來源：博客園
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
<script type="text/javascript">
$("#search").click(function(event){
var key = $("#key").val();
//alert(key);
$.post("search.do?method=s", {keyword : key}, function(data){
document.write(data);//將一個是 ajax返回的html頁面直接打?。ń忉尣@示成）頁面
//alert(jQuery('div', data).html());
//alert(data.output);
});
});
</script>
document.write(data)！?。?！
一句話搞定！??！
轉自：csdn
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
1.使用ajax實現小部分的內容局部刷新
$.ajax({
url:“http://localhost:8080/intoHomepage.do”,
type:“post”,
data:{name:“mydata”}，
success:function (result) {
if(result){ //對后端返回的數據result進行處理
$(".testchange").html(“將對應的class=testchange的標簽內容進行修改。還可以通過一些父類和子類選擇函數進行操作更新數據如：find（）、chidren（）、parent（）等”);
}
},
error:function () {
alert(“出現錯誤！”);
}
}
);
點擊按鈕觸發事件（onclick()或其他事件）對需要刷新的部分內容進行css屬性display：none(/block)設置只顯示一個div的內容
文章來源：csdn
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
$('#productName').bind('input propertychange', function() { console.log(123); });
//鍵盤事件 $('input').keydown(function() { console.log(123); });
<input type="text" oninput="myFunction()">
<script> function myFunction() { console.log(111); } </script>
文章來源：csdn
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
很蛋疼的一個問題：
<input type="text" id="e1" value="123" />
用juqery將文本框變成密碼框
-
$(document).ready(function(){
-
$("#e1").val("hello world!");
-
-
$("#e1").click(function(){
-
alert('11');
-
-
$("#e1").attr("type","password");
-
$("#e1").attr("value","ni mei de ");
-
});
-
});
執行的結果：彈出11，文本框沒有變！
然后百度一下，發現type的t要大寫，即Type
-
$(document).ready(function(){
-
$("#e1").val("hello world!");
-
-
$("#e1").click(function(){
-
alert('11');
-
if(e1.disabled)
-
-
("#e1").attr("Type","password");
-
$("#e1").attr("value","ni mei de ");
-
});
-
});
效果就有了！ 
1、iframe子頁面調用父頁面js函數
子頁面調用父頁面函數只需要寫上window.praent就可以了。比如調用a()函數，就寫成：
子頁面取父頁面中的標簽中的值，比如該標簽的id為“test”,則：
但是我在chrome瀏覽器下卻發現此方法無效了！查了半天才了解，在chrome 5+中，window.parent無法在file://協議中運行，但是發布了之后http://協議下是可以運行的。此方法支持ie、firefox瀏覽器。
2、iframe父頁面調用子頁面js函數
注：ifrtest是iframe框架的id，b()為子頁面js函數。contentWindow屬性是指定的frame或者iframe所在的window對象，IE下可以省略。
文章來源：csdn
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
window全局作用域->頁面關掉才銷毀
函數執行會形成私有的作用域
1)作用域的銷毀
一般情況下，函數執行形成一個私有的作用域，當執行完成后就銷毀了->節省內存空間
2)作用域的不立即銷毀
function fn(){
var i=10;
return function(n){
console.log(n+i++);
}
}
fn()(15);//->先執行fn,有一個私有的變量i=10,返回一個堆內存地址 xxxfff111,我們發現這個地址還用到了一次,那么當前的這個fn形成私有作用域（A）就不能立即銷毀了,xxxfff111(15)->輸出25,A中的i變為11；當xxxfff111執行完了,發現這個地址沒用了,瀏覽器就把A、xxxfff111都釋放了
fn()(20);//->在執行fn的時候一切都從新開始了,和上面的步驟是一樣的->輸出30
3)作用域的不銷毀：形成一個私有作用域,里面的內容被外面占用了
function fn(){
var i=10;
return function(n){
console.log(n+i++);
}
}
var f=fn();//->fn執行形成一個私有的作用域A,A中有一個私有的變量i=10,A中返回一個地址xxxfff11,被外面的f占用了,那么當前的A就不能銷毀了
f(15);//->輸出25,讓A中的i=11
f(20);//->輸出31,讓A中的i=12
...
當我們知道f用完的時候,為了優化性能,我們讓f=null,這樣的話A中的xxxfff111沒人占用了,瀏覽器會把A和xxxfff111都釋放了
幾種不銷毀常用到的形式:
1)函數執行,返回一個引用數據類型的值,并且在函數的外面被別人接收了,那么當前函數形成的私有作用域就不在銷毀了-->例如上面的案例
2)在函數執行的時候,里面的一個小函數的地址賦值給了我們的外面元素的點擊事件,那么當前小函數也相當于被外面占用了,大函數執行形成的私有的作用域也不銷毀了
//每一次循環都執行自執行函數形成一個私有的作用域(循環三次就有三個作用域,每一個作用域中都有一個i,第一個存儲的是0,第二個存數的是1..)，在每一個私有的作用域中都把里面的函數綁定給了外面元素的點擊事件,這樣的話每一次形成的作用域都不銷毀了(三個不銷毀的作用域)
var oLis=document.getElementsByTagName("li");
for(var i=0;i<oLis.length;i++){
~function(i){
oLis[i].onclick=function(){
tabChange(i);
}
}(i);
}
3)在使用setTimeout實現輪詢動畫的時候,我們如果move需要傳遞參數值,那么像下面這樣的寫法會行成很多的不銷毀的作用域,非常的耗性能
function move(tar){
<js code>
//window.setTimeout(move,10); ->第二次執行move的時候我們沒有給它傳值(這樣寫不行)
window.setTimeout(function(){
move(tar);
},10);//->這樣寫實現了,但是每一次執行定時器都會形成一個私有的所用域(匿名函數形成的)A,在A中使用了上級作用域中的tar的值,而且執行了move又形成了一個小的作用域(而在小的作用域中會使用tar的值),這樣每一次定時器形成的A都不能銷毀了
}
move(100);//->第一次這樣執行傳遞100
//解決辦法:
function move(tar){
~function _move(){
<js code>
window.setTimeout(_move,10);
}();
}
move(100);//->第一次這樣執行傳遞100
JS中內存空間釋放的問題（堆內存、棧內存）
[谷歌瀏覽器]
我們開辟一個內存，可能或有一些其他的變量等占用了這個內存，谷歌瀏覽器都會間隔一段時間看這個內存還有沒有被占用，如果發現有沒有被占用的內存了，就自己幫我們回收了(內存釋放)
[火狐和IE]
我們開個內存，當我們引用了它，就在內存中記錄一個數,增加一個引用瀏覽器就把這個數+1，減少一個引用，瀏覽器就把這個數-1...當減到零的時候瀏覽器就把這個內存釋放了;但是有些情況下(尤其是IE)記著記著就弄亂了，內存就不能釋放了-->瀏覽器的內存泄露
var obj={};
我們養成一個好的習慣，當我們obj這個對象使用完成了，我們手動的obj=null (null空對象指針)，瀏覽器會自己把剛才的堆內存釋放掉
文章來源：博客園
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
首先上 html代碼
-
<!--為防止一個頁面出現多個id 我們改用class
-
為防止手工填寫格式出錯 我們設置屬性為 readonly
-
只能選 ，不能填 ok
-
-->
-
<input type="text" class="datepicker" readonly="readonly"/>
然后是jquery ui 初始化部分代碼
-
//日期格式改變
-
$( ".datepicker" ).datepicker({dateFormat: "yy-mm-dd"});
-
//星期格式漢化
-
$( ".datepicker" ).datepicker( "option", "dayNamesMin",[ "日", "一", "二", "三", "四", "五", "六" ] );
-
//月份格式漢化
-
$( ".datepicker" ).datepicker( "option", "monthNames", [ "一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月" ] );
注：jquery ui 的設置有兩種，一種是在初始化的時候就填入參數
另一種是在初始化之后，在設置參數。這里為了說明參數選項，我們選擇的第二種方式來講解。
效果圖：
官方說明地址: http://api.jqueryui.com/datepicker/#option-altFormat
下載地址：http://download.jqueryui.com/download
文章來源：csdn
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
藍藍設計的小編 http://www.syprn.cn
