页面UI和交互的小问题记录

实际项目中用到的小知识,可能简单,但是记不准确的,持续更新... ...

----------------------------------------------------------------------分割线------------------------------------------------------------------------------------

1.input框取消记忆输入历史

   用处:在选择日期的的input框时历史记录会遮挡日期选择组件的显示,  在input框增加属性:

   autocomplete="off"(该属性为h5新增的属性)

2.js取得数组的最大值

   有时候前台页面的显示既要用到数组的所有值,又要用到数组的最大值,但是,在后台的数据是根据数据库查询结果拼接的字符串数组,如果在后台处理数据取得最大值传到前台会很麻烦,这时候就可以在前台页面的js里处理取得的字符串数组,很简单的便可以获得该数组的最大值:(百度查资料查到三种,此处只记录一种自己用到的):

    var   arr=[1,2,3,6,9];

    var max = Math.max.apply(null,arr);

    console.log(max)

---

    apply()应用某一对象的一个方法，用另一个对象替换当前对象

   由于max()里面参数不能为数组，所以借助apply(funtion,args)方法调用Math.max()，function为要调用的方法，args是数组对象，当function为null时，默认为上文,即相当于apply(Math.max,arr)

---

3.margin和padding:

   margin和padding是在html中的盒模型的基础上出现的，margin是盒子的外边距，即盒子与盒子之间的距离，而padding是内边距，是盒子的边与盒子内部元素的距离。

4.关于jsp页面使用<c:forEach>标签:

  在jsp页面使用<c:forEach...>来进行循环遍历,一定一定一定要在头部声明: 

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>,

否则的话,会被气死...表示之前断断续续想了一下这个问题,直到今天搞了一上午这个问题,打断点,alert各种各样的办法试过,items可以取到后台传的数据,然而循环体内就是无法在页面显示出来o(╥﹏╥)o, 直到下班十分钟才去搜了一下黄色警告信息(一直以为警告是不会影响程序的,所以说,不要随便以为,不管是啥)

5.select默认选中项:

   var i = ${studentname};    
    document.getElementById("studentname")[i].selected=true;

6.关于<c:if>标签的使用:

  <td width = "20%">当前状态:</td>
        <c:if test="${o.state==0 }"><td width = "30%">使用中</td></c:if>
        <c:if test="${o.state==1 }"><td width = "30%">维修中</td></c:if>

   (o是后台传过来的数据,state是数据库字段名--------注意根据实际的项目传值修改)

  ※  注意和上述第四点一样,需要在jsp文件头部声明<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>!!!

7.form表单button按钮点击执行submit动作??

  例:form表单在submit提交之后会验证表单并提示验证不通过信息,但是在该form表单还有一个发送验证码的button,点击之后会验证所有表单信息,而此时不想验证-----------解决:button按钮指定类型type="button".  ----原因:form表单的按钮如果不指定button类型,会默认执行subbmit动作,因此除提交按钮之外的button需要指定类型type="button"来指定当前按钮的点击事件为特指的函数体. 

8. <c:if test="EL表达式和0比较 ">

    错误代码: <c:if test="${  role.roleId eq 0 }">    (此时和0比较时会自动将role.roleId转换成long型,但是role.roleId是字母数字组合的字符串,不能转成long型,所以会报错: )

    修改后代码:<c:if test="${  role.roleId eq '0' }">

9.js判断字符串是否为空: 直接上例子

 定义函数:

//判断字符是否为空的方法
function isEmpty(obj){
    if(typeof obj == "undefined" || obj == null || obj == ""){
        return true;
    }else{
        return false;
    }
}

然后就是使用了,这就不要说了,直接调用这个函数就好了,函数的参数就是要判断是否为空的变量名。

10.关于页面传值给后台出现中文乱码的问题：（乱码问题解决了，但是还不清楚会不会产生其他的问题，后续补充。）

    做项目的过程中遇到jsp页面跳转链接中传参有中文, 链接里的中文显示正常, 但是传到后台接收参数中文就会出现乱码，百度了看了挺多，发现是由于页面的编码方式不一致所导致的，最终采用了一个相对简单易实现的解决办法，那就是修改tomcat配置。

一个方法是修改server.xml文件的编码：添加   URIEncoding="UTF-8"，如下图：

  

这种方法有一个问题，就是每次部署都需要配置一下，

所以，也就有了第二种方法：直接在Tomcat的安装目录下修改server.xml文件，添加  URIEncoding="UTF-8" ，如下图：

 

        个人觉得在自己本地开发的时候用第一种方法，避免日后再碰到类似问题，别人的环境或者服务器的Tomcat可能没有配置这个编码，这样就会出现自己本地跑程序没有问题，但是换成别人的就会出现问题，但是你自己配置了这个编码一定一定要记住啊；如果是将项目部署到云上，那么就可以直接修改tomcat安装目录下的server.xml了，避免哪次重新部署忘了改。

---

--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*2------0------1------9------分------割------线--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*

---

11.

 

--------------------------------------------------------------------------分割线-----------------------------------------------------------------------------------------

持续更新中... ...