記錄下項目中常用到的JavaScript/JQuery代碼一（大量實例）

 一直沒有系統學習Javascript和Jquery，每次都是用到的時候去搜索引擎查，感覺效率挺低的。這邊把我項目中用的的記錄下,想到哪寫哪，有時間再仔細整理。

當然，由於我主要是寫后端java開發，而前端這幾年風起雲涌，發展很快，新的技術框架層出不窮，我也就沒把心思放這塊，目前公司只有前端，沒有交互開發工程師，所以我們只能硬頂。

寫出來的前端代碼很可能沒有什么模塊意識，也比較混亂，有錯誤特別正常，希望你看到了在留言中指出來，以免誤導他人，謝謝。

 

0、點擊事件的事件函數一般要加return false，尤其是遇到在表單內部。很多小坑就是這么來的

　　　　　　　　<form>
                    <div class="dl-yhm"><input type="text" id="username" placeholder="請輸入用戶名"/><span
                            class="hint">提示</span></div>
                    <div class="dl-mm"><input type="password" id="password" placeholder="請輸入密碼"/><span
                            class="hint">提示</span></div>
                    <div class="loginTab">
                        <!--<div class="fl"><input id="zddl" type="checkbox" checked="checked"/><label-->
                        <!--for="zddl">七天內自動登錄</label></div>-->
                        <a href="findPwd.html" class="fr">忘記密碼？</a>
                    </div>
                    <button class="loginBtn">
                        <font>登錄</font>

                        <div class="loader">
                            <div class="loader-inner ball-scale-ripple-multiple">
                                <div></div>
                                <div></div>
                                <div></div>
                            </div>
                        </div>
                    </button>
                </form>

　　　　//登錄注冊-登錄
        $(".loginBtn").click(function () {
            var username = $('#username').val();
            var password = $('#password').val();

            if (username.trim().length == 0) {
                layer.msg('請輸入用戶名', {icon: 2});
                return false;
            }
            if (password.trim().length == 0) {
                layer.msg('請輸入密碼', {icon: 2});
                return false;
            }

            var param = {};
            param.username = username;
            param.password = password;

            $.ajax({
                type: 'POST',
                dataType: "json",
                data: param,
                url: "***.do",//請求的action路徑
                error: function (data) {//請求失敗處理函數
                    console.log("請求失敗11");
                },
                success: function (data) {
                    if (data.state == 2) {
                        location.href = "***";
                    } else {
                        layer.msg(data.msg, {icon: 2});
                        return;
                    }
                }
            });
            return false;

        })

 

1、id定位，查找其下的子元素，並綁定事件

    $("#tableForSubTraderSearch").find("input:eq(1)").on("click", function () {
        initPaganation();
    });

2、清空表格的除了表頭外的其他行

　　$(".s-tab-table  tr:not(:first)").html("");

3、查看內容中是否包含指定字符串

        var html = $currentAccount.html();
        if (html.indexOf("本賬戶") >= 0) {
            return {checkedSubAccountId: null, isCalcSubTraders: false};
        }

4、前端搜索：根據主賬戶查詢到其管理的多個子賬戶后，輸入框中根據輸入的關鍵字對子賬戶過濾

初始ajax查詢子賬戶時，備份查到的列表的html內容：

var subAccountsSearchCopy = null;
function searchSubAccounts() {
        $.ajax({
            type: "POST",
            dataType: "json",
            url: "*****",
            data: {},
            success: function (data) {
                if (data.state != 0) {
                    return;
                }

                var $qzfk = $(".qzfk-azmss-c");
                $qzfk.html("");
                var totalContent = "";
                for (var i = 0; i < data.list.length; i++) {
                    var item = data.list[i];
                    var id = "qzfk-c1-" + i;
                    var content = '<span> <input type="radio" name="subAccountRadio" id="' + id + '" data="' + item.name + '" value="' + item.accountNo + '" > <label for=' + id + '>' + item.name + '</label></span>';
                    totalContent += content;
                }
                var inputButton = '<input type="button" value="取消" class="sxq-btn qzfk-jyy-select-qx">  <input type="button" value="確認" class="sxq-btn qzfk-jyy-select-qr">';
                totalContent += inputButton;
                $qzfk.html(totalContent);//將組裝的html內容塞進列表
                //備份搜索到的子賬戶
                subAccountsSearchCopy = totalContent;
            }
        });
    }

