js(或jQuery)实用代码段

权作记录
0）引入：

<script type="text/javascript" src="scripts/jquery.min.js"></script>

1）根据id获得组件：

// 已知<input Id="input_a" />,获得此input的脚本为：
$('#input_a')

2）根据id获得组件的值：

var value_a=$('#input_a').val();

3）根据id对组件进行赋值：

$('#input_a').val("value_a");

document.getElementById("input_a").innerText="value_a";

4）定义click事件：

// 已知<input type="button" id="btn" />
// 定义click事件如下：
$(function(){
 		
 		$('#btn').click(function(){
 			// do some thing
 			
 		});
 		
 	});

5）在用户输入输入框数据后，检查数据：

$(function(){
 	 	
 	 	/**
 	 	* 在输入数据后进行检查或做其他操作
 	 	*/
 	 	$("#input_a").blur(function(){
 	 		// do some thing
 	 	
 	 	});
 	 	
 	 });

6）显示和隐藏div
首先定义html组件：

<div id="div_info" style="display:none"></div>

当用户触发了需要显示div_info组件的请求时，使用下面的代码显示div组件：

$('#div_info').show();

7）根据行数和列数以及表创建动态表格：
在html中定义表组件：

<table id="tab_dynamic"></table>

在js中定义创建方法：

function createTable(tabId,col,row){
// 		var tab =$('#'+tabId);
	 	var tab=tabId;
		for(var i=0;i<row;i++){
 			var $row = $('<tr></tr>');
 			for(var j=0;j<col;j++){
 				var $col = $('<td><input/></td>');
 				$col.appendTo($row);
 			}
 			$row.appendTo(tab);
 		}
 		
 	}

其调用方法为：

// 动态创建一个4*3的表格
createTable($('#tab_dynamic',3,4));

注： 此动态表格的创建可以借鉴，其他动态组件的创建也可以使用此种方法；
8）检查是否可以字符串转为数字：

function canStringtoInt( str){
 		var num = parseInt(str);
	 	if(isNaN(num)){
	 		alert("输入必须是一个数字!");
	 		return false;
	 	}
	 	return num;
 	}

9）ajax异步提交：

$.ajax({
 				url:'./userAction',
 				data:{args1:"args1"},
 				dataType:'json',
 				success:function(r){
					
 					// do some thing
 				}
 			});

后台的action或者controller，使用下面的方式发送数据：

PrintWriter out=null;
		out = response.getWriter();
//		
		out.println(info);
		out.flush();
		out.close(); return null;// return null 是必须的

10)遍历table的所有值：

/**
 	* 获得每个Table的值
 	* 每个table里面的行使用分号分隔，每行中的元素使用逗号分隔
 	*/
 	function getTableArray(tab){
 		var dataArr="";
 		$("tr",tab).each(function(){
 			var row =$(this);
 			$("td",row).each(function(){
 				dataArr=dataArr+$(this).find('input').val().trim()+",";
 			});
			dataArr=dataArr.substring(0, dataArr.length-1)+";"; 			
 		});
 		
 		return dataArr.substring(0, dataArr.length-1);
 	}

11）遍历div下面的所有table的值：

$("table",$('#div_sub')).each(function(){ // 把table换为其他组件，同样可以遍历
 			var $tab =$(this);
 			dataAllInputs+=getTableArrayFirst($tab);
 			dataAllInputs+=";";
 		});

12）父级、同级、下级（摘自http://zzstudy.offcn.com/archives/12921）：

jQuery.parent(expr) 找父亲节点，可以传入expr进行过滤，比如$(“span”).parent()或者$(“span”).parent(“.class”)

jQuery.parent(expr),类似于jQuery.parents(expr),但是是查找所有祖先元素，不限于父元素

jQuery.children(expr).返回所有子节点，这个方法只会返回直接的孩子节点，不会返回所有的子孙节点

jQuery.contents(),返回下面的所有内容，包括节点和文本。这个方法和children()的区别就在于，包括空白文本，也会被作为一个

jQuery对象返回，children()则只会返回节点

jQuery.prev()，返回上一个兄弟节点，不是所有的兄弟节点

jQuery.prevAll()，返回所有之前的兄弟节点

jQuery.next(),返回下一个兄弟节点，不是所有的兄弟节点

jQuery.nextAll()，返回所有之后的兄弟节点

jQuery.siblings(),返回兄弟姐妹节点，不分前后

jQuery.find(expr),跟jQuery.filter(expr)完全不一样。jQuery.filter()是从初始的jQuery对象集合中筛选出一部分，而jQuery.find()的返回结果，不会有初始集合中的内容，比如$(“p”),find(“span”),是从元素开始找,等同于$(“p span”)

13) easyui window 设置title

$('#win').window('setTitle','new title');

14) juqery input 可用与否

$('#inputId').attr('disabled',false);
$('#inputId').attr('disabled',true);

14) jquery 获取checkbox状态

$('#checkboxId').click(function() {
	    
	    if(this.checked){
	    	console.info("checked");
	    }else{
	    	console.info("not checked");
	    }
	    console.info("filter:"+filter);
	});

分享，成长，快乐
转载请注明blog地址：http://blog.csdn.net/fansy1990