前端笔记

前端笔记

标签(空格分隔): javascript jquery easyui html html5


javascript中""==0为true

一些新手web0开发者会在写JS 中这样写,

if(a == 0){
    console.log("进来了");
}

一般会认为不会进入,实际JS 在运行时,当a 等于空的字符串时 JS会判断其与0是相等的
所以 判断是否等于0时,可以这样判断 用String(a) == 0 这样包裹一下或者 a+""==0 这样也是可以的


JavaScript中实现键值对的方法

在写js的时候,碰到需要使用类似hashmap的情况。

1、有一种比较简单的实现办法,但是使用起来局限性比较大。

var obj1={"a":1,"b":2};

alert(obj1["a"]);

这是一种功能非常简单的键值对,只能够小范围的定义和取值。


正则

    //数字
    return /^[0-9]+.?[0-9]*$/.test(value);

frame自适应高度




function setIframeHeight(iframe) {
	if (iframe) {
	var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow;
	if (iframeWin.document.body) {
	iframe.height = iframeWin.document.documentElement.scrollHeight || iframeWin.document.body.scrollHeight;
	}
	}
	};

	window.onload = function () {
	setIframeHeight(document.getElementById('external-frame'));
	};

利用ajaxSubmit()方法实现Form提交表单后回调

  1.  背景
    

最近在工作中,需要实现网页端图片上传到FTP服务器的功能。上传文件是用Form表单提交数据的方法向后台传输文件流,在此遇到了一个问题:后台在处理完图片上传功能后,需要向前台回传是否上传成功的状态码、上传失败的错误信息和上传成功后的图片URL。但是,用普通Form表单提交的话,没有办法实现回调函数。后来在小伙伴的介绍下,发现可以用ajaxSubmit()方法来实现此功能。

  1.  ajaxSubmit()方法简介
    

(1)ajaxSubmit()依赖

ajaxSubmit()方法是JQuery Form表单插件中的方法,要想使用该插件,可以直接去官网http://jquery.malsup.com/form/下载。使用时,需要在jsp或者html页面上,引入JQuery库和Form插件。

(2)ajaxSubmit()用法简介

ajaxSubmit()方法接受0个或者1个参数,当为单个参数时,该参数既可以是一个回调函数,也可以是一个options对象。回调函数比较简单,下面主要介绍一下options的用法。options对象可以设置的参数如下:

var options = {
		target: ‘#output1’, 		//把服务器返回的内容放入id为output1的元素中
		beforeSubmit: showRequest,		//提交前的回调函数
		success: showResponse,			//提交后的回调函数
		url: url,			//默认是form的action,如果声明,则会覆盖
		type: type,		//默认是form的method,如果声明,则会覆盖
		dataType: json	,	//接受服务端返回的类型
		clearForm: true,	//成功提交后,清除所有表单元素的值
		resetForm: true,	//成功提交后,重置所有表单元素的值
		timeout: 3000		//限制请求的时间,当请求大于3秒后,跳出请求
};

这些参数里,比较常用的就是提交前的回调函数beforeSubmit和提交后的回调函数success。beforeSubmit主要是用来提交表单前,校验数据的。示例代码:

function validate(formData, jqForm, options) {
		/*
		在这里需要对表单元素进行验证,如果不符合规则,
		直接返回false来阻止表单提交。
		*/
		var queryString = $.param(formData);		//组装数据
		return true;
}


这个回调函数有三个参数,formData是数组对象,jqForm是一个JQuery对象,它封装了表单的元素,options参数就是options对象。在这个回调函数中,只要不返回false,表单都将被允许提交;如果返回false,则会阻止表单提交。

success是提交后的回调函数,有4个参数responseText,statusText,xhr,和$form。其中,比较常用的是前两个。statusText只是一个返回状态,例如success,error等。responseText携带着服务器返回的数据内容,它会根据设置的options对象中的dataType属性来返回相应格式的内容。

  1.  ajaxSubmit()方法代码示例
    

下面是ajaxSubmit()方法使用的一个模板。

$(function(){	
		var options = { 
			type: 'POST',
			url: '提交路径',
	        success:showResponse,  
	        dataType: 'json',
			error : function(xhr, status, err) {			
				alert("操作失败");
			}
	    }; 
	    $("##Form名称").submit(function(){ 
	        $(this).ajaxSubmit(options); 
	        return false;   //防止表单自动提交
	    });
});
 
/**
 * 保存操作
 */
function toSave(){ 
	$("#Form名称").submit();
}
 
/**
 * 保存后,执行回调
 * @param responseText
 * @param statusText
 * @param xhr
 * @param $form
 */
function showResponse(responseText, statusText, xhr, $form){ 	
	if(responseText.status == "0"){
		/**
		* 请求成功后的操作
		*/
		alert(responseText.msg);
	} else {
		alert(responseText.msg);
	}	
}



