css+js相关笔记

2019-11-28 16:00:32来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

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

原文链接:https://www.cnblogs.com/jsccc520/p/11953130.html
如有疑问请与原作者联系

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:HTML学习 day04

下一篇:我和前端的猿粪,了解一下我眼中的前端。