HTML+CSS+JS——Tips-归纳2

b.1.text文本框点击和失去焦点

var textverify=function(){
	//空值验证
	$("#loginusername").focus(function(){
		//console.log(1);console.log(typeof(username));
		var username = $(this).val();
		if(username=="输入账号"){
			$(this).val("");
		}
	});
	$("#loginusername").focusout(function(){
		var username = $(this).val();
		if(username==""){
			$(this).val("输入账号");
		}
	});
	$("#loginpassword").focus(function(){
		var password = $(this).val();
		if(password=="输入密码"){
			$(this).val("");
		}
	});
	$("#loginpassword").focusout(function(){
		var password = $(this).val();
		if(password==""){
			$(this).val("输入密码");
		}
	});
	$("#checkimg").focus(function(){
		var password = $(this).val();
		if(password=="输入验证码"){
			$(this).val("");
		}
	});
	$("#checkimg").focusout(function(){
		var password = $(this).val();
		if(password==""){
			$(this).val("输入验证码");
		}
	});
};

b.2.ajax序列化表单提交

var ajaxuser = function() {
	$.ajax({
		type : "post",
		url : "/homeofcar/user/login",
		data : $("form:eq(0)").serialize(),
		success : function(data) {
			if (data != null && data != "") {
				window.location.href = "/homeofcar/show/main";
			} else {
				$("#error_box span").show();
			}
		},
		dataType : "json"
	}); 
};

b.3.利用getJson()获取数据、动态构建table行

$(function(){
	$.getJSON(
			"/homeofcar/user/getjson",
			function(data) {
				var list = data;
				//循环
				$.each(list,function(i,user){
					//构建行
					var $tr = $("<tr></tr>");
					//复选框
					$tr.append('<td><input type="checkbox"/></td>');
					//用户
					$tr.append("<td>"+user.realname+"</td>");
					//角色
					var juese = '<td><table cellspacing="0" cellpadding="0" border="1" style="border-collapse: collapse;border-width:0px; border-style:hidden;">';
					$.each(user.listRole,function(j,role){
						juese = juese + "<tr><td>"+role.rolename+"</td></tr>";
					});
					juese+="</table></td>";
					$tr.append(juese);
					//权限
					var quanxian = '<td><table cellspacing="0" cellpadding="0" border="1" style="border-collapse: collapse;border-width:0px; border-style:hidden;">';
					var index=["[系统管理:]","[仓库管理:]","[统计管理:]","[销售管理:]","[客户管理:]"];
					$.each(user.listRole,function(j,role){
						quanxian+="<tr><td>";
						$.each(role.listModule,function(k,module){
							if (module.paretid != 0) {
								if (module.paretid != role.listModule[k-1].paretid) 
									quanxian+=" "+index[module.paretid-1];
								quanxian+=" "+module.modulename;
							}
						});
						quanxian+="</td></tr>";
					});
					quanxian+="</table></td>";
					$tr.append(quanxian);
					//编辑   <td><a href="/user/userupdate/id">编辑</a></td>  
					$tr.append('<td><a href="user/userupdate?userid='+user.userid+'">编辑</a></td>');
					//构建行追加
					$("#tablemax").append($tr);
				});
			});//getJSON
});

b.4.JSP中EL表达式和js关系

   

        (个人理解)在页面的JavaScript中是可以通过EL表达式取到作用域里面的值的，不过值得注意的是EL表达式的优先级别高于页面的JavaScript，因此在页面的JavaScript中只能用EL表达式取某一个值，而不能动态的构建EL表达式。当在JavaScript中对EL表达式进行拼接时会报错。

//错误案例
$("#table").append("<tr><td>${roleList["+i+"].rolename}</td></tr>");//i是循环的变量

//成功案例
$("#table").append("<tr><td>${roleList[0].rolename}</td></tr>");//不对EL表达式进行拼接