后續進行過濾時，根據關鍵字過濾出需要的子列表，放入原來位置

　　//綁定input事件，獲取過濾詞
    $(".qzfk-azmss .qzfk-azmss-title .searchDiv").find("input:eq(0)").on("input .s-tab-table-divpropertychange",function () {
        var subAccountsSearch = $(".qzfk-azmss-c");
        subAccountsSearch.html(subAccountsSearchCopy);

        var accountFilter = $(this).val().trim();
        var filteredArray = [];
        if (accountFilter == ''){
            return;
        }
        subAccountsSearch.find("span").each(function (index, domEle) {
            var accountName = $(this).find("input").attr("data");
　　　　　　　//被過濾出來的元素單獨放到一個數組
            if (accountName.indexOf(accountFilter) >= 0){
                filteredArray.push($(this).clone());
            }
        });

        subAccountsSearch.html("");
        for (var i = 0; i < filteredArray.length; i++){
            filteredArray[i].appendTo(subAccountsSearch);
        }
    });    

5、layer彈出框

<script src="/assets/js/layer/layer.js"></script>
    function showMessage(msg,domObj) {
        layer.tips(msg,domObj,{time:1000});
    }

6、each循環

    $(".qzfk-rDiv").each(function () {
        if (!$(this).find("i").hasClass("qzfk-mess-rotateI")) {
            $(this).find(".qzfk-mess").closest(".qzfk-mess").css("height", "auto")
            var cqh = $(this).find(".qzfk-mess").closest(".qzfk-mess").css("height")
            $(this).find(".qzfk-mess").closest(".qzfk-mess").css("height", "30px")
            $(this).find(".qzfk-mess").closest(".qzfk-mess").animate({
                "height": cqh
            }, 300)
        }
    })

7、常見函數

toFixed(2)
html(str)
val()
split()
parseFloat()
removeClass()
addClass()
hide()
show()
attr()
closest()
eq()
text()
trim()
appendTo()
remove()

$(document).ready(function () {

        sth();
})

//啟定時器
var ss = setInterval(function () {
    sth();
}, 60 * 1000);
//清空定時器
clearInterval(ss);
//重新設置
ss = setInterval(function () {
   sth();
}, 30 * 60 * 1000);

8、選中全部、取消選中全部

$(".checkedAll").click(function () {
        if ($(this).is(":checked")) {
            $(this).closest("table").find("input[type='checkbox']").each(function (index) {
                if($(this).attr("disabled") != "disabled"){
                    $(this).prop("checked", "checked");
                }
            })
        } else {
            $(this).closest("table").find("input[type='checkbox']").removeProp("checked");
        }
    })

9、字符串比較直接用==

var aaa= "設置";
var addOrupdate = $(this).attr("value");
var retracementArray = $(".modal-xgcs input[type=text]");
if (setRectracementTitle == addOrupdate){
   $(".modal-title").html(setRectracementTitle + '<i class="modal-close"></i>');
    retracementArray.eq(0).val("");
    retracementArray.eq(1).val("");
}
與undefined對比

$(this).attr("data") != undefined

10、給動態ajax生成的內容加事件，需要用on的方式;需要注意的是，on函數的調用者，也就是下例中的

$('.searchTableDiv table')不能是動態生成的，on函數的第二個參數，表示查找子元素
可參考：http://www.cnblogs.com/imsomnus/p/4512261.html

$('.searchTableDiv table').on('click', 'tr', function (){
        var $this = $(this);
        if (!$this.is(".stockHeader")){
            var stockCode = $this.children().eq(0).text().trim();
            var stockName = $this.children().eq(1).text();
            $('#stockSearch').val(stockCode);
        }
});

11、選擇器使用實例

        var checkedSubAccount = $(".qzfk-azmss input[type=radio]:checked");

　　　　 $("#tableForOrg input[type=checkbox]:checked")

　　　　 var v1 = parseFloat($(".px-table tr:not('.px-n'):eq(0)").find("td:eq("1")").html());

        $(".s-tab-table  tr:not(:first)").html("");

　　　　 $(".rightAlignTable tr td:nth-child(3)")

　　　　 if($(this).next().html().trim()==""||$(this).next().hasClass("sxq-dbk-l")){
    　　　　return false;
　　　　 }

　　　　 $(".sxq-dbk li:not(.sxq-dbk-f):not(:last-child)").html("")

