JQuery学习笔记系列（二）----

　　jQuery是一个兼容多浏览器的javascript库，核心理念是write less,do more(写得更少,做得更多)。其中也提供了很多函数来更加简洁的实现复杂的功能。

　　事件切换函数toggle(fn1,fn2,fn3 ...):作用是每次点击后依次调用函数，第一次点击调用fn1,第二次调用fn2,依次类推直到调用最后一个函数，然后继续重新开始从第一个继续开始继续循环

<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背景色变为绿色，第二次变为红色，第三次变为黄色，第四次重新变为绿色...

　　事件切换函数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个面积相加得出的

<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函数试验一下。

JQuery学习笔记系列（二）----的更多相关文章

JS与Jquery学习笔记（二）
一. JS 的面向对象 JS没有类,其类就用function来代替如下所示: function Cat(name, color){ this.name=name; this.color=color; ...
JQuery学习笔记系列（一）----选择器详解
笔者好长时间没有更新过博客园的笔记了,一部分原因是去年刚刚开始工作一段时间忙碌的加班,体会了一种每天加班到凌晨的充实感,之后闲暇时间了也因为自己懒惰没有坚持记笔记的习惯,现在重新拾起来. 借用古人的一 ...
jQuery学习笔记（二）：this相关问题及选择器
上一节的遗留问题,关于this的相关问题,先来解决一下. this的相关问题 this指代的是什么这个应该是比较好理解的,this就是指代当前操作的DOM对象. 在jQuery中,this可以用于单 ...
jquery学习笔记之二
1.one()与bind()的区别 bind():给一个对象绑定事件,可以绑定一个事件,也可以绑定多个事件. one():跟bind一样,都是给对象绑定事件的. 如给一个按钮绑定了三个相同的click ...
JQuery学习笔记（二）JQuery方法
jQuery 提供一系列与 DOM 相关的方法,便于访问和操作元素和属性 Query 文档操作方法这些方法对于 XML 文档和 HTML 文档均是适用的,除了:html(). 方法描述 addCl ...
初步学习jquery学习笔记（二）
jQuery事件 jquery是为事件处理而设计的什么是事件? 页面对不同访问者的相应叫做事件. 事件处理程序指的是html中发生某些事件所调用的方法实例: 在元素上移动鼠标选取单选按钮点击元 ...
JNI 学习笔记系列(二)
c中没有Boolean类型的值,一般是使用1表示true,0表示false,c中也没有String类型的数据,c中的字符串要通过char数组来表示.c中没有byte类型,一般用char表示byte类型 ...
jQuery学习笔记（二）
1. 基本选择器 #id ("#one") .class $(".two") element (根据给定的元素名匹配元素) $("div& ...
Windows-universal-samples学习笔记系列二：Controls, layout, and text
Controls, layout, and text AutoSuggestBox migration Clipboard Commanding Context menu Context menu ( ...

随机推荐

微信小程序-蓝牙连接
最近的项目需要使用小程序的蓝牙功能与硬件设备进行连接相互传送数据指令,联调过程中发现一些问题,于是想着记录下来,方便以后查看! 1.0一般使用蓝牙功能肯定是想连接某一个蓝牙设备,所以需要知道这个蓝牙设 ...
挑战程序设计第二版PDF高清完整版免费下载
挑战程序设计pdf 网上有些地方的资源获取比较麻烦,本着共享的原则将此书pdf发出来,希望有条件的同学支持正版. 链接:https://pan.baidu.com/s/16S-5QOjoNxSGQx- ...
使用正则表达式爬取500px上的图片
网址:https://500px.com/seanarcher,seanarcher是一个up主的名字打开这个网址,会发现有好多图片,具体到每一个图片的url地址 https://500px.com ...
记一次惊心的网站 TCP 队列问题排查经历
https://blog.csdn.net/chenlycly/article/details/80868990 http://www.mytju.com/classcode/news_readnew ...
flask日期和时间
本文翻译自The Flask Mega-Tutorial Part XII: Dates and Times 这是Flask Mega-Tutorial系列的第十二部分,我将告诉你如何以适配所有用户的 ...
foj 2139
hi.baidu.com/ydlqw/item/120cd21a5afd5becddeeca41?qq-pf-to=pcqq.c2c
JAVA反映机制A
以下这个URL讲得不错,可以把概念和用途结合起来, 练练手: http://blog.csdn.net/xiaohai798/article/details/11640427 import java. ...
[bzoj3307]雨天的尾巴_线段树合并
雨天的尾巴 bzoj-3307 题目大意:N个点,形成一个树状结构.有M次发放,每次选择两个点x,y对于x到y的路径上(含x,y)每个点发一袋Z类型的物品.完成所有发放后,每个点存放最多的是哪种物品. ...
为什么pthread_cond_wait须要传递mutex參数
这是来自知乎的一个问题,由@吴志强提出,有意思的是,他看了大家的回答后,突然顿悟了,同一时候也发现有人答错了,于是乎.他自己回答了自己的问题. 我看完后.发现他分析的非常精彩,于是就记录在这.以下是他 ...
php学习之道：WSDL具体解释(一)
WSDL文档使用web服务描写叙述语言来定义服务. 文档包含逻辑(抽象)部分和详细部分. 抽象部分用于定义独立于实现的数据类型和消息,详细部分定义一个endpoint怎样实现一个能够与外界进行交互的服 ...

JQuery学习笔记系列（二）----

JQuery学习笔记系列（二）----的更多相关文章

随机推荐

热门专题