後臺管理系統中的重點知識大全

時間  2019-12-09
標籤 後臺 管理 系統 重點 知識 大全 简体版
原文   原文鏈接

您的閱讀目錄：css

1、用js來規範時間格式及計算時間差html

  1.一、用js來規範時間格式，如"yyyy-mm-dd hh:MM:ss"的格式來顯示時間node

/**
* 時間格式轉化爲"yyyy-mm-dd hh:MM:ss"
**/
var formatDate = function (date, type) {
var year = date.getFullYear();//年
var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;//月
var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();//日
var hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();//時
var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();//分
var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();//秒
if (type != "") {
   var milliseconds = date.getMilliseconds() < 10 ? "0" + date.getMilliseconds() : date.getMilliseconds(); //毫秒
   var milltime = milliseconds.toString().substring(0, 2);
   return year + "-" + month + "-" + day + " " + hour + ":" + minutes + ":" + seconds + "." + milltime;
} else {
   return year + "-" + month + "-" + day + " " + hour + ":" + minutes + ":" + seconds;
}
}jquery

顯示結果爲：「2017-01-23 21:02:33「css3

  1.二、用js來計算時間差web

    

    var timeInter = (new Date(endTime).getTime() / 1000 - new Date(startTime).getTime() / 1000).toFixed(2);ajax

    其中endTime ，startTime爲時間格式；如new Date(「2017-1-23 10:20:30」)數組

2、sui框架複選框全選和全不選瀏覽器

     

"checkall"爲全選框的class;name=achecks爲列表複選框的名稱；
$(".checkall").click(function() {
    var checked = "";
    var ischecked = $(this).prop('checked');獲取全選複選框的狀態。
    $("[name=achecks]").each(function() {
        if (ischecked) {
            checked = "check";
        } else {
            checked = "uncheck";
        }
        $(".checkList").parent('label').checkbox(checked).checkbox(checked);
    });
});

緣由是：在jquery1.6版本便對此作出了修改：【checked屬性在頁面初始化的時候已經初始化好了，不會隨着狀態的改變而改變。
也就是說若是checkbox在頁面加載完畢是選中的，那麼返回的永遠都是checked（個人一開始就是沒選中）若是一開始沒被選中，則返回的永遠是undefined ！】
JQ1.6以後，它將「屬性」與「特性」作了區別，屬性指的是「name，id」等等，特性指的是「selectedIndex, tagName, nodeName」等等。
能夠經過attr方法去得到屬性，經過prop方法去得到特性。cookie

  • 1. $("#cb").attr("tagName"); //undefined
  • 2. $("#cb").prop("tagName"); //INPUT

 $("#check_all").change(function(){
　　$('.check_children').prop("checked",this.checked);
});

3、模擬用戶自動點擊onclick事件   

function  autoClick(lastId) {
    // IE
    if (document.all) {
        document.getElementById(lastId).click();
    }
        // 其它瀏覽器
    else {
        var e = document.createEvent("MouseEvents");
        e.initEvent("click", true, true);
        document.getElementById(lastId).dispatchEvent(e);
    }
}

4、經過點擊獲取元素id;

jquery調用方法：
$(function () {
    $("div").on('click', function (e) {
        alert($(this).attr('id'));
    });
});
js原生調用方法：
 window.onload = function(){
     document.onclick = function(e){
         var target = e.target|| e.srcElement;
         if(target.tagName =="div"){
              alert(target.id)
         }
     }
 }

5、jqurey選擇器在表格中的應用（選擇行，列，單元格等）

     （1）、獲取表格tr的id值

　 

$("#liquiBankList tr").click(function(){ 
     var id = $(this).attr('id');//這樣沒法獲取到id
});

$("#liquiBankTable").on("click", "#liquiBankList tr", function () {
    var id = $(this).attr('id');
});

　　（2）、eq(),gt(),lt()應用於表格行列的選擇

 $("#connectorBody tr:eq(0)")：選擇等於表格的第一行的數據
 $("#connectorBody tr:gt(0)")：選擇大於表格的第一行的數據
 $("#connectorBody tr:lt(3)")：選擇小於表格的第四行的數據

    （3）、點擊全選按鈕，是表格裏面的第一列的複選框所有被選中

 $("#" + babyId + " tr td:first-child label").checkbox("check").checkbox("check");