　　　　 $(".checkedAll").closest("table").find("input[type='checkbox']:not(:first)").each(function (index) {
            if (true == $(this).prop("checked")){
        　　 　　var stockCode = $(this).closest("tr").find(".stockCodeValue a").text();
        　　 　　stockCodeArray.push(stockCode);
   　　  　　}
　　　　 });
　　　　 $(".sxq-dbk").find("li:not(.sxq-dbk-f):not(:last-child)")

　　　　 $(this).parent().parent().find("td:eq(1) a")

　　　　 $(this).closest("td").prev().find("a")

 12、正則表達式驗證輸入

var num2digit = /^\d{1,2}(\.\d{1,2})?$/;
function isNum2Digit(num) {
    return num2digit.test(num);
}

if ( isNaN(retraceRange) ){
            showMessage("最大回撤只能為數字", retracementArray.eq(1));
            return false;
}
if (!isNum2Digit(retraceRange)){
    if (isAddRetracement == "update" && $.trim(retraceRange) == ""){

    }else {
        showMessage("只能輸入0-100(不含0，100)間的2位小數", retracementArray.eq(1));
        return false;
    }
}

 

13、刷新當前頁面

function refreshPage() {
    $(".flash-btn").on("click", function(){
        console.log("refreshed current page");
        location=location;
    });
}

14、枚舉定義

if(typeof COLOR == "undefined"){
    var COLOR = {
        RED:   "#d73732",
        GREEN: "#299b4b",
        PURPLE: "#f022bd",
        YELLOW: "#e6c065",
        WHITE: "#e0e0e0"
    }
}

15、獲取url參數

傳參時：(為什么用encodeURIComponent，因為中文亂碼問題)

iframeEle.find("iframe").attr("src", "**.html?codeArray=" + codeArray+"&indexId=" + index.indexId + "&indexName=" + encodeURIComponent(index.indexName));

function getUrlParam(name){
    //構造一個含有目標參數的正則表達式對象
    var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
    //匹配目標參數
    var r = window.location.search.substr(1).match(reg);
    //返回參數值
    if (r!=null) return decodeURIComponent(r[2]);
    return null;
}

 

16、將a標簽href置為無效，定義點擊事件

<a href="javascript:void(0)" class="l-qzfk"> aaa </a>
$(".l-qzfk").click(function(){
        do sth;   
        return false;
})

17、根據ajax返回數據動態生成內容

