前端界面操作基本常识

目录：

1.js函数返回项目路径从而实现Controller的调用

2.根据Id获取前端空间value值

3.jquery选择器具体的选择器介绍

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为你想要打印出来的数据。