JQuery學習筆記系列（二）----

時間 2019-11-18

原文原文鏈接

　　jQuery是一個兼容多瀏覽器的javascript庫，核心理念是write less,do more(寫得更少,作得更多)。其中也提供了不少函數來更加簡潔的實現複雜的功能。javascript

　　事件切換函數toggle(fn1,fn2,fn3 ...):做用是每次點擊後依次調用函數，第一次點擊調用fn1,第二次調用fn2,依次類推直到調用最後一個函數，而後繼續從新開始從第一個繼續開始繼續循環css

<body>
    <ul>
        <li>Go to the store</li>
        <li>Pick up dinner</li>
        <li>Debug crash</li>
        <li>Take a jog</li>
    </ul>
    <button>click me</button>
<script type="text/javascript">
$(document).ready(function(){
      $("button").toggle(function(){
        $("body").css("background-color","green");},
        function(){
        $("body").css("background-color","red");},
        function(){
        $("body").css("background-color","yellow");}
      );
    });

</script>
</body>

　　上面代碼的效果就是第一次點擊button,body背景色變爲綠色，第二次變爲紅色，第三次變爲黃色，第四次從新變爲綠色...java

　　事件切換函數hover(over, out)：一個模仿懸停事件的方法，鼠標懸停時調用over函數，鼠標移出時調用out函數數據庫

<body>
    <ul>
        <li>Go to the store</li>
        <li>Pick up dinner</li>
        <li>Debug crash</li>
        <li>Take a jog</li>
    </ul>
<script type="text/javascript">
$(document).ready(function(){
      $("ul").hover(function(){
        $("ul").css("background-color","green");},
        function(){
        $("ul").css("background-color","red");}
      );
    });

</script>
</body>

　　鼠標移動到ul標籤上面，ul標籤的背景色變爲綠色，鼠標移出ul標籤背景色變爲紅色瀏覽器

　　在項目開發中有時會涉及到報表系統，報表中一般會有合計、總計這樣的字段，爲了數據的準確性，合計和總計這些字段數據庫不會實際建字段，或者使用視圖中計算出來的數字或者在後臺邏輯計算中計算得出，那麼當須要修改這個頁面的字段時就會出現一個問題，修改了基本字段，那麼合計也應該動態的進行變化，那麼咱們使用jQuery裏面的函數就能夠比較簡潔快速的進行頁面聯動的效果。上圖中總建築面積就是下面3個面積相加得出的app

