IT博客汇
  • 首页
  • 精华
  • 技术
  • 设计
  • 资讯
  • 扯淡
  • 权利声明
  • 登录 注册

    [原]js(或jQuery)实用代码段

    fansy1990发表于 2014-08-06 13:12:52
    love 0

    权作记录

    0)引入:

    1)根据id获得组件:

    // 已知,获得此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事件:

    // 已知
    // 定义click事件如下:
    $(function(){
     		
     		$('#btn').click(function(){
     			// do some thing
     			
     		});
     		
     	});
    5)在用户输入输入框数据后,检查数据:

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

    首先定义html组件:

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

    $('#div_info').show();
    7)根据行数和列数以及表创建动态表格:

    在html中定义表组件:

    在js中定义创建方法:

    	function createTable(tabId,col,row){
    // 		var tab =$('#'+tabId);
    	 	var tab=tabId;
    		for(var i=0;i');
     			for(var j=0;j');
     				$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





沪ICP备19023445号-2号
友情链接