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>
        `;