jquery使用笔记

一、$.extend()与$.fn.extend()区别及实现

区别：

• $.extend是扩展常规方法，是$的静态方法，相当于为Jquery全局对象添加了一个静态方法
• $.fn.extend是为查询的节点对象扩展方法，是基于$的原型扩展的方法。

实现：

(function($){
    $.fn.extend({          
        alertWhileClick:function() {            
            $(this).click(function(){                 
                 alert($(this).val());           
            });           
        }       
    });        
})(jQuery);
//jsp页面使用
$("#input").alertWhileClick();

 

$.extend({
    min: function(a, b) {
        return a < b ? a : b;
    },
    max: function(a, b) {
        return a > b ? a : b;
    }
});
$.min(2, 3); 
$.max(4, 5);

$.extend(target,item1,item2):将item1和item2所有参数项合并到target中；

$.extend(true,object1,object2):将object2合并到object1中； 

二、from表单序列化json格式

(function($){
	$.fn.extend({
        serializeObject:function(){    
		    var o = {};    
		    var a = this.serializeArray();    
		    $.each(a, function() {    
		        if (o[this.name]) {    
		            if (!o[this.name].push) {    
		                o[this.name] = [o[this.name]];    
		            }    
		            o[this.name].push(this.value || '');    
		        } else {    
		            o[this.name] = this.value || '';    
		        }    
		    });    
		    return o;    
		}
    });
})(jQuery);

function serializeObject(form){
    var o = {};
    var a = $(form).serializeArray();
    $.each(a, function() {
        if (o[this.name]) {
            if (!o[this.name].push) {
                o[this.name] = [o[this.name]];
            }
            o[this.name].push(this.value || '');
        } else {
            o[this.name] = this.value || '';
        }
     });
     return o;
 };

三、jquery常用请求方式

1、$.ajax

$.ajax({
    type: "post",
	url: "${webRoot}/appraisa/deleteAppraisaInfo.do",
	data: {"s_recNos":id},
	dataType:"json",
	success: function(msg){
	    var obj1=$("#${param.rel==null?'data':param.rel}_datagrid_appraisa").datagrid('getData');
		var length = obj1.rows.length;
		for(var i=0;i<length;i++){
			var delobj = obj1.rows[i];
			if(delobj!=null&&(delobj.s_id == id)){
				obj1.rows.splice(i,1);
				obj1.total=obj1.total-1;
			}
		}
		$('#<%=request.getParameter("rel")==null?"data":request.getParameter("rel")%>_datagrid_appraisa').datagrid({
						data: obj1
					});
					$('#<%=request.getParameter("rel")==null?"data":request.getParameter("rel")%>_datagrid_appraisa').datagrid('reload');       
				},
    error:function(e){
	    console.log(e.responseText);
	}
});

2、远程http post请求载入信息:$(selector).post(URL,data,function(data,status,xhr),dataType)

四、输入框只允许输入数字并限制小数位

<input type="text" onkeyup="this.value=(this.value.match(/\d+(\.\d{0,2})?/)||[''])[0]"/>

五、文件上传插件jquery.from.js

<script type="text/javascript" src="${webRoot}/resource/js/jquery/jquery.from.js"></script> 
<script type="text/javascript">
function subouInfoForm(form){
 	//首先验证文件格式
  	var fileName = $('#file_input').val();
  	console.log(fileName);
  	$('#pathName').val(fileName);
    if (fileName === '') {
    	Msg.alert('提示',$(this).attr("warn") ||'请选择文件。','warning');
       	return false;
    }
    var fileType = (fileName.substring(fileName.lastIndexOf(".") + 1, fileName.length)).toLowerCase();
    if (fileType !== 'xls' && fileType !== 'xlsx') {
    	Msg.alert('提示',$(this).attr("warn") ||'文件格式不正确,请选择excel文件。','warning');
        return false;
    }
    //var form = new FormData(document.getElementById("importdisin"));
    //var form = document.getElementById("importdisin");
  $("#importdisin").ajaxSubmit({
        url:"${webRoot}/dataexcel/getDatabyno.do",
        type:"post",
        //data:form,
        dataType:"json",
        processData:false,
        contentType:false,
        cache: false,  
        success:function(result){
        	//json的rows等
			var obj1=$("#${param.rel}_basicd_datagrid").datagrid('getData');
			obj1.total=obj1.total+result.total;
			obj1.rows=obj1.rows.concat(result.rows);
			var oldValue = $("input[name=collDataNos]").val();
			var recNos = "";
			for(var i=0;i<result.total;i++){
				recNos += result.rows[i].s_recNo.trim()+","
			}
			if(recNos.charAt(recNos.length-1)==","){
				recNos = recNos.substr(0,recNos.length-1);
			}
			if(oldValue==""||oldValue==null){
				oldValue = recNos;
			}else{
				//去掉字符串空格重新拼接
				var nos = oldValue.split(",");
				var vals = "";
				for(var j=0;j<nos.length;j++){
					vals+=nos[j].trim()+",";
				}
				if(vals.charAt(vals.length-1)==","){
					vals = vals.substr(0,vals.length-1);
				}
				oldValue = vals;
				oldValue = oldValue+","+recNos;
			}
			console.log(oldValue);
			$("input[name=collDataNos]").val(oldValue);
            $('#<%=request.getParameter("rel")%>_basicd_datagrid').datagrid({
							data: obj1
			});
			$('#<%=request.getParameter("rel")%>_basicd_datagrid').datagrid('reload');  
			closedia('${param.rel}_addoutinfo');	
        },
        beforeSend:function(XMLHttpRequest){
			$.messager.progress({
				text : '数据加载中，请稍等...'
			}); 
		},complete:function(XMLHttpRequest, textStatus){
			$.messager.progress('close');
		}
    });
}
</script>

六、界面弹子窗口（iframe中也行）

function openRoomEvn(recNo,equipNo,roomName){
	var html = "<div></div>";
	var win = window.top.$(html).appendTo(window.top.document.body);  
	win.window({  
		title: roomName, 
		width:860,  
		height:410,  
		modal: true,
		collapsible:false,
		//maximized: false,
		maximizable:false, 
		minimizable:true, 
		onClose: function(){
			win.window('destroy');//关闭即销毁
		}  
	});
    //需加载页面
	win.window('refresh',"/storeroom/toHistoryTrend.do?roomNameNo="+recNo+"&equipNo="+equipNo);
}