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学习笔记系列(二)----的更多相关文章

  1. JS与Jquery学习笔记(二)

    一. JS 的面向对象 JS没有类,其类就用function来代替如下所示: function Cat(name, color){ this.name=name; this.color=color; ...

  2. JQuery学习笔记系列(一)----选择器详解

    笔者好长时间没有更新过博客园的笔记了,一部分原因是去年刚刚开始工作一段时间忙碌的加班,体会了一种每天加班到凌晨的充实感,之后闲暇时间了也因为自己懒惰没有坚持记笔记的习惯,现在重新拾起来. 借用古人的一 ...

  3. jQuery学习笔记(二):this相关问题及选择器

    上一节的遗留问题,关于this的相关问题,先来解决一下. this的相关问题 this指代的是什么 这个应该是比较好理解的,this就是指代当前操作的DOM对象. 在jQuery中,this可以用于单 ...

  4. jquery学习笔记之二

    1.one()与bind()的区别 bind():给一个对象绑定事件,可以绑定一个事件,也可以绑定多个事件. one():跟bind一样,都是给对象绑定事件的. 如给一个按钮绑定了三个相同的click ...

  5. JQuery学习笔记(二)JQuery方法

    jQuery 提供一系列与 DOM 相关的方法,便于访问和操作元素和属性 Query 文档操作方法 这些方法对于 XML 文档和 HTML 文档均是适用的,除了:html(). 方法 描述 addCl ...

  6. 初步学习jquery学习笔记(二)

    jQuery事件 jquery是为事件处理而设计的 什么是事件? 页面对不同访问者的相应叫做事件. 事件处理程序指的是html中发生某些事件所调用的方法 实例: 在元素上移动鼠标 选取单选按钮 点击元 ...

  7. JNI 学习笔记系列(二)

    c中没有Boolean类型的值,一般是使用1表示true,0表示false,c中也没有String类型的数据,c中的字符串要通过char数组来表示.c中没有byte类型,一般用char表示byte类型 ...

  8. jQuery学习笔记(二)

    1. 基本选择器 #id      ("#one") .class  $(".two") element (根据给定的元素名匹配元素) $("div& ...

  9. Windows-universal-samples学习笔记系列二:Controls, layout, and text

    Controls, layout, and text AutoSuggestBox migration Clipboard Commanding Context menu Context menu ( ...

随机推荐

  1. lvs直接路由模式DR模式

    1)实验所有关闭防火墙systemtcl stop firewalldsystemctl disable firewalldsetenforce 0iptables -F2)配置负载调度器配置虚拟IP ...

  2. BZOJ 1594: [Usaco2008 Jan]猜数游戏 线段树 + 思维 + 二分

    Code: #include<bits/stdc++.h> #define maxn 3000000 using namespace std; void setIO(string s) { ...

  3. 【转载】JSTL 标签大全详解

    版权声明:本文为博主原创文章,转载请注明出处,冷血之心的博客. https://blog.csdn.net/qq_25827845/article/details/53311722 (尊重劳动成果,转 ...

  4. maven将jar包添加到本地仓库

    mvn install:install-file -Dfile=jar包本地路径 -DgroupId=groupID -DartifactId=ifactId -Dversion=版本 -Dpacka ...

  5. 文献阅读 | Benefits and limitations of genome-wide association studies

    参考:今日阅读:GWAS的优劣势 - Omics Liu  Omics 待续~

  6. python 从给定的URL中提取顶级域名(TLD)

    安装 PyPI的最新稳定版本: pip install tld 或者GitHub的最新稳定版本: pip install https://github.com/barseghyanartur/tld/ ...

  7. appium滑动

    在app应用日常使用过程中,会经常用到在屏幕滑动操作.如刷朋友圈上下滑操作.浏览图片左右滑动操作等.在自动化脚本该如何实现这些操作呢? 在Appium中模拟用户滑动操作需要使用swipe方法,该方法定 ...

  8. 【剑指Offer】40、数组中只出现一次的数字

      题目描述:   一个整型数组里除了两个数字之外,其他的数字都出现了两次.请写程序找出这两个只出现一次的数字.要求时间复杂度为O(n),空间复杂度为O(1).   解题思路:   这道题目相对比较难 ...

  9. iptables 实现内网转发上网

    介绍 通过iptables做nat转发实现所有内网服务器上网. 操作 首先开启可以上网的服务器上的内核路由转发功能.这里我们更改/etc/sysctl.conf 配置文件. [root@web1 /] ...

  10. POJ 2030

    简单DP题. 可以用运算符重载来写,简单一些. #include <iostream> #include <cstdio> #include <cstring> # ...