css+js相關筆記

做者: 故事我忘了^c
我的微信公衆號: 程序猿的月光寶盒

---

css部分:

1.內聯元素垂直居中的設置:

(1) 設置父級元素的行高 line-height,和高度 height

​ 原則:line-height=height

(2) 再設置內聯元素的

​ vertical-align: middle

2.頁頭,頁尾拼接

一般在開發中,都會有公共的頁面部分(不僅是導航欄,頭部,尾頁等)

2.1拼接法則:

主頁面中,須要拼接的地方,加入如下代碼:

<iframe src="common/log_reg_top.html" height="60" scrolling="no" frameborder="no"></iframe>

​ 參數解讀:

​ src:要貼進來的頁面地址

​ height:原頁面的高

​ scrolling:取消滾輪

​ frameborder:取消框架的邊緣線

2.2對應的css樣式:

iframe{
    /*變成塊級元素*/
    display: block;
    /*寬度100*/
    width: 100%;
}

若是嫌麻煩也能夠寫在2.1的代碼裏,這裏做爲抽取公共代碼角度把他抽出來,放在一個公共的css樣式裏

3.圓角

3.1單詞

border-radius

3.2語法

1.div{border-radius:x[px]}

2.div{border-radius:x[px] x[px] x[px] x[px]}

---

js部分:

1.ajax語法

$.ajax({
                url :"",//跳轉到的url地址
                type:"",//請求方式  post/get
                dataType :"",//返回來的數據類型
                //須要傳遞的數據,以json格式,如:"userName":userName,"password":password
                //$("#edit").serialize():表單序列化.注意：必須存在name屬性,其餘用法google
                //做用:獲取id爲edit的全部input標籤的值並本身轉入到對象中
                data:{},
                async : true,//是否異步
                success:function (obj) {//成功的回調函數,obj爲傳回來的數據
                    if (obj!==null){
                        console.log(obj);
                   // Object { realName="金聖聰",  password="xxx",  id=1,  更多...}
                        //js中設置session,對應的取session是sessionStorage.getItem(key)
                        sessionStorage.setItem("realName",obj.realName);
                        sessionStorage.setItem("id",obj.id);
                        //跳轉到主頁
                        location.href="main.html";
                    }else{
                        alert("登陸失敗!用戶名或密碼錯誤");
                    }
                },
                error:function () {//失敗執行的方法
                    alert("登陸失敗!用戶名或密碼錯誤");

                }
            })

2.判斷字符串爲空的方法

/**
 * 判斷字符串爲空
 * @param obj 須要判斷的字符串
 * @returns {boolean} true 爲空,false不爲空
 */
function isEmpty(obj){
    return typeof obj === "undefined" || obj === null || obj === "";
}

3.截取地址欄的參數

//(很重要)截取地址欄上的參數
function getLocationParam(name) {
    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
    var r = window.location.search.substr(1).match(reg);
    // alert(window.location.search);
    if (r != null) return unescape(r[2]); return null;
}

4.用反引號(鍵盤1左邊的)作字符串拼接

var rightBottomStrHead = `
        <strong style="float: left">銷售信息查詢:</strong>
         排序方式:&nbsp;
            <select name="condition">
                <option value="0">銷售日期</option>
                <option value="1">單筆總價</option>
            </select>
        <div style="float: right" class="rightBottomStrHead">
           
        </div>
        `;