css+js相關筆記

作者: 故事我忘了^c
個人微信公眾號: 程序猿的月光寶盒

---

[toc] #####

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.截取地址欄的參數

//(很重要)截取地址欄上的參數,使用時,傳入的實參 用""括起來,比如http://XXXX?id=1,此時,傳入方法的實參就是 "id"
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>
        `;