正则表达式


jquery的几种异步

$.post(url, { name: "John", time: "2pm" },function(data){ 
    alert("Data Loaded: " + data); 
},'text');


javascript生成二维码


IE8 对background-size的兼容问题

解决2:IE8下兼容background-size方法

重点:一定要使用绝对位置
遇到的问题是 :有一个div ,div用绿色框体现。然后通过js控制框的大小,实现动态的改变div的大小。 (放大缩小窗口,div跟随变大变小。)

设置了div的css属性 background-image:url(http://i1.piimg.com/1949/c777d079f3fb68ec.png); background-size:cover;

通过浏览器使用发现,div框会变,但是ie8(只用了chrome,ie8,chrome没问题。)图片不会根据框进行缩放。 百度查询后发现是ie8不支持background-size:cover;要加上滤镜(原理还不知)。

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://i1.piimg.com/1949/c777d079f3fb68ec.png',sizingMethod='scale');
其中src,url ,需要绝对路径。我使用本地的路径都是提示找不到。可能是浏览器安全原因。网址就没问题了。 百度下,上传图片,然后获得一个连接,再在项目中使用即可。
还是要想想如何使用本地路径 chrome ,ie 都可以访问。

var explorer;//获取浏览器的类型
$(function(){
	//获取判断浏览器
	explorer =navigator.userAgent ;
	
	var width =  window.screen.width;  
	var height = document.body.clientHeight;
	
	$("#backgroundImg").css("height",height+height*0.020);
	$("#backgroundImg").css("width",width);	
	var formTop = $("#backgroundImg").offset().top;
	$("#backgroundImg").css("margin-top","-"+formTop+"px");
	if(explorer.indexOf("Firefox")!=-1){//火狐: ;
		// $("#backgroundImg").css("height","128.4%");
	}
	if(explorer.indexOf("compatible") > -1 && explorer.indexOf("MSIE 8.0") > -1){//IE8
		$("#backgroundImg").css("height",height);
		$("#backgroundImg").css("width",width);	
		$("#backgroundImg").css("margin-top","-"+formTop+"px");

		$("#userLoginLable").attr("align","left");
		$("#userLoginLableDIV").addClass("userLoginLable");
		$("#userNameLable td").attr("align","left");
		$("#userPasswordLable td").attr("align","left");	
	}else{
		$("#userLoginLableDIV").css("margin-left","-64%");
	}
})


针对ie8写css

<%@ page contentType="text/html;charset=GBK" pageEncoding="GBK"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:if test="${!empty param.remoteLogin}">
<form action="login" method="post">
	<input type="hidden" name="username" value="${param.username}">
	<input type="hidden" name="password" value="${param.password}">
	<input type="hidden" name="lt" value="${loginTicket}">
	<input type="hidden" name="execution" value="${flowExecutionKey}">
	<input type="hidden" name="_eventId" value="submit">
	<input type="hidden" name="service" value="${param.service}">
</form>
<script>
	document.forms[0].submit();
</script>
</c:if>


<c:if test="${empty param.remoteLogin}">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<!--[if IE 8 ]> <html class="ie8"> <![endif]-->
<HTML>
<HEAD>
<TITLE>博罗县智慧农业综合示范基地管理平台</TITLE>
<SCRIPT language=JavaScript src="js/jquery-1.6.min.js"></SCRIPT>
<style>
.userData {
	behavior: url(#default#userdata);
}
body {

	
    
	/* filter: progid:DXImageTransform.Microsoft.AlphaImageLoader( src='${ctx}/cas/images/sys_pic.png', sizingMethod='scale');
	-ms-filter: progid:DXImageTransform.Microsoft.AlphaImageLoader( src='${ctx}/cas/images/sys_pic.png', sizingMethod='scale');
 */
	
	/* background: url(${ctx}/cas/images/sys_pic.png) cover ;
	background-size: 100% 100%;
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='${ctx}/cas/images/sys_pic.png',sizingMethod='scale');
	z-index:-1; */
	
	margin: 0px;
	padding: 0px;
	margin-top: 170px;
	
}
.login-button {
    cursor: pointer;
	width: 250px;
	text-align: center;
	height: 40px;
	line-height: 40px;
	background-color: dodgerblue;
	border-radius: 5px;
	margin: 0 auto;
	margin-top: 30px;
	margin-left: 7%;
	color: white;
	}
}

.ie8 .login-button {
    cursor: pointer;
	width: 250px;
	text-align: center;
	height: 40px;
	line-height: 40px;
	background-color: dodgerblue;
	border-radius: 5px;
	margin: 0 auto;
	margin-top: 30px;
	margin-left: 30%;
	color: white;
	}
}

.login-center-img{
	    width: 20%;
}

