js日常笔记
写在前面:
在工作中,有时候会遇到一些零零碎碎的小知识点,虽然这些网上都可以查询到,但还是想把一些自己不是很熟悉的当做笔记记录下来,方便以后查询。
1.按钮隐藏/显示/可用/不可用
$("#nextBtn").css("display","inline");//按钮显示
$("#nextBtn").css("display","none");//按钮隐藏
$("#nextBtn").attr("disabled",false);//按钮可用
$("#nextBtn").attr("disabled",true);//按钮不可用
var btnCss = $("#nextBtn").attr("disabled");//获取按钮某个属性值
2.
弹出确认框,点击确定,执行logout,取消则不执行
<a href="logout" onclick="return confirm('确定要退出登录吗?');"> 退出 </a>
3.
js中获取java变量值
<script type="text/javascript"> var errorMsg = '<%=request.getParameter("errorMsg")%>'; if(errorMsg == "null"){ //当没有传递erroeMsg时执行 ... }else{ ... } </script>
对于为什么要用=="null",来判断errorMsg不存在,因为是加了'<%=request.getParameter("errorMsg")%>',单引号,才可以使用,如果不加,则报错。故这里为null用字符串的形式来判断。
4.
下拉框select某一选项设置为不可选:
方法1:
<select> <option value="1" >1</option> <optgroup label="不可选" style=""></optgroup> <option value="2">2</option> <option value="3">3</option> </select>
方法2:
var selectedTo = document.getElementById("dDateTo");
var ops = selectedFrom.options;
//将索引为1的选项禁用掉,option变为不可选
ops[1].disabled = "false";
5.
window.opener.location.href="/dailyreport/dailyRecordMaintain.jsp?time="+new Date().getTime()+"&oldDate="+pickedDate;
父窗口带参数刷新
6.
遍历select下拉框,进行选项默认选中
var selectedFrom = document.getElementById("dDateFrom"); var ops1 = selectedFrom.options; for(var i=0;i<ops.length;i++){ var temp1 = ops[i].value; if(WorkT == temp1){ ops[i].selected = "selected"; break; } }
7.调用js函数带参数传递,一定要注意如果传递的参数是非数字的,即是字符串的,一定要加上引号 再传递,此种在拼接组件的时候要注意下
'<button id="start" onclick="startClick(\''+row.projWorkItemAssId+'\','+row.projId+','+row.workItemId+')" value="start">Start</button>',
黄色背景部分\'表的是一个单引号
8.下拉框默认显示提示语,且不出现在option选项中
var headOpt = "<option value='' disabled selected hidden>---选择---</option>"; $("#bUnit3").append(headOpt);
9.通过div的多个样式去查找元素
$("div[class='pull-left pagination-detail']").empty();
10.jsp页面常用获取项目路径
<% String scheme = request.getScheme(); String serverName = request.getServerName(); String contextPath = request.getContextPath(); int port = request.getServerPort(); //网站的访问跟路径 String baseURL = scheme + "://" + serverName + ":" + port + contextPath; request.setAttribute("baseURL", baseURL); %>
在js中使用直接使用el表达式调用${baseURL}
11.js中使用数组添加元素
var sortArr = new Array();
sortArr.push("aa");
12.table不换行设置
<table id="tableOne" class="text-nowrap"> </table>
13.input输入框变成下划线的样式
/*輸入框變下劃線*/
.timeInput{
border-bottom: 1px solid #dbdbdb;
border-top:0px;
border-left:0px;
border-right:0px;
width: 10px;
}
14.css将input输入框变成下划线
border-color: #878787; border-style: solid; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 1px; border-left-width: 0px"
15.js中将json数组字符串转为对象
var t2="[{name:'zhangsan',age:'24'},{name:'lisi',age:'30'},{name:'wangwu',age:'16'},{name:'tianqi',age:'7'}] "; var myobj=eval(t2); for(var i=0;i<myobj.length;i++){ alert(myobj[i].name); alert(myobj[i].age); }
16.下拉框初始化常用(两种方式都可以)
$("#sel_division").empty(); var headOpt = "<option value='-1' selected >-----------請選擇-----------</option>"; $("#sel_division").append(headOpt);
$("#sel_division").find("option:not(:first)").remove();
17.图片铺满div,并解决ie8使用cover不生效
.navbar-default{
/*让图片铺满*/
width: 100vw;
height: 80px;
background-image: url('${baseURL}/pic/header_2.png');
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
/*解决ie8使用background-size:cover不生效*/
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=Enabled, sizingMethod=scale , src='${baseURL}/pic/header_2.png');
}
18.常用div适应屏幕大小css设置
<!DOCTYPE html> html,body{ margin:0; padding:0; width: 100%; height:100%; } div{ /*让div与body高度一致*/ width:100%; height:100%; /*border:1px solid red;*/ overflow:hidden; margin:0 auto; }
19.
<!DOCTYPE html>
20.iframe框架中子页面获取父页面iframe的高度
通过方法的形式来调用,在父页面写一个方法获取高度,然后在子页面使用方法调用
父页面:
<div id="myDiv" class="page-content" style=""> <iframe id="iframe_0" src="${baseURL}/Views/BasePages/engineer.jsp" width="100%" height="100%" onload="changeFrameHeight(this)" scrolling="yes" frameborder="no" border="0" marginwidth="0" marginheight="0" allowtransparency="yes"> <%--changeFrameHeight(this)--%> </iframe> </div> <script type="text/javascript"> var changeFrameHeight = function (that) { $(that).height(document.documentElement.clientHeight - 120); //console.log(document.documentElement.clientHeight - 120) } //获取iframe的高度 function getFrameHeight(){ return (document.documentElement.clientHeight - 120); } </script>
子页面:engineer.jsp
//获取iframe的高度
var frameH = parent.getFrameHeight();
父页面调用子页面的方法,在子页面写好save_btn()方法即可
$('#projectOwnerFrame')[0].contentWindow.save_btn();
21.序列化表单
var p = serializeForm($("#header_form2")) || {};
//序列化表单
function serializeForm(form){
var obj = {};
$.each(form.serializeArray(),function(index){
if(obj[this['name']]){
obj[this['name']] = obj[this['name']] + ','+this['value'];
} else {
obj[this['name']] =this['value'];
}
});
return obj;
}