待整理

2020-04-10

JQuery 绑定select标签的onchange事件

通过onchange事件获取用户选择的值，并进行操作

//html

<select name="account"  id="account"  onchange="change(this.value)">
        <option value="please">please select </option> 
        <option value="1">北京</option> 
        <option value="1">上海</option> 
    <option value="1">深圳</option> 
</select>

js函数，通过window.location.href跳转页面时传递参数 “param”。

function change(val){
    if(val!="please"){
    window.location.href="AutoFilling?param="+val; 
}

在新页面接收参数。

HttpSession session = request.getSession();
String userId = request.getParameter("param");

onkeyup+onafterpaste 限制输入框的内容

通过 onkeyup+onafterpaste限制输入框类型，也就是如下输入无论是键盘打字还是粘贴，都会过滤掉非数字字符，只显示数字部分

代码如下：

<input type="text" name="userID" class="form-control" placeholder="User ID"
onkeyup="this.value=this.value.replace(/\D/g,'')"
onafterpaste="this.value=this.value.replace(/\D/g,'')"
value="${userId}">

onkeyup 事件会在键盘按键被松开时发生。
提示：与onkeyup 事件相关的事件发生次序：
onkeydown
onkeypress
onkeyup

JSTL EL：empty的用法

在EL表达式中，empty用来对一个空变量值进行判断: null、一个空String、空数组、空Map、没有条目的Collection集合。

例如：判断cookies中的password是否不为空，来进行自动显示密码

   <c:if test="${not empty password }">cookies中密码不空，在显示密码</c:if>
<c:if test="${not empty password }">cookies中密码为空，则自己输入密码/c:if>

table 的margin和padding无效

table、tr和td这3个元素标签对margin和padding的敏感度

| 元素/是否支持 | margin | padding |
| :—- | :—- : |
| tr |无效 | 有padding区但无效 |
| td |无效 | 有效 |
| table | 有效 |视情况而定 |

此外，table有一个属性，叫做border-collapse，默认的值是separate，就是说每一个td都是独立的，各自有各自的边框，互不重叠，td与table之间有距离。这个时候，table元素的paddnig属性是有效的。

但是，这个时候，table元素的paddnig属性是有效的。tr设置padding后，审查之后可以看到padding区，但是没有效果。

如果已经进了table的坑，登录的form就尽量不要用table了，怎么设置padding和margin，在form的外面套一个div，给这个div设置。

<div style="padding"0 20px;">
    <table>
    内容
    </table>
</div>

换页功能

<nav>
    <ul class="pager">
        <li><a href="?start=0">First Page</a></li>
        <li><a href="?start=${pre}">Preview</a></li>
        <li><a href="?start=${next}">Next</a></li>
        <li><a href="?start=${last}">Last Page</a></li>
    </ul>
</nav>