目录:
4.前端控件标签class类添加内容和删除内容
5.向前端标签里面赋值
6.跳转action界面
7.js的for循环简化初始化工作
8.前台界面输出变量到console平台
js函数返回项目路径从而实现Controller的调用
function getpath(){
var curWwwPath=window.document.location.href;
//获取主机地址之后的目录,如: /uimcardprj/share/meun.jsp
var pathName=window.document.location.pathname;
var pos=curWwwPath.indexOf(pathName);
//获取主机地址,如: http://localhost:8083
var localhostPaht=curWwwPath.substring(0,pos);
//获取带"/"的项目名,如:/uimcardprj
var projectName=pathName.substring(0,pathName.substr(1).indexOf('/')+1);
var path = localhostPaht+projectName
return path
}
根据Id获取前端空间value值,例子如下:
var select1 = document.getElementById("select1").value;
jquery选择器具体的选择器介绍
原始JS(Document 对象)选择器:
id选择器:document.getElementById("test");
name选择器:document.getElementsByName("test");
节点选择器:document.getElementsByTagName("p");
class选择器:document.getElementsByClassName("test");
jQuery 选择器:
1.jQuery 元素选择器.
id选择器:$("#test");
class选择器:$(".test");
节点选择器:$("p");
2.jQuery 属性选择器.
$("div[id]"); 选择所有含有id属性的div元素
$("input[name='keleyicom']"); 选择所有的name属性等于'keleyicom'的input元素
$("input[name!='keleyicom']") ;选择所有的name属性不等于'keleyicom'的input元素
$("input[name^='keleyi']"); 选择所有的name属性以'keleyi'开头的input元素
$("input[name$='keleyi']"); 选择所有的name属性以'keleyi'结尾的input元素
$("input[name*='keleyi']");选择所有的name属性包含'keleyi'的input元素
$("input[id][name$='keleyi']"); 可以使用多个属性进行联合选择,该选择器是得到所有的含有id属性并且那么属性以keleyi结尾的元素
3.jQuery CSS 选择器.
$("p").css("background-color","red");
4.jQuery 表单选择器.
前端控件标签class类添加内容和删除内容
要操作的标签为下:
<div class="col-md-2 grid_box1 " id="condition" style="width:200px">
下面是对这个标签进行的操作:
$("#condition").addClass("has-error"); //操作之后class里面的内容为class="col-md-2 grid_box1 has-error"
$("#condition").removeClass("has-error"); //操作之后class里面的内容为class="col-md-2 grid_box1 has-error"
向前端标签里面赋值
1.例子1
jsp页面标签
<div id="alertEmplay" style="float: left; font-family: '楷体', '楷体_GB2312'">
<font color="#FF6347">
<label style="line-height: 44px; width: 200px;" id="label1"></label>
</font>
</div>
下面是js方法对label添加内容
_label="您的查询条件未填充完整";
$("#label1").html(_label);
2.例子2
jsp界面
<div id="students"></div>
js方法添加内容
$("#students").html(getHTML(result));
function getHTML(result) {
var html ="";
for(var index=0;index< result.list.length;index++) {
html +=' <div class="col-md-6 panel-grids" style="width: 100%">';
html +=' <div class="panel panel-default">';
html +=' <div class="panel-heading">';
html +=' <h3 class="panel-title">证书--'+(index+1)+'</h3>';
html +=' </div>';
html +=' <div class="panel-body">';
html +=' <table class="table table-bordered" id="table1">';
html +=' <tbody>';
html +='<tr>';
html +='<td>'+"公司名称"+'</td>';
html +='<td>'+(result.list[index].company == undefined ? '' : result.list[index].company)+'</td>';
html +='</tr>';
html +='<tr>';
html +='<td>'+"组织名称"+'</td>';
html +='<td>'+(result.list[index].orgName == undefined ? '' : result.list[index].orgName)+'</td>';
html +='</tr>';
html +='<tr>';
html +='<td>'+"version"+'</td>';
html +='<td>'+(result.list[index].version == undefined ? '' : result.list[index].version)+'</td>';
html +='</tr>';
html +='<tr>';
html +='<td>'+"用户名"+'</td>';
html +='<td>'+(result.list[index].userName == undefined ? '' : result.list[index].userName)+'</td>';
html +='</tr>';
html +='<tr>';
html +='<td>'+"组织使用者"+'</td>';
html +='<td>'+(result.list[index].orgUser == undefined ? '' : result.list[index].orgUser)+'</td>';
html +='</tr>';
html +='<tr>';
html +='<td>'+"本地用户"+'</td>';
html +='<td>'+(result.list[index].localName == undefined ? '' : result.list[index].localName)+'</td>';
html +='</tr>';
html +='<tr>';
html +='<td>'+"注册省份"+'</td>';
html +='<td>'+(result.list[index].province == undefined ? '' : result.list[index].province)+'</td>';
html +='</tr>';
html +='<tr>';
html +='<td>'+"注册公司"+'</td>';
html +='<td>'+(result.list[index].country == undefined ? '' : result.list[index].country)+'</td>';
html +='</tr>';
html +='<tr>';
html +='<td>'+"证书名称"+'</td>';
html +='<td>'+(result.list[index].subjectName == undefined ? '' : result.list[index].subjectName)+'</td>';
html +='</tr>';
html +='<tr>';
html +='<td>'+"发布名称"+'</td>';
html +='<td>'+(result.list[index].issueName == undefined ? '' : result.list[index].issueName)+'</td>';
html +='</tr>';
html +='<tr>';
html += '<td>'+"有效日期"+'</td>';
html += '<td>'+(result.list[index].expired == undefined ? '' : result.list[index].expired)+'</td>';
html +='</tr>';
html +=' </tbody>';
html +=' </table>';
html +=' </div>';
html +=' </div>';
html +=' </div>';
}
return html;
}
跳转action界面
放在jsp页面的前端获取路径
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
jsp页面<body>控件中跳转到目标jsp页面。
<a href="${basePath}certificateRegistration.jsp">点击这里跳转到证书注册页面</a>
js的for循环简化初始化工作
for (var i = 1; i < 7; i++) {
$("#condition" + i + i+i).removeClass("has-error");
$("#label" + i + i+i).html("");
}
前台界面输出变量到console平台
console.log(value); //value为你想要打印出来的数据。