前端界面操作基本常识

小鱼儿 2022-05-21 08:52 255阅读 0赞

#### 目录： ####

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选择器[具体的选择器介绍][Link 1]

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

[Link 1]: https://www.cnblogs.com/ooo0/p/6115324.html