js日常笔记

写在前面：

　　在工作中，有时候会遇到一些零零碎碎的小知识点，虽然这些网上都可以查询到，但还是想把一些自己不是很熟悉的当做笔记记录下来，方便以后查询。

1.按钮隐藏/显示/可用/不可用

 $("#nextBtn").css("display","inline");//按钮显示
 $("#nextBtn").css("display","none");//按钮隐藏
 $("#nextBtn").attr("disabled",false);//按钮可用
 $("#nextBtn").attr("disabled",true);//按钮不可用

var btnCss = $("#nextBtn").attr("disabled");//获取按钮某个属性值

　　弹出确认框，点击确定，执行logout,取消则不执行

<a href="logout" onclick="return confirm('确定要退出登录吗？');">
    退出
</a>

　　js中获取java变量值

<script type="text/javascript">

        var errorMsg = '<%=request.getParameter("errorMsg")%>';
        if(errorMsg == "null"){
            //当没有传递erroeMsg时执行
              ...
        }else{
             ...
        }

    </script>

对于为什么要用=="null",来判断errorMsg不存在，因为是加了'<%=request.getParameter("errorMsg")%>'，单引号，才可以使用，如果不加，则报错。故这里为null用字符串的形式来判断。

　　下拉框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";

　　window.opener.location.href="/dailyreport/dailyRecordMaintain.jsp?time="+new Date().getTime()+"&oldDate="+pickedDate;

　　父窗口带参数刷新

　　遍历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;
    }

posted @ 2018-03-09 14:31 蚊蚊蚊蚊蚊170624 阅读(266) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

蚊蚊蚊蚊蚊170624

js日常笔记

公告