前端笔记
标签(空格分隔): javascript jquery easyui html html5
一些新手web0开发者会在写JS 中这样写,
if(a == 0){
console.log("进来了");
}
一般会认为不会进入,实际JS 在运行时,当a 等于空的字符串时 JS会判断其与0是相等的
所以 判断是否等于0时,可以这样判断 用String(a) == 0 这样包裹一下或者 a+""==0 这样也是可以的
在写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'));
};
-
背景
最近在工作中,需要实现网页端图片上传到FTP服务器的功能。上传文件是用Form表单提交数据的方法向后台传输文件流,在此遇到了一个问题:后台在处理完图片上传功能后,需要向前台回传是否上传成功的状态码、上传失败的错误信息和上传成功后的图片URL。但是,用普通Form表单提交的话,没有办法实现回调函数。后来在小伙伴的介绍下,发现可以用ajaxSubmit()方法来实现此功能。
-
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属性来返回相应格式的内容。
-
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');
重点:一定要使用绝对位置
遇到的问题是 :有一个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> </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> <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;"> 企业用户注册请点此进入:<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()
这个问题的原因很简单 是因为你的提交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位数字和字母组合,可为纯数字或纯字母!'
}
});
给表单设定预定值
$('#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() ;