6、 js中switch的另類用法：

switch (id) {
        case "categoryli_1":
        case "categoryli_2":
        case "categoryli_3":
              $("#liquiDataList tr td label.checked").each(function () {
                    noListArr.push($(this).parents("tr").attr("id"));
                });
              if(id == "categoryli_1"){
                 value == 1;
              }else if(id == "categoryli_2"){
                value == 2;
              }
       break;
}

7、.children() ,find(),parent()和parents()的用法

(1)、children() ,find()
相同點：都容許咱們檢索 DOM 樹中的後代元素，並用匹配元素構造新的 jQuery 對象。
不一樣點：
.children() 只沿着 DOM 樹向下遍歷單一層級;
.find()可沿着DOM樹向下遍歷多個層級。

(2)、parent()和parents()
相同點：都容許咱們檢索 DOM 樹中的父輩元素，並用匹配元素構造新的 jQuery 對象。
.parent()方法返回被選元素的直接父元素。
.parents()函數是往父級找多層，一直找到body標籤。

8、解決使用setInterval()間隔調用ajax方法，出現結果異步的狀況。

function  getName(){
       $.ajax({
             async:false
             type:"post/get"
             ulr:
             contentType:
             data:
             dataType:    
        });
   }
 setInterval("getName()",3000);

當用setInterval進行間隔時間調用方法時，若是被調用的方法裏面存在異步，則會致使調用數據不一致。
解決方法：ajax請求默認爲異步，當設置爲同步調用時便可。增長一個參數設置： async: false。

9、運用localstorage來保存對象數據的方法

var liquiMenuInfo = {
    queryoutname: $(this).parents(".sub-menu").data("name"),
    queryouttext: $(this).parents(".sub-menu").find(".outername").text(),
    queryinnername: $(this).data('name'),
    queryinnertext: $(this).find("span").text()
};
localStorage.setItem("liquiMenuInfo", JSON.stringify(liquiMenuInfo));

function getliquiMenuInfo() {
    return JSON.parse(localStorage.getItem("liquiMenuInfo"));
}

 10、onload,onresize在窗口加載、放大或縮小時，實現頁面的自適應

    function changeFrameHeight() {
        var height = document.body.clientHeight;//iframe的高度
        var width = document.body.clientWidth;//爲body的寬度
        console.log(height + "," + width);
        $(".wrapperRight").css('width', width - 350 + 'px');
        $(".wrappertop").css('height', height - 120 + 'px');
        $(".wrapperTable").css('height', height - 180 + 'px');
    }
    //窗口放大或縮小的時候
    window.onresize = function () {
        changeFrameHeight();
    }
    //頁面初始化加載的時候
    window.onload = function () {
         changeFrameHeight();
    }

 11、window.print()實現瀏覽器打印表格

printDatas爲object,傳遞進來的參數。
 //打印表格
    function printdiv(printDatas) {
        var headstr = "<html><div class='printName'>" + printDatas.printName + "</div><h2 class='printTitle'>" + printDatas.printTitle + "</h2>" + printDatas.printSubtitle + "<body>";
        var footstr = "<div class='printFooter'><ul><li>打印櫃員：系統管理員</li><li>打印日期：" + printDatas.printDate + " </li><li>復&nbsp;核：</li></ul> </div></body></html>";
        var newstr = printDatas.printpage; var oldstr = document.body.innerHTML; document.body.innerHTML = headstr + newstr + footstr; window.print(); document.body.innerHTML = oldstr;
 //若是發現打印頁面出現後，但不能使用之前的js文件，須要從新去加載一次js var script = document.createElement("script");
        script.src = "../js/reportFormQuery.js";
        document.body.appendChild(script);
        localStorage.setItem("isPrint",true);
        return false;
    }

 12、用jquery來篩選id不等於某值的寫法

       $("#WJCJIlist tr:not(#1)").show();意思是排除表格的第一行，所有都顯示。

