欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

css+js相关笔记

程序员文章站 2023-09-29 09:07:51
1.内联元素垂直居中的设置; 2.页头,页尾拼接; 3.圆角; 1.ajax语法; 2.判断字符串为空的方法; 3.截取地址栏的参数; 4.用反引号(键盘1左边的)做字符串拼接 ......
作者:故事我忘了c
个人微信公众号:程序猿的月光宝盒
css+js相关笔记

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