实用的JavaScript(持续添加)

Checkbox类:

1.实现checkbox的全选功能

<script type="text/javascript">
//全选checkbox:1、当全选checkbox勾选,子checkbox(name为'ids'的checkbox)自动全部勾选
//		2、当全选checkbox取消勾选,子checkbox自动全部取消勾选
function  checkAll(){
      if($("#checkall")[0].checked){
    	  $("input[type='checkbox'][name='ids']").attr("checked","checked");
      }else{
    	  $("input[type='checkbox'][name='ids']").attr("checked",null);
      }
}
//子checkbox:1、当所有子checkbox全部勾选时,全选checkbox自动勾选
//2、当有一个子checkbox没有勾选时,全选checkbox自动改为未勾选
function changeCheckCount(){
       var count=0;
	   $("input[type='checkbox'][name='ids']").each(function(index,data){
            if(this.checked){
            	count++;
            }
	   });
       if(count== $("input[type='checkbox'][name='ids']").length){
    	   $("#checkall").attr("checked","checked");
       }else{
    	   $("#checkall").attr("checked",null);
       }
}
</script>
<td><!-- 全选checkbox -->
	<s:checkbox name="checkall" id="checkall" value="" cssClass="checkbox" onclick="checkAll()"/>
</td>
<td><!-- 子checkbox -->
   <s:checkbox name="ids"  fieldValue="" cssClass="checkbox" onclick="changeCheckCount()"/>
   <s:checkbox name="ids"  fieldValue="" cssClass="checkbox" onclick="changeCheckCount()"/>
   <s:checkbox name="ids"  fieldValue="" cssClass="checkbox" onclick="changeCheckCount()"/>
   <s:checkbox name="ids"  fieldValue="" cssClass="checkbox" onclick="changeCheckCount()"/>
</td>

2.获取checkbox被选中的个数,并将checkbox的值组织成字符串

<script type="text/javascript">
//1、获取checkbox选中的个数:count
//2、将选中的checkbox的值(此例子为id)组织成"id,id,id,..."类型的字符串,方便action获取:ids
function checkbox(){
    var count=0;
    var ids="";
    $("input[type='checkbox'][name='ids']").each(function(index,data){
       if(this.checked){
          count++;
          if(count==1){
              ids=$(this).val();
          }else{
              ids=ids+","+$(this).val();
          }
       }
   });
}

</script> 
<td>
   <s:checkbox name="ids"  fieldValue="" cssClass="checkbox"  />
   <s:checkbox name="ids"  fieldValue="" cssClass="checkbox" "/>
   <s:checkbox name="ids"  fieldValue="" cssClass="checkbox" "/>
   <s:checkbox name="ids"  fieldValue="" cssClass="checkbox" "/>
</td>

Select类

1.jQuery实现下拉列表的联动,实现省份和城市的关联

<script type="text/javascript">
//实现省份和城市的二级联动
/*
jQuery.post( url, [data], [callback], [type] ) :使用POST方式来进行异步请求,[]为可选属性,此例子选了[data],[callback]
参数:
url (String) : 发送请求的URL地址.
data (Map) : (可选) 要发送给服务器的数据,以 Key/value 的键值对形式表示。
callback (Function) : (可选) 载入成功时回调函数(只有当Response的返回状态是success才是调用该方法)。
type (String) : (可选)官方的说明是:Type of data to be sent。其实应该为客户端请求的类型(JSON,XML,等等)
*/
function showCity(value){
	//通过action里的showCity函数实现通过省份名字获取对应省份下的城市列表,并返回相应的数据
	//{name:value}:value为省份下拉列表传过来的省份名字
    $.post("${pageContext.request.contextPath}/company_showCity.action",{name:value} ,function(data,textStatuts){
            //alert(data);
            var dataObj=eval("("+data+")");
            //alert(dataObj);

            //先删除之前一次加载的城市
            $("select[name='city'] option[value!='']").remove();

            //将城市封装成option后加到select里,格式如下
            // <select name="city" style="width:90%">
                //<option value="">--------</option>
            //</select>
            for(var i=0;i<dataObj.length;i++){
                  var $option=$("<option></option>");
                  $option.attr("value",dataObj[i].name);
                  $option.text(dataObj[i].name);
                  $("select[name='city']").append($option);
            }
     });
}
</script>
<tr>
	<td>省份:</td>
	<td>
        <s:select list="#provinceList" name="province" id="province"
                listKey="name" listValue="name"
                headerKey="" headerValue="--------"
                cssStyle="width:90%" onchange="showCity(this.value)">
        </s:select>
	</td>
	<td>城市:</td>
	<td>
	    <s:select list="{}" name="city" id="city"
	               headerKey="" headerValue="--------" cssStyle="width:90%" >
	    </s:select>
	</td>
</tr>

company.action中的showCity函数

/**	通过省份显示对应城市
 * @throws IOException **/