$("#allopen").click(function() {
        var ischeck = $(this)[0].checked;
        if (ischeck) {
            $("#WJCJIlist tr:not(#1)").show();
            //$("#WJCJIlist tr[id!="1"]").show();這種寫法提示css3中不支持；
        } else {
            $("#WJCJIlist tr:not(#1)").hide();
           // $('#WJCJIlist tr[id!=1]').hide();
        }
    });

十3、使用sui的modal模態框時，禁用點擊肯定按鈕關閉模態框的行爲；

     禁用點擊空白處，模態框隱藏，須要添加屬性：data-backdrop = "static";
     禁用點擊ESC鍵，模態框隱藏，須要添加屬性：data-keyboard = "false";
     即正確的寫法爲：

 <div id="operateModal" tabindex="-1" role="dialog" data-hasfoot="false" class="sui-modal hide fade" data-backdrop="static" data-keyboard="false">

十4、點擊排除本身之外的區域隱藏本身

    如圖：在管理系統後臺，常常會出現點擊用戶名旁邊的小三角，出現logout下拉的彈框。通常狀況下，下拉的彈框下面都會有其餘的內容，咱們但願實現點擊彈框本身之外的區域，彈框可以隱藏。其中$(".namelogout")指的是名稱和圖像區域，$(".logoutarea")指的是彈框區域，要實現這種效果，代碼以下：

 $(".namelogout").click(function (e) {
       e = e || event; stopFunc(e);
        $(".logoutarea").toggle(500);
    });
    $(document).click(function (e) {
        e = e || event; stopFunc(e);
        $(".logoutarea").hide(500);
    });
    //阻止向上傳遞事件
    $('.logoutarea').bind("click", function (e) {
        e = e || event; stopFunc(e);
    });
    function stopFunc(e) {
        e.stopPropagation ? e.stopPropagation() : e.cancelBubble = true;
    }

 十5、表格奇偶行，首位列選擇及全選功能相關操做

    （1）、獲取表格的奇偶行

　　css表示法：