<div class="wrapper">
    <div class="title-box">
    <a class="btn icon-read" href="#" onclick="doSave()" title="保存">保存</a>
    </div>
    <div class="table-box" id="mainTable">
        <t:formvalid formid="formobj" dialog="true" usePlugin="password" layout="div" tiptype="5" action="tllazghjmdghssAction.do?doSave">
        <table class="the-table" border="0" cellspacing="0" cellpadding="0">
            <tr>
                <td style="width:auto;" class="title" rowspan="2">序號</td>
                <td style="width:10%;" class="title" rowspan="2">項目名稱</td>
                <td style="width:auto;" class="title" rowspan="2">單位</td>
                <td style="width:auto;" class="title" colspan="2">初步設計</td>
                <td style="width:auto;" class="title" colspan="2">安置實施</td>
            </tr>
            <tr>
                <td style="width:auto;" class="title">達德移民安置點</td>
                <td style="width:auto;" class="title">多卡移民安置點</td>
                <td style="width:auto;" class="title">達德移民安置點</td>
                <td style="width:auto;" class="title">多卡移民安置點</td>
            </tr>
            <tr>
                <td style="text-align:center;vertical-align: middle;">1</td>
                <td style="text-align:left;vertical-align: middle;">規劃範圍面積</td>
                <td style="text-align:center;vertical-align: middle;">㎡</td>
                <c:forEach items="${jmghList}" var="jmgh">
                    <input id="id" name="id" value="${jmgh.id}"  type="hidden">
                    <input id="fsjd1" name="fsjd1" value="${jmgh.fsjd}"  type="hidden">
                    <input id="fsymazd1" name="fsymazd1" value="${jmgh.fsymazd}"  type="hidden">
                    <td style="text-align:center;vertical-align: middle;"><input class="inputxt" id="ffghfwmj1" name="ffghfwmj1"  value="${jmgh.ffghfwmj}" datatype="n" nullmsg="請填寫規劃範圍面積"><span class="Validform_notnull">*</span></td>
                </c:forEach>
            </tr>
            <tr>
                <td style="text-align:center;vertical-align: middle;">2</td>
                <td style="text-align:left;vertical-align: middle;">總建築面積</td>
                <td style="text-align:center;vertical-align: middle;">㎡</td>
                    <c:forEach items="${jmghList}" var="jmgh">
                    <td style="text-align:center;vertical-align: middle;"><input readonly="readonly" class="inputxt" id="ffzjzmj1" name="ffzjzmj1"  value="${jmgh.ffptgjmj+jmgh.ffjzjzmj+jmgh.ffszjzmj}" datatype="n" nullmsg="請填寫總建築面積"><span class="Validform_notnull">*</span></td>
                </c:forEach>
            </tr>
            <tr>
                <td style="text-align:center;vertical-align: middle;">2.1</td>
                <td style="text-align:center;vertical-align: middle;">配套公建面積</td>
                <td style="text-align:center;vertical-align: middle;">㎡</td>
                    <c:forEach items="${jmghList}" var="jmgh">
                    <td style="text-align:center;vertical-align: middle;"><input onblur="doChange()" class="inputxt" id="ffptgjmj1" name="ffptgjmj1"  value="${jmgh.ffptgjmj}" datatype="n" nullmsg="請填寫配套公建面積"><span class="Validform_notnull">*</span></td>
                </c:forEach>
            </tr>
            <tr>
                <td style="text-align:center;vertical-align: middle;">2.2</td>
                <td style="text-align:center;vertical-align: middle;">居住建築面積</td>
                <td style="text-align:center;vertical-align: middle;">㎡</td>
                    <c:forEach items="${jmghList}" var="jmgh">
                    <td style="text-align:center;vertical-align: middle;"><input onblur="doChange()" class="inputxt" id="ffjzjzmj1" name="ffjzjzmj1"  value="${jmgh.ffjzjzmj}" datatype="n" nullmsg="請填寫居住建築面積"><span class="Validform_notnull">*</span></td>
                </c:forEach>
            </tr>
            <tr>
                <td style="text-align:center;vertical-align: middle;">2.3</td>
                <td style="text-align:center;vertical-align: middle;">市政建築面積</td>
                <td style="text-align:center;vertical-align: middle;">㎡</td>
                    <c:forEach items="${jmghList}" var="jmgh">
                    <td style="text-align:center;vertical-align: middle;"><input onblur="doChange()" class="inputxt" id="ffszjzmj1" name="ffszjzmj1"  value="${jmgh.ffszjzmj}" datatype="n" nullmsg="請填寫市政建築面積"><span class="Validform_notnull">*</span></td>
                </c:forEach>
            </tr>
            <tr>
                <td style="text-align:center;vertical-align: middle;">3</td>
                <td style="text-align:left;vertical-align: middle;">容積率</td>
                <td style="text-align:center;vertical-align: middle;"></td>                                                                                                        
                    <c:forEach items="${jmghList}" var="jmgh">
                    <td style="text-align:center;vertical-align: middle;"><input class="inputxt" id="ffrjl1" name="ffrjl1"  value="${jmgh.ffrjl}" datatype="n" nullmsg="請填寫容積率"><span class="Validform_notnull">*</span></td>
                </c:forEach>
            </tr>
            <tr>
                <td style="text-align:center;vertical-align: middle;">4</td>
                <td style="text-align:left;vertical-align: middle;">建築密度</td>
                <td style="text-align:center;vertical-align: middle;">%</td>
                    <c:forEach items="${jmghList}" var="jmgh">
                    <td style="text-align:center;vertical-align: middle;"><input class="inputxt" id="ffjzmd1" name="ffjzmd1"  value="${jmgh.ffjzmd}" datatype="n" nullmsg="請填寫建築密度"><span class="Validform_notnull">*</span></td>
                    </c:forEach>
            </tr>
            <tr>
                <td style="text-align:center;vertical-align: middle;">5</td>
                <td style="text-align:left;vertical-align: middle;">綠地率</td>
                <td style="text-align:center;vertical-align: middle;">%</td>
                    <c:forEach items="${jmghList}" var="jmgh">
                        <td style="text-align:center;vertical-align: middle;"><input class="inputxt" id="ffldl1" name="ffldl1"  value="${jmgh.ffldl}" datatype="n" nullmsg="請填寫綠地率"><span class="Validform_notnull">*</span></td>
                </c:forEach>
            </tr>
            <tr>
                <td style="text-align:center;vertical-align: middle;">6</td>
                <td style="text-align:left;vertical-align: middle;">人均用地面積</td>
                <td style="text-align:center;vertical-align: middle;">㎡</td>
                    <c:forEach items="${jmghList}" var="jmgh">
                    <td style="text-align:center;vertical-align: middle;"><input class="inputxt" id="ffrjydmj1" name="ffrjydmj1"  value="${jmgh.ffrjydmj}" datatype="n" nullmsg="請填寫人均用地面積"><span class="Validform_notnull">*</span></td>
                </c:forEach>
            </tr>
            <tr>
                <td style="text-align:center;vertical-align: middle;">7</td>
                <td style="text-align:left;vertical-align: middle;">總戶數</td>
                <td style="text-align:center;vertical-align: middle;">戶</td>
                    <c:forEach items="${jmghList}" var="jmgh">
                    <td style="text-align:center;vertical-align: middle;"><input class="inputxt" id="ffzhs1" name="ffzhs1"  value="${jmgh.ffzhs}" datatype="n" nullmsg="請填寫總戶數"><span class="Validform_notnull">*</span></td>
                </c:forEach>
            </tr>
            <tr>
                <td style="text-align:center;vertical-align: middle;">8</td>
                <td style="text-align:left;vertical-align: middle;">戶均人口</td>
                <td style="text-align:center;vertical-align: middle;">個</td>
                    <c:forEach items="${jmghList}" var="jmgh">
                    <td style="text-align:center;vertical-align: middle;"><input class="inputxt" id="ffhjrk1" name="ffhjrk1"  value="${jmgh.ffhjrk}" datatype="n" nullmsg="請填寫總戶數"><span class="Validform_notnull">*</span></td>
                </c:forEach>
            </tr>
            <tr>
                <td style="text-align:center;vertical-align: middle;">9</td>
                <td style="text-align:left;vertical-align: middle;">搬遷人口</td>
                <td style="text-align:center;vertical-align: middle;">個</td>
                    <c:forEach items="${jmghList}" var="jmgh">
                    <td style="text-align:center;vertical-align: middle;"><input class="inputxt" id="ffbqrk1" name="ffbqrk1"  value="${jmgh.ffbqrk}" datatype="n" nullmsg="請填寫搬遷人口"><span class="Validform_notnull">*</span></td>
                </c:forEach>
            </tr>
            <tr>
                <td style="text-align:center;vertical-align: middle;">10</td>
                <td style="text-align:left;vertical-align: middle;">停車位</td>
                <td style="text-align:center;vertical-align: middle;">個</td>
                    <c:forEach items="${jmghList}" var="jmgh">
                    <td style="text-align:center;vertical-align: middle;"><input class="inputxt" id="fftcw1" name="fftcw1"  value="${jmgh.fftcw}" datatype="n" nullmsg="請填寫停車位"><span class="Validform_notnull">*</span></td>
                </c:forEach>
            </tr>
        </table>
        </t:formvalid>
    </div>