public String showCity() throws IOException{
	//拿到jsp中省份的名字
	String name=request.getParameter("name");
	if(StringUtils.isNotBlank(name)){
		//通过省份名字拿到对应省份实体(下面查询城市时,用来拿省份id)
		Province province=provinceService.findProvinceByName(name);
		//通过省份id查询该省份下的所有城市
		List<City> cityList=cityService.findCityByPid(province.getId());

		//New一个JsonConfig
		JsonConfig config=new JsonConfig();
		//设置不要获取的属性列,只取city表里的name属性,根据自己定义的city表进行定义,
		config.setExcludes(new String[]{"id","pycode","pid","postcode","areacode"});
		//将List转换为jsonArray
		JSONArray jsonArray=JSONArray.fromObject(cityList,config);
		response.setCharacterEncoding("utf-8");
		//将jsonArray转成字符串后发送给jsp页面
		response.getWriter().print(jsonArray.toString());
	}
	return null;
}

实用的JavaScript(持续添加)

时间: 2024-10-19 03:58:03

实用的JavaScript(持续添加)的相关文章

9个实用的Javascript代码高亮脚本

代码高亮很有用,特别是在需要在网站或者blog中显示自己编写的代码的时候,或者给其他人查看或调试语法错误的时候.我们可以将代码高亮,以便阅读者可以十分方便的读取代码块,增加用户阅读代码的良好体验. 目前,有很多免费而且有用的代码高亮脚本.这些脚本大多是由Javascript语言编写,也有些使用其它语言(比如java.Phyton或Ruby)等写的. 下面来推荐最受欢迎.最实用的9个Javascript代码高亮脚本. 1. SyntaxHighlighter 我相信这是最普遍代码高亮代码.它支持多

实用的JavaScript鼠标特效

JS代码使鼠标滚轮失效 1 当页面内容太多时,可以通过鼠标滚轮实现翻页效果.但有些读书网站提供页面自动滚屏的功能,此时可使鼠标的滚轮失效,让用户充分体验网站提供的功能. 本例在页而中添加了一个表格,可将窗口缩小,以出现滚动条效果.当出现滚动条时.滑动鼠标的滚轮,测试此操作是否能够成功.代码重写了“document.onmousewheel”方法,若返回false值则表示不执行任何鼠标滚动的操作. 2 实例代码如下: <html xmlns="http://www.w3.org/1999/x

一些比较实用的javascript方法收集,留着有用

动态加载javascript文件 <script type="text/javascript"> //<!-- /*动态加载方法*/ function loadScript(url, callback){ var script = document.createElement("script"); script.type = "text/javascript"; if(script.readyState){ //IE scrip

【转】console.time 简单分析javascript动态添加Dom节点的性能

本文代码约定 1 el: 指的是增加直接点的DOM节点 2 totalNum: 为100000(值越大越能体现差距)指的是循环创建的DOM节点 3 for(var i=0;i<totalNum;i++){}: 我们用for来表示就好了,简写代码 如果叫你用javascript动态增加DOM节点,你有哪几种思路呢? 1 .使用innerHTML和字符串拼接 console.time("time1"); var str = ""; for{ str += &quo

console.time 简单分析javascript动态添加Dom节点的性能

Bullshit 本来想每天都更新下博客的,但是最近要考试,还有就是自己还是停留在暗自窃喜中吧(这种想法要改变).其实最近总在想,自己要怎么去管理自己的数据,每天的生活都是对自己的数据的增删查改.昨天把自己的电脑重装了,确实很多软件的存放要改地方了,之前不知道怎么去管理软件安装,所以放得乱七八糟的.说好一大堆废话之后,我最后再说一遍,管好自己的时间.数据真的比你学习东西重要. Method 本文代码约定 1 el: 指的是增加直接点的DOM节点 2 totalNum: 为100000(值越大越能

[VisualStudio]_[VS实用插件集合*持续更新]

场景: 1. 有些插件对提高效率是必要和必需的. 吐槽下:微软的程序员如何解决以下问题的?不用插件. 1. 快速打开文件,文件多之后VS只能通过鼠标点击 "解决方案资源管理器" 来双击打开文件,效率很低.这个插件可以通过快捷键CTRL+K,CTRL+O来打开指定的文件,支持文件名模糊匹配. 下载地址:  http://visualstudiogallery.msdn.microsoft.com/3eb2f230-2728-4d5f-b448-4c0b64154da7 vs2012的没试

12个实用的 Javascript 奇淫技巧

这里分享12个实用的 Javascript 奇淫技巧.JavaScript自1995年诞生以来已过去了16个年头,如今全世界无数的网页在依靠她完成各种关键任务,JavaScript曾在Tiobe发布的编程语言排行榜中排到了第8名,紧随C#,JavaScript从过去装饰性的一种脚本语言转变为主流的编程语言,人们用它来开发更大更复杂的程序. 1. 取整同时转成数值型: '10.567890'|0 结果: 10 '10.567890'^0 结果: 10 -2.23456789|0 结果: -2 ~~

用Javascript动态添加删除HTML元素实例 (转载)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>用javascript动态添加删除html元素</title> <script type="text/jav

JavaScript 评论添加练习

JavaScript 评论添加练习 本次所学内容: //var str = '<li>'+value+'</li>'; 支付串和变量的拼接 //ul.innerHTML += str; 使用+=就相等于一个追加的功能 如果是字符串的数据想要转换成JSON数据 就可是使用JSON.parse()方法将这个转换成JSON数据.  parse里面存放的是要转化的数据类型 <!DOCTYPE html> <html lang="en"> <