$.ajax({
            type: "POST",
            dataType: "json",
            url: "/***",
            data: {
                currentPage: currentPage,
                pageSize: pageSize,
                filter_subAccountNo: filter.checkedSubAccountId,
                filter_stockCode: filter_stockCode,
                isCalcSubTraders: filter.isCalcSubTraders
            },
            success: responseHandle
});
function responseHandle(data) {
        if (data.state != 0) {
            $(".s-tab-table  tr:not(:first)").html("");
            return;
        }
        var filter = getQueryAccount();
        var isCalcSubTraders = filter.isCalcSubTraders;
        var riskItemsList = data.list;

        if (isCalcSubTraders) {
            $("#tableForOrg  tr:not(:first)").remove();
        } else {
            $("#tableForOrg  tr:not(:first)").remove();
        }
        for (var i = 0; i < riskItemsList.length; i++) {
            var item = riskItemsList[i];

            var $tr = $("<tr></tr>");
            var $checkboxTr = $('<td> <input id="zzh-checked' + i + isCalcSubTraders + '" name="stockCodeCheckbox" type="checkbox" data="' + item.stockCode + '"><label for="zzh-checked' + i + isCalcSubTraders + '"></label></td>"');
            if (item.stopTrading){//停牌
                $checkboxTr.css("opacity",0.2);
                $checkboxTr.find("input").attr("disabled","disabled");
            }

            var $stockCodeTr = $('<td class="b-td"><a  href="javascript:void(0)">'+ item.stockCode +'</a></td>');
            var stopTradingStr = "";
            if (item.stopTrading){
                 stopTradingStr = "(停牌)";
            }
            var $stockNameTr = $('<td><a class="b-td" href="javascript:void(0)">'+ item.stockName + stopTradingStr +'</a></td>');
            var $carryCostPrice = $("<td class='b-td'>" + parseFloat(item.carryCostPrice).toFixed(2)+ "</td>");
            //增加持倉數量，在持倉成本后面
            var $stockNum = $("<td class='b-td'>" + item.stockNum/100+ "</td>");
            //后台取漲跌幅失敗，會返回999，此處顯示為空
            var $upDownRate;
            if (item.upDownRate > 998){
                $upDownRate = $("<td class='b-td'></td>");
            }else {
                $upDownRate = $("<td class='b-td'>" + item.upDownRate.toFixed(2) + "</td>");
            }
            // 漲跌幅：正數為紅色、負數為綠色；
            if (item.upDownRate > 0){
                $($upDownRate).css("color", COLOR.RED);
            }else if (item.upDownRate < 0){
                $($upDownRate).css("color", COLOR.GREEN);
            }else {
                $($upDownRate).css("color", COLOR.WHITE);
            }
            //  樣本庫指標有標識；
            if (item.baseinfo.isBelongBio == '1'){
                $tr.addClass("ybkTr");
            }
            var $retracementProbability = $("<td class='b-td'>" + (item.retracementProbability != null ? parseFloat(item.retracementProbability).toFixed(2) : "") + "</td>");
            var $retracementRange = $("<td class='b-td'>" + (item.retracementRange != null ? parseFloat(item.retracementRange).toFixed(2) : "") + "</td>");
            var $oper = null;
            //如果不是子賬戶，才能看到這兩個按鈕
            if (!isCalcSubTraders) {
                if (item.retracementProbability == null) {
                    // 沒設置參數
                    $oper = $('<td><input type="button" class="sxq-btn jjy-xgcs" value="設置"/><input type="button" class="sxq-btn ml5 calc-now" value="計算"/></td>');
                } else {
                    $oper = $('<td><input type="button" class="sxq-btn jjy-xgcs" value="修改"/><input type="button" class="sxq-btn ml5 calc-now" value="計算"/></td>');
                }
            }else {
                $oper = $('<td></td>');
            }
            if (item.stopTrading){
                $oper.find("input").attr("disabled","disabled");
                $oper.css("opacity",0.2);
            }
            if (item.retracementProbability == null || item.retracementRange == null){
                $oper.find("input").eq(1).attr("disabled","disabled");
                $oper.find("input").eq(1).css("opacity",0.2);
            }
            $checkboxTr.appendTo($tr);
            $stockCodeTr.appendTo($tr);
            $stockNameTr.appendTo($tr);
            $carryCostPrice.appendTo($tr);
            $stockNum.appendTo($tr);
            $upDownRate.appendTo($tr);
            $retracementProbability.appendTo($tr);
            $retracementRange.appendTo($tr);

            $oper.appendTo($tr);
            $("#tableForOrg tbody").append($tr);
            //需要預警的tr要改變顏色
            if (item.needWarn == true){
                $($tr).addClass("yujingTr");
                $tr.find("td").eq(1).find("a").css("color", COLOR.WHITE);
                $tr.find("td").eq(2).find("a").css("color", COLOR.WHITE);
            }else {
                $($tr).removeClass("yujingTr");
            }
        }
    }

 

18、有時，比如需要下載文件，這時候用ajax就不太方便（沒研究過），所以這時候一般采用form提交

<form class="fl" id="downloadExcel" action="/**.do">
    <input type="hidden" name="currentPage"/>
    <input type="hidden"  name="pageSize"/>
    <input type="hidden"  name="stockCode"/>
    <input type="hidden" name="days" />
    <input type="submit" class="sxq-btn mt15 ml15" value="一鍵導出">
</form>

<form class="fr" id="downloadExcel" action="/replayAnalysis/exportPretemplateCompareExcel.do">
    <input type="hidden" name="currentPage"/>
    <input type="hidden"  name="pageSize"/>
    <input type="hidden"  name="filter_stockCode"/>
    <input type="hidden" name="filter_subAccountNo" />
    <input type="hidden" name="isCalcSubTraders" />
    <input type="button" id="exportExcel" style="position: relative;top: -2px" class="sxq-btn ml15" value="一鍵導出">
</form>

$("#exportExcel").on("click",function () {
        var filter = getQueryAccount();
        $("#downloadExcel").find("input[name=currentPage]").val("1");
        $("#downloadExcel").find("input[name=pageSize]").val("200");
        $("#downloadExcel").find("input[name=filter_stockCode]").val("");
        $("#downloadExcel").find("input[name=filter_subAccountNo]").val(filter.checkedSubAccountId);
        $("#downloadExcel").find("input[name=isCalcSubTraders]").val(filter.isCalcSubTraders);
        $("#downloadExcel").submit();
})