</div>

<script type="text/javascript">
    function doChange(){
        var i=0;
        var ffptgjmj = new Array(4);
        var ffjzjzmj = new Array(4);
        var ffszjzmj = new Array(4);
        $("input[name='ffptgjmj1']").each(function(){
            ffptgjmj[i] = isNull($(this).val());
            i++;
        });
        i = 0;
        $('input[name="ffjzjzmj1"]').each(function(){
            ffjzjzmj[i] = isNull($(this).val());
            i++;
        });
        i = 0;
        $('input[name="ffszjzmj1"]').each(function(){
            ffszjzmj[i] = isNull($(this).val());
            i++;
        });
        i = 0;
        $('input[name="ffzjzmj1"]').each(function(){
            $(this).attr('value',parseInt(ffptgjmj[i])+parseInt(ffjzjzmj[i])+parseInt(ffszjzmj[i]));
            i++;
        });
        
    }
    function isNull(data){ 
        return (data == "" || data == undefined || data == null) ? 0 : data; 
    }
</script>

　　這個就是使用each函數進行遍歷，而後當對應的input文本框失去焦點時調用doChange()方法進行更新總建築面積字段，這個是一個完整的例子i，有興趣的朋友能夠copy過去本身跑一下試試，其中jsp部分有不少項目中框架的痕跡，感興趣朋友本身寫一個jsp，而後模仿我上面的js函數試驗一下。框架