jsp页面中遇到的小知识点
注：该篇随笔由作者本人根据工作中遇到的知识点进行总结
1、让某个div隐藏或显示
$("#id").css("display","none");
$("#id").css("display","block");
2、下拉框中根据后台的值设置选中
a、第一种方法
<option value="0"><%="0".equals(rs.getNameString(i,"zd"))?"selected":"";%><option/>
<option value="0"><%="0".equals(rs.getNameString(i,"zd"))?"":"selected";%><option/>
b、第二种方法
var selects = document.getElementById("id"); //注意此处无#
for(var i = 0;i ,<selects .options.length;i ++){
if(selects.options[i].value == "值"){
selects.options[i].selected = true;
}
}
ps:
<1> $("#id").append("<option value='Value'>Text</option>"); //添加一项option
c、第三种方法
$("#zxzqmonthww").find("option[value='"+zxzqws+"']").attr("selected",true);
3、一个div中写两个input，input中间没间隔
<input type="text" style="width: 210px;" class="form-control" id="jhzbksrq" name="jhzbksrq" onclick="var jhzbjsrq=$dp.$('jhzbjsrq');WdatePicker({onpicked:function() {jhzbjsrq.click();}})" placeholder="计划招标开始日期"/>
<input type="text" style="width: 210px;" class="form-control" id="jhzbjsrq" name="jhzbjsrq" onclick="WdatePicker({minDate:'#F{$dp.$D(\'jhzbksrq\')}'})" placeholder="计划招标结束日期"/>
怎样在两个中间加间隔：
在style中加style="width: 210px;margin-right:2px;"
4、多个a标签用同一个id时，$("#deletea").hide();只能让第一个a标签隐藏
解决办法：
$('tr').each(function(){
$(this).find("#deletea").hide();
})
5、!important关键字可以是CSS样式最先加载
6、用$("#xmzt").attr('disabled','disabled').css("background-color","#EEEEEE;")虽然同样可以限制用户输入，但有可能会造成form表单提交时，该input框中的数据丢失
解决方法(用readonly)便可以避免(但此方法然后可以让用户点击):
$("#xmzt").attr('readonly',true).css("background-color","#EEEEEE;");
可以先使用disabled，然后在<input>隐藏标签中写值然后随form表单提交。
7、img标签未设定宽高属性时，可用样式:
img{
max-width:400;
max-height:200px;
_width:expression(this.width>=400&&this.width/400>=this.height/200?"400px":"auto");
_height:expression(this.height>=200&&this.width/400<this.height/200?"200px":"auto")
}
8、input标签type="file"时 cursor: pointer不起作用：
该现象在谷歌浏览器时会出现，解决方法：
给input标签加样式font-size:0;后在加 cursor: pointer即可解决
9、给layer弹出层加btn居中无效：
原代码：
layer.open({
type: 2,
area: ['800px', '470px'],
fix: false,
title: '详细信息',
btn: ['关闭'],
btnAlign: 'c',
content: '${ctx}/web/app/formList/'+there+'_showinfo.jsp?cgid='+those+'&zbbm='+zbbm+'&fsxxbm='+there,
yes:function(index){
layer.close(index);
}
});
修改后代码：
layer.open({
type: 2,
area: ['800px', '470px'],
fix: false,
title: '详细信息',
btn: ['关闭'],
btnAlign: 'c',
content: '${ctx}/web/app/formList/'+there+'_showinfo.jsp?cgid='+those+'&zbbm='+zbbm+'&fsxxbm='+there,
success: function(layero){
layero.find('.layui-layer-btn').css('text-align', 'center'); //改变位置
},
yes:function(index){
layer.close(index);
}
});
10、WdatePicker空间选择当前时间之后的时间
<input type="text" id="zxrq" name="zxrq" class="form-control" placeholder="执行日期" onfocus="WdatePicker({dateFmt:'yyyy-MM-dd',minDate:'%y-%M-%d'})"/>
11、WdatePicker空间选择当前时间之前的时间
<input type="text" id="zxrq" name="zxrq" class="form-control" placeholder="执行日期" onfocus="WdatePicker({dateFmt:'yyyy-MM-dd',maxDate:'%y-%M-%d'})"/>
12、input框中限制只能输入数字
<input type="text" id="txsj" name="txsj" class="form-control" placeholder="提醒时间" onkeyup = "value=value.replace(/[^\d]/g,'')"/>
13、js默认勾选多个复选框
1、适用于复选框的每个值都不同，如：1,2,3,4,5,6,7,
var zxzqs=2,3,4
var items= document.getElementsByName("zxzqmonthd");根据复选框的name值得到一个数组
for(var i=0;i<items.length;i++){
if(zxzqs.indexOf(items[i].value) != -1){ //只使用于复选框的每个值都不相同，如1,12则不行
items[i].checked=true;
}
}
2、适用所有
var zxzqsArray =zxzqs.split(","); //12,14,17
var checkBoxAll = $("input[name='zxzqmonthd']");
for(var i=0;i<zxzqsArray.length;i++){
$.each(checkBoxAll,function(j,checkbox){
var checkValue=$(checkbox).val();
if(zxzqsArray[i]==checkValue){
$(checkbox).attr("checked",true);
}
});
}
14、js给label标签赋值
document.getElementById("zxzq").innerHTML =str ;