.userLoginLable{
	cursor: pointer;
	width: 250px;
	text-align: center;
	height: 40px;
	line-height: 40px;
	border-radius: 5px;
	margin: 0 auto;
	margin-left: 50%;
	color: white;
}
.ie8 td{
	word-break:break-all;word-wrap:break-word;
}
.userNameInput{
	cursor: pointer;
	height: 40px;
	border-radius: 5px;
}
.login-center-input{float: left;width: 230px;margin-left: 15px;height: 30px;position: relative;}
.ie8 .login-center-input{float: left;width: 230px;margin-left: -180%;height: 30px;position: relative;}
.login-center-input input{z-index: 2;transition: all 0.5s;padding-left: 10px;color: #333333;width: 100%;height: 30px;border: 0;border-bottom: 1px solid #cccccc;border-top: 1px solid #ffffff;border-left: 1px solid #ffffff;border-right: 1px solid #ffffff;box-sizing: border-box;outline: none;position: relative;}
.login-center-input input:focus{border: 1px solid dodgerblue;}
.login-center-input-text{background: white;padding: 0 5px;position: absolute;z-index: 0;opacity: 0;height: 20px;top: 50%;margin-top: -10px;font-size: 14px;left: 5px;color: dodgerblue;line-height: 20px;transition: all 0.5s;-moz-transition: all 0.5s;	/* Firefox 4 */-webkit-transition: all 0.5s;	/* Safari 和 Chrome */-o-transition: all 0.5s;	/* Opera */}
.login-center-input input:focus~.login-center-input-text{top: 0;z-index: 3;opacity: 1;margin-top: -15px;}

</style>
<META content="text/html; charset=gb2312" http-equiv=Content-Type>
<LINK rel=stylesheet type=text/css href="css/system.css">
</HEAD>

<BODY>
	<img id="backgroundImg" src="${ctx}/cas/images/sys_pic.png" style=""/>
	<div id="formFm1" style="position: relative;margin-top: -39%;">
	<form:form method="post" id="fm1" cssClass="fm-v clearfix" action="/cas/login" commandName="${commandName}" htmlEscape="true">
		<input type="hidden" name="lt" value="${loginTicket}" />
		<input type="hidden" name="execution" value="${flowExecutionKey}" />
		<input type="hidden" name="_eventId" value="submit" />
		<TABLE id=login border=0 cellSpacing=0 cellPadding=0 width=1003 align=center height=260>
			<TBODY>
				
				<TR>
					<TD vAlign=top>
						<TABLE border=0 cellSpacing=0 cellPadding=0 width="87%"
							align=right  style="margin-top: 10%;">
							<TBODY>
								<TR>
									<TD height=60 colSpan=2>&nbsp;</TD>
								</TR>
								<TR vAlign=center>
									<TD>
										<TABLE border=0 cellSpacing=2 cellPadding=2 width="60%">
											<TBODY>
												<TR align=middle id="userLoginLable">
													<TD colspan="2"><div id="userLoginLableDIV" style="margin-left: -14%;"><font color="#1e90ff" size="5">用户登录</font></div></TD>
												</TR>
												<TR align=middle>
													<TD colSpan=2 noWrap ></TD>
												</TR>
												<TR id="userNameLable">
													<TD width="14%" align=right>
													<div class="login-center-img userNameInput" >
														<img src="images/name.png" style="width: 42%;"/>
													</div>
													</TD>
													<TD>
													<div class="login-center-input userNameInput" >
														<input id="username" name="username" placeholder="请输入您的用户名" value="" style="border: 1px solid #007092; background: #ecfafa;width:125px">
													</div>
													</TD>
												</TR>
												<TR id="userPasswordLable">
													<TD width="14%" align=right>
													<div class="login-center-img">
													<img src="images/password.png" style="width: 42%;"/>
													</div>
													</TD>
													<TD>
													<div class="login-center-input" >
													<INPUT type=password  id="password" placeholder="请输入您的密码" name="password" value="" style="border: 1px solid #007092; background: #ecfafa;width:125px">
													</div>
													</TD>
												</TR>
												<TR>
													
													<TD noWrap align=left colspan="2">
														<div class="login-button" onclick="userLogin()">
															登录
														</div>
														 
													</TD>
												</TR>
												<TR>
													<!--<TD id=tt colSpan=2 noWrap></TD>-->
												</TR>
												<TR>
													<TD height=60 colSpan=2>&nbsp;&nbsp;&nbsp;&nbsp;<FONT
														color=red></FONT>
													</TD>
												</TR>
												<tr>
													<td colspan="2"> 
													</td>
												</tr>
											</TBODY>
										</TABLE>
									</TD>
								</TR>
							</TBODY>
						</TABLE>
					</TD>
				</TR>
				<TR><TD>
					<!--<p style="font-weight:bold;font-size:15px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;企业用户注册请点此进入:<a href="http://localhost:8080/zhnc/regist.action"" target="_Blank" style="color:red">企业注册地址</a></p> -->
				</TD></TR>
			</TBODY>
		</TABLE>
	</form:form>
	</div>
	<div id="userList" style="position: absolute;background:#ffffff;border:1px solid #7B7B7B;font-size:12px;display:none;">
	</div>

</BODY>
</HTML>
</c:if>



针对FireFox,Chrome,Opera的CSS Hack

针对火狐浏览器的CSS Hack:

@-moz-document url-prefix() {    .selector {        attribute: value;    }}

针对webkit内核及Opera浏览器的CSS Hack:

@media all and (min-width:0){    .selector {        attribute: value;/*for webkit and opera*/    }}

从这个样式我们只能把webkit内核的浏览器和Opera浏览器从其它浏览器中区分出来,但并不能区分它们俩,因此我们还需要在上面样式的基础上再加一个样式:

@media screen and (-webkit-min-device-pixel-ratio:0) {    .selector {        attribute: valueForWebKit;/*only for webkit*/    }}

由于这个样式是针对webkit的,会把前面的样式覆盖掉,因此,通过这两个样式就能区分出webkit和opera了,opera的属性值取value,webkit的属性值取valueForWebKit。

其实按常规来说,我们一般是处理ie上的兼容问题,但遇到需要处理火狐或Chrome的兼容问题时,一定要先查看网页结构是否合理以及便签使用是否规范,直到迫不得已时再使用上面的CSS Hack。


转义

html += "<input type='checkbox' value='"+value.id+"' name='produce_sow_area_id_"+value.type+"' "+checkedHtml+"  />"+
						"<a href='javascript:areaGreenDetail(\""+value.id+"\",\""+value.type+"\")' >"+value.name_+"</a>"+
						"<input type='' name='choseDetails_"+value.id+"' class='texts' value='0'  />";


easyui中select禁用的设置

$('#isExpressmodeIn').combobox('disable');
$('#isExpressmodeIn').combobox('enable');

a标签触发方法

    href=javascript:refreshCaptcha()

ajax或者jQuery的ajaxSubmit出现请求根本没有发出的问题

这个问题的原因很简单 是因为你的提交button放在了form表单的里面导致的【注: 如果是button 则必须放在form表单的外面 因为form表单的子元素是input 如果是input type是submit 的话 则可以放在form表单里 因为它本身就是form表单的子元素】

注意:是表单进行ajaxSubmit,不是按钮

/**
	 *登录操作
	 */
	function toSave(){
		var options = { 
			url: ctx + 'personAction/personLogin',
			type: 'POST',
	        success: loginResponse,  
	        dataType: 'json',
	        timeout: 3000
	    }; 
    	$("#login-form").ajaxSubmit(options); 
        return false;
		
	}


easyui消息验证盒子格式

<form id="ff" method="post">
			<div>
				<label for="name">Name:</label>
				<input class="easyui-validatebox" type="text" name="name" required="true"></input>
			</div>
			<div>
				<label for="email">Email:</label>
				<input class="easyui-validatebox" type="text" name="email" required="true" validType="email"></input>
			</div>
			<div>
				<label for="subject">Subject:</label>
				<input class="easyui-validatebox" type="text" name="subject" required="true"></input>
			</div>
			<div>
				<label for="message">Message:</label>
				<textarea name="message" style="height:60px;"></textarea>
			</div>
			<div>
				<input type="submit" value="Submit">
			</div>
		</form>


自定义盒子验证:

//自定义easyui验证消息盒子
$.extend($.fn.validatebox.defaults.rules, {
    minLength: {
		validator: function(value, param){
			return value.length >= param[0];
		},
		message: 'Please enter at least {0} characters.'
    },
    pwdValidate: {//密码验证
		validator: function(value, param){
			var patrn = /^[0-9a-zA-Z]{6,16}$/;
			return patrn.test(value);
		},
		message: '密码必须为6-16位数字和字母组合,可为纯数字或纯字母!'
    }
});

easyui验证的文档

给表单设定预定值

$('#person_Form').form('load', {status: 1});//给表单设定预定值

移除密码样式

$("#password").validatebox('disableValidation');//移除密码样式	

进行验证

$("#password").validatebox('isValid');//进行验证

FireFox和Chrome下验证码不刷新的解决方法

原因:FireFox和Chrome的缓存机制与IE不一样,相同的页面或者图片不会重复刷新

解决方法:在后面加参数如 new Date.getTime() 或者 Math.random()
如:src="captha.html?t=" + new Date.getTime();

document.getElementById('captcha_img').src = ctx + 'kaptcha.jpg?t='+ new Date() ;

评论

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×