奇數行：table tr:nth-child(odd){background-color:#d9edf7;}
偶數行：table tr:nth-child(even){background-color:#d9edf7;}

    jquery表示法：

奇數行：$("#connectorBody tr:odd").addClass('success');
偶數行：$("#connectorBody tr:even").addClass('info');

（2）、獲取表格的第一列和最後一列

   css表示法：

第一列：body tr td:first-child{background-color:#d9edf7;}
最後一列：body tr td:last-child{background-color:#d9edf7;}

  jquery表示法：

var length = $("#connectorBody tr").length;
$("#connectorBody tr").each(function(){
    $(this).find("td:eq(0)").addClass('success');//獲取表格第一列
    $(this).find("td:eq("+length+")").addClass('info');//獲取表格最後一列
})

   效果如圖：

  

（3）、獲取表格的第一行和最後一行的表示法：

      css表示法：

第一行：body tr:first-child{}  
最後一行：body tr:last-child{}

    jquery表示法：

第一行：$("#"+tbodyId+" tr:eq(0)")].css();
最後一行：
var rownum = $("#liquiDataList tr").length-1；
$("#"+tbodyId+" tr:eq(rownum )")].css();

   （4）、獲取表格區間行的表示法

    jquery表示法：

選擇第一行和第二行的數據，並給其設置顏色；
 $("#connectorBody tr").each(function(index){
    if(index > 0 && index < 3){
      $(this).css('color','blue');
   }
});

效果如圖：

   

 十6、設置某個div區域的滾動條的長寬及樣式

/*定義滾動條高寬及背景 高寬分別對應橫豎滾動條的尺寸*/

.div ::-webkit-scrollbar {
    width:3px;
    height:0px;
}

/*定義滾動條軌道 內陰影+圓角*/

.div ::-webkit-scrollbar-track {
    background-color:#bee1eb;
}

/*定義滑塊 內陰影+圓角*/

.div ::-webkit-scrollbar-thumb {
    background-color:#00aff0;
}

/*鼠標放到滾動條裏小方塊的外觀顏色變化*/

.div ::-webkit-scrollbar-thumb:hover {
    background-color:#9c3;
}

滾動條組成
● ::-webkit-scrollbar 滾動條總體部分
● ::-webkit-scrollbar-thumb 滾動條裏面的小方塊，能向上向下移動（或往左往右移動，取決因而垂直滾動條仍是水平滾動條）
● ::-webkit-scrollbar-track 滾動條的軌道（裏面裝有Thumb）
● ::-webkit-scrollbar-button 滾動條的軌道的兩端按鈕，容許經過點擊微調小方塊的位置。
● ::-webkit-scrollbar-track-piece 內層軌道，滾動條中間部分（除去）
● ::-webkit-scrollbar-corner 邊角，即兩個滾動條的交匯處
● ::-webkit-resizer 兩個滾動條的交匯處上用於經過拖動調整元素大小的小控件

十7、append()和appendTo()的區別：

     append() 和 appendTo() 方法執行的任務相同。不一樣之處在於：內容的位置和選擇器。

（1）、append():在被選元素的結尾（仍然在內部）插入指定內容。

語法：$(selector).append(content)

在每一個 p 元素結尾插入內容：

$("button").click(function(){
  $("p").append(" <b>Hello world!</b>");
});

（2）、appendTo()：方法在被選元素的結尾（仍然在內部）插入指定內容。

語法：$(content).append(selector)

在每一個 p 元素結尾插入內容：

$("button").click(function(){
  $("<b>Hello World!</b>").appendTo("p");
});

prepend()和prependTo()的區別

（1）、prepend() 方法在被選元素的開頭（仍位於內部）插入指定內容。

提示：prepend() 和 prependTo() 方法做用相同。差別在於語法：內容和選擇器的位置，以及 prependTo() 沒法使用函數來插入內容。

語法：$(selector).append(content)

在 p 元素的開頭插入內容：

$(".btn1").click(function(){
    $("p").prepend("<b>Hello world!</b>");
});

（2）、prependTo() 方法在被選元素的開頭（仍位於內部）插入指定內容。

語法：$(content).prependTo(selector);

在p元素的開頭插入內容：

$(".btn1").click(function(){
  $("<b>Hello World!</b>").prependTo("p");
});

after()和insertAfter()的區別：

(1)、after() 方法在被選元素後插入指定的內容。

語法：$(selector).append(content)

在每一個 p 元素後插入內容：

$("button").click(function(){
  $("p").after("<p>Hello world!</p>");
});

（2）、insertAfter() 方法在被選元素以後插入 HTML 標記或已有的元素。

註釋：若是該方法用於已有元素，這些元素會被從當前位置移走，而後被添加到被選元素以後。

語法：$(content).append(selector)

在每一個 p 元素以後插入 span 元素：

$("button").click(function(){
  $("<span>Hello world!</span>").insertAfter("p");
});

before()和insertBefore()的區別：

(1)、before() 方法在被選元素前插入指定的內容。

語法：$(selector).append(content)

在每一個 p 元素前插入內容：

$("button").click(function(){
    $("p").before("<p>Hello world!</p>");
});

（2）、insertBefore() 方法在被選元素以前插入 HTML 標記或已有的元素。

註釋：若是該方法用於已有元素，這些元素會被從當前位置移走，而後被添加到被選元素以前。

語法：$(content).insertBefore(selector)

在每一個 p 元素以前插入 span 元素：

$("button").click(function(){
  $("<span>Hello world!</span>").insertBefore("p");
});

 十8、$.inArray()、$.isArray()、$.each()用法比較

(1)、$.inArray():函數用於在數組中搜索指定的值，並返回其索引值。若是數組中不存在該值，則返回 -1。

//在當前頁面內追加換行標籤和指定的HTML內容
function w( html ){
    $(document.body).append("<br/>" + html);
}
var arr = [ 10, 25, 3, 0, -3 ];
w( $.inArray( 25, arr ) ); // 1
w( $.inArray( -3, arr ) ); // 4
w( $.inArray( 10, arr ) ); // 0
// 數組中沒有99
w( $.inArray( 99, arr ) ); // -1
// 數組中有數字10，可是沒有字符串"10"
w( $.inArray( "10", arr ) ); // -1

(2)、函數用於判斷指定參數是不是一個數組。

jQuery.isArray()函數的返回值爲Boolean類型，若是指定的參數是數組，則返回true，不然返回false。

//在當前頁面內追加換行標籤和指定的HTML內容
function w( html ){
    $(document.body).append("<br/>" + html);
}
w( $.isArray( [ 10, 25, 3 ] ) ); // true
w( $.isArray( new Array() ) ); // true
w( $.isArray( null ) ); // false
w( $.isArray( true ) ); // false
w( $.isArray( { } ) ); // false

var obj = { };
obj[0] = 10;
obj[1] = 25;
obj[2] = 3;
obj.length = 3;
// obj是一個類數組對象，但它仍然不是一個真正的數組
w( $.isArray( obj ) ); // false

(3)、$.each():函數用於遍歷指定的對象和數組，並以對象的每一個屬性(或數組的每一個成員)做爲上下文來遍歷執行指定的函數。

所謂的上下文，意即該函數內部的this指針引用了該元素。

語法：jQuery.each( object, callback )

jQuery.each()函數還會根據每次調用函數callback的返回值來決定後續動做。若是返回值爲false，則中止循環(至關於普通循環中的break)；若是返回其餘任何值，均表示繼續執行下一個循環。使用jQuery.each()函數迭代對象或數組，jQuery示例代碼以下：

// 遍歷數組元素
$.each( [1, 2, 3] , function(i, item){
    alert("索引=" + i + "; 元素=" + item);  
} );

// 遍歷對象屬性
$.each( { name: "張三", age: 18 } , function(property, value){
    alert("屬性名=" + property + "; 屬性值=" + value);    
} );

jQuery.each()函數一樣能夠遍歷jQuery對象中匹配的元素，如下面這段HTML代碼爲例：

$.each( $("ul li"), function(index, element){
    // this === element
    $(element).html( "編號" + (index + 1) );  
});

或者另外一種寫法：

$("ul li").each( function(index){
      $(this).html( "編號" + (index + 1) );  
});

 

十9、設置、讀取和刪除cookies

var common = new function(){
　　//設置cookie
    var setCookie(cname, cvalue, exdays) { 
        var d = new Date(); 
        d.setTime(d.getTime() + (exdays*24*60*60*1000)); 
        var expires = "expires="+d.toUTCString(); 
        document.cookie = name + '=0;expires=' + new Date(0).toUTCString() + "; path=/";
    } 
    //獲取cookie
    var getCookie(cname) { 
        var name = cname + "="; 
        var ca = document.cookie.split(';'); 
        for(var i=0; i<ca.length; i++) { 
            var c = ca[i]; 
            while (c.charAt(0)==' ') c = c.substring(1); 
            if (c.indexOf(name) != -1) return c.substring(name.length, c.length); 
        } 
         return ""; 
    } 
    //清除cookie
    var clearCookie(name) { 
        var exp = new Date();
        exp.setTime(exp.getTime() - 1);
        var cval = commonsdk.getCookie(name);
        if (cval != null)
        document.cookie = name + '=0;expires=' + new Date(0).toUTCString() + "; path=/";
    }

}
window.commonsdk = new common();

二10、select下拉列表框相關操做

   20.一、初始化顯示「請選擇角色」，用戶點擊選項時，消失。只須要給第一個option添加隱藏屬性便可。效果如圖：

   

  代碼以下：

<select class="form-control m-b" name="role" id="role">
    <option value='' style='display: none'>請選擇角色：</option>
    <option value='1'>系統管理員</option>
    <option value='2'>普通管理員</option>
    <option value='3'>財務人員</option>
    <option value='4'>小明</option>
    <option value='5'>行政人員</option>
    <option value='6'>人力資源</option>
</select>

   20.二、設置select的默認選中值，如圖選中「財務人員」
　　經過select的val()來設置選中值$("#role").val(3);
　　經過option的value來設置選中值：$("#role option[value=3]").attr('selected', 'selected');
　　經過option的eq()設置選中值: $("#role option").eq(3).attr('selected', 'selected');

   20.三、獲取select當前選中項的值:
　　$('#role').val();
　　$('#role option:selected') .val();

   20.四、獲取select當前選中項的文本：
　　$("#role").find("option:selected").text();
　　$('#role option:selected').text();

   20.五、獲取當前選中項的索引值： 　　$("#role").get(0).selectedIndex;

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程