举个栗子
【不得不引起重视的前端技术】
*后台必须懂前端，这样开发速度就会快些，项目开发中刚开始写后台代码速度很快，但到了前端的时候就会减慢速度，原因是页面太多太杂，稍不留神就会把页面搞乱。
*前端：不必理解原理，只需要学会怎么用达到我想要的效果。
【页面代码分析思路】
*首先根据对应的链接找到对应的页面
*两个部分，html和js在html中找到按钮，在js中找到对应的函数方法。
*主要是通过dom或者jquery操作js里面的代码。js请求一个路径传给后台，异步同步的都有，之后后台操作，响应回结果。通过dom或者jquery影响着页面的样式和数据，完成和用户的交互。
*html代码部分主要用于取值和进行一定的渲染。通常都是用el表达式和其他标签库的标签进行赋值，还有就是一些写入时的提示，推荐用onblur函数提升用户体验，一次性输入正确就好。js主要用户逻辑的判断和取值，异步请求需要返回结果，然后通过页面进行渲染。
*不要被class div body id span tbody style 等一些不重要的标签吸引，看重点。
【页面】
从后台返回json到页面展示 越小越好，这样能显著提高页面打开速度，提升客户体验。
页面调试中值得注意的是如果有一点点代码执行不了，那么它下面的代码就无法执行，需要逐行调试。
页面才是java才发的重中之重，页面通过链接和后台取得联系，后台根据前台的参数进行处理，从数据库中查到需要的资源，返回给页面。页面再对数据进行处理，遍历出数据或者显示出数据。
开发中完成一个小功能最好进行测试，这样虽然看上去费时间，但是这为你以后调试节省了很多时间，还有就是边写代码边写注释，这样能保证思维清晰。
【光标定位】
比如要定位的文本框为，那么可以在页面加载完成之后，加上如下代码：
$('#input').focus(); 这样光标就停在文本框内了。
【点击输入框选中里面的数据】onfocus="this.select()"
【动态增加删除一行表格行案例】
var i=10;
function plus(){ //动态增加一行
var plus=Number(i+1);
"+plus+"
center;\">
class=\"icon-plus-sign\">
class=\"icon-remove-sign\"
onclick=\"delTr('tr"+plus+"')\">";
id=\'name"+plus.toString()+"' name=\'name\'
onclick=\'com("+plus.toString()+")\'
style=\'width:200px;\'/>";
style=\"width:120px;text-align:center;\" readonly />";
id=\'area"+plus.toString()+"' name=\'area\' style=\'width:120px;\'
onclick=\'searchPlace("+plus.toString()+")'\ />";
onfocus=\'this.select()\' name=\'itemNum\'
style=\'width:120px;text-align:right;\'
onblur=\'formatNum(this)\'/>";
name=\'buyPrice\' style=\'width:120px;text-align:right;\'
onblur=\'formatNum(this)\'/>";
name=\'plusrate\' style=\'width:120px;text-align:right;\'
/>";
name=\'salePrice\' style=\'width:120px;text-align:right;\'
onblur=\'formatNum(this)\'/>";
name=\'fph\' style=\'width:120px;\' />";
id=\'bat"+plus.toString()+"'\" name=\'batchNum\' style=\'width:120px;\'
readonly />";
style=\'width:120px;text-align:center;text-indent:0;\' class=\'Wdate\'
type=\'text\' onKeyUp=\'WdatePicker()\'
onclick=\'WdatePicker()\'/>";
tr+="";
$("#tbody").append(tr);
i++;//记得在这里i的值已经变了
}
function delTr(id){ //动态删除一行
$("#"+id).parent().remove();
}
【校验一个表单中的多行数据是否为空】
*获取当前行，第一列数据必须有，
*如果第一列没有数据，不判断其他字段是否为空
*如果第一列有数据，判断是否为空。如果为空就返回让用户检查,否则就提交。
$("#myTable02tr").each(function(){ //非空检验方法
if(i==1&&$(this).find("input[name='name']").val()==''){
alert("第"+i+"行物品名称不能为空！");
flag=2;
return false;
}
if($(this).find("input[name='name']").val()==''&&$(this).find("input[name='unit']").val()==''
&&$(this).find("input[name='norms']").val()==''&&$(this).find("input[name='area']").val()==''
&&$(this).find("input[name='itemNum']").val()==''&&$(this).find("input[name='buyPrice']").val()==''
&&$(this).find("input[name='plusrate']").val()==''&&$(this).find("input[name='salePrice']").val()==''
&&$(this).find("input[name='effDate']").val()==''){
}else if($(this).find("input[name='name']").val()!=''&&$(this).find("input[name='unit']").val()!=''
&&$(this).find("input[name='norms']").val()!=''&&$(this).find("input[name='area']").val()!=''
&&$(this).find("input[name='itemNum']").val()!=''&&$(this).find("input[name='buyPrice']").val()!=''
&&$(this).find("input[name='plusrate']").val()!=''&&$(this).find("input[name='salePrice']").val()!=''
&&$(this).find("input[name='effDate']").val()!=''){
}else{
alert("第"+i+"行不能为空！");
flag=2;
return false;
}
i++;
});
if(flag=='1'){
$("#form").removeAttr('action');
$("#form").attr('action','${path}/store/storeAction_saveTemp.action');
$("#form").submit();
alert("恭喜，提交保存成功！");
return;
}
})
【EL表达式的格式化问题（保留两位小数）】
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
【jquery发送异步请求的方式】
$.ajax({
type:"post",
dataType:"html/json",
url:'路径',
data: dataurl,
success: function (data) {
//返回函数操作
}
}
});
$.post("路径", {"参数1": 参数值1,"参数2": 参数值2}, function (data) {
//返回函数操作
}
})；
$("#form-id").ajaxSubmit({
dataType:"json",
data:{
'rid': rid
},
success:function (data) {
//返回函数操作
}
});
【拼音码动态检索技术案例】
function searchKsRecord(reserNo){
$('#pager').sjAjaxPager({
url:"路径,
pageSize: 10,
pageIndex: 1,
searchParam:{
},
beforeSend:function(){},
success:function(msg){
$("#tab2").empty();
var s="";
$.each(eval(msg.a),function(n,value){
var c=n+1;
//请求后把结果遍历出来 拼接成表格
"+value.name+""
"
style='text-align:right;'>"
style='text-align:right;'>"
";
if(value.fph==null){
s+="";
}else{
s+=value.fph;
}
";
if(value.batchNum==null){
s+="";
}else{
s+=value.batchNum;
}
"+value.effDate+"
});
$("#tab2").append(s);
},
complete: function(){}
});
}
【操作多个复选框】
function ysjw(){ //点击以上均无 清空其他选项
if($("#ys").prop("checked")){ //判断id为“ys”的复选框是否被选中了
var duo=document.getElementsByName("bingStyle.dieaseHistory");
for (var i = 0; i < duo.length-1; i++) {
duo[i].checked=false;
duo[i].setAttribute("disabled","disabled");
}
}else{
var duo=document.getElementsByName("bingStyle.dieaseHistory");
for (var i = 0; i < duo.length-1; i++) {
duo[i].checked=false;
duo[i].removeAttribute("disabled");
}
}
}
【操作checkbox和radio常用方法】
*jquery根据后台传来的值让radio选中
var sex = result.resultContent.gender;
$(":radio[name='rbsex'][value='" + sex + "']").prop("checked", "checked");
意思是让name等于rbsex，value等于sex 的radio值选中
*jquery 让radio不能选中：$("#male")[0].checked = false;
参考： 设置 radio 不可用可以用 attr() 方法，即attr("disabled", true)。
设置 radio 的选中状态也是用 attr() 方法，attr("checked",true)。
【重置一个表单】
document.表单name.reset();
【获取到当前时间的年月日】
var oDate = new Date(); //实例一个时间对象；
$("#thesz_n").val(oDate.getFullYear());
if((oDate.getMonth()+1).toString().length==1){ //判断月份是否是一位数，是的话前加“0”
$("#thesz_y").val("0"+(oDate.getMonth()+1));
}else{
$("#thesz_y").val(oDate.getMonth()+1);
}
if((oDate.getDate()).toString().length==1){ //判断日是否是一位数，是的话前加“0”
$("#thesz_r").val("0"+(oDate.getDate()));
}else{
$("#thesz_r").val(oDate.getDate());
}
【js和jquery的赋值】
js: 添加属性 节点.setAttribute("属性名","属性值");
移除属性 节点.removeAttribute("属性名","属性值");
节点一般通过document.get...By()获取
jquery: 添加属性 $("id").attr("属性名","属性值"); //id 是任意选项框的id
移出属性 $("id").removeAttr(“元素名”);//根据id移除某元素
$(this).val();==$(this).attr("value");
统一设置属性：$("input,textarea").attr("readonly","readonly");
【身份证正则表达式】
var reg=/^[1-9]{1}[0-9]{14}$|^[1-9]{1}[0-9]{16}([0-9]|[xX])$/;
【页面打印模板】
function doPrint(nr) {
var dy=$("#page1").html(); //获取到要打印的页面
var LODOP; //声明为全局变量
//以下是把修饰打印页面的js引入
var strStyleCSS="
href='${path}/common/jquery-easyui-1.4.3/themes/default/easyui.css'>";
strStyleCSS+="
href='${path}/common/jquery-easyui-1.4.3/themes/icon.css'>";
strStyleCSS+=" ";
strStyleCSS+=" ";
strStyleCSS+="";
var sstr=""+strStyleCSS+""+dy+"";
LODOP = getLodop();
LODOP.PRINT_INIT("");
//LODOP.PRINT_INIT("打印控件功能演示_Lodop功能_表单一");
LODOP.SET_PRINT_PAGESIZE(1,0,0,"A4");//横向打印
LODOP.ADD_PRINT_HTM(0,0, "100%","100%",sstr);//打印的各项设置 sstr是打印的最终页面
if(nr=='打印预览...'){
LODOP.PREVIEW();
}else{
LODOP.PRINT(); // 直接打印，不弹出打印机设置对话框
}
}
网友评论