前端笔记

一.css

1.盒模型（IE盒模型，W3C盒模型）

盒模型的构成（content【内容】，padding【填充】，border【边框】，margin【边界】），IE盒模型的content把padding和border包含在内。

2.css选择符

id选择器（#），类选择器（.）,标签选择器（div ul li span等），相邻选择器（div + p），子选择器（ul>li），后代选择器（div a）

3.rem(多数浏览器默认，1rem = 16px)

3.div水平居中(定宽，margin左右设为auto)

div{

    width:500px;

    margin:0 auto;

}

4.div水平垂直居中

（1）绝对定位（1.margin，2.transform）

div {
position: absolute;
width: 300px;
height: 300px;
top: 50%;
left: 50%;
/*margin:-150px 0 0 -150px;*/
transform: translate(-50%, -50%);
}

（2）flex布局（需考虑兼容性问题）

    .container {
width: 300px;
height: 300px;
border: 1px solid #000000;
display: flex;
align-items: center; //垂直居中
justify-content: center; //水平居中
}

.container div {
width: 100px;
height: 100px;
background-color: #000;

    }

5.postion的属性

    absolute（绝对定位，相对于第一个非static的父元素定位）

    relative（相对定位，相对于正常位置定位）

    fixed（绝对定位，相对于浏览器窗口定位）

    static(默认，无定位)

    inherit（继承父元素的position）

6.display的属性值

    block（显示为块级元素 默认宽度为父元素高度，不设置宽度时撑满整行，独占一行，可设置宽高）

    none（此元素不会被显示）

    inline（显示为内联元素 不独占一行，不可设置宽高，内容撑开宽度）

    inline-block（内联块元素，不独占一行，可设置宽高，不设宽度时内容撑开宽度）

    list-item(不设宽度时占一整行，独占一行，可设宽高)

    table（不设宽时内容撑开宽度，独占一行，可设宽高）

   table-cell（不设宽高时，内容撑开宽度，可设宽高，不独占一行，垂直对齐）

7.css3新属性

    css选择器(:first-child，last-child, nth-child)

    圆角（border-radius）

    阴影（shadow）

    文字效果（text-shadow）

    旋转（transform）

8.常见的浏览器兼容性问题

    png24图片在ie6下有背景（改用png8）

    ie6双边距  块元素设置float，且有横向margin是，ie6显示的margin比设置的大（给块元素添加_display:inline[_display 只有ie6识别]）

    浏览器默认margin,padding不同（设置margin:0;padding:0）

9.清除浮动

    .clearfix:before,

    .clearfix:after {
    content: " ";
    display: table;
    }
    .clearfix:after {
clear: both;
    }
    .clearfix {
zoom: 1;

    }

10.媒体查询（media-query）

@media screen and (max-width: 300px) {}

11.多列等高布局

.container {
display: flex;
}

.left,
.right {
flex: 1;
}

二.js

1.解决ajax缓存

【1】在ajax发送请求前加上 anyAjaxObj.setRequestHeader("If-Modified-Since","0")。
【2】在ajax发送请求前加上 anyAjaxObj.setRequestHeader("Cache-Control","no-cache")。
【3】在URL后面加上一个随机数： "fresh=" + Math.random();。
【4】在URL后面加上时间戳："nowtime=" + new Date().getTime();。

【5】如果是使用jQuery，直接这样就可以了 $.ajaxSetup({cache:false})。这样页面的所有ajax都会执行这条语句就是不需要保存缓存记录。

2.解决跨域问题

【1】porxy代理

【2】CORS使用方法：一般需要后端人员在处理请求数据的时候，添加允许跨域的相关操作。如下

res.writeHead(200, {
"Content-Type": "text/html; charset=UTF-8",
"Access-Control-Allow-Origin": 'http://localhost',
'Access-Control-Allow-Methods': 'GET, POST, OPTIONS',
'Access-Control-Allow-Headers': 'X-Requested-With, Content-Type'

});

【3】jsonp

js方式

function jsonPadding(response){
console.log(response);
}
window.onload = function(){
var script = document.createElement('script');
script.src = 'https://api.douban.com/v2/book/search?q=javascript&count=1&callback=jsonPadding';

document.body.insertBefore(script,document.body.firstChild);

}

jquery方式

$.ajax({

type: "get",

        url: "https://api.douban.com/v2/book/search",

        async: true,

dataType: 'jsonp',

jsonp: 'callback',

        data: {

q: "javascript",

count: 1

},

jsonpCallback: 'jsonPadding',
success: function(data) {
console.log(data);
}
});

3.js实现千位符

function commafy(num) {
    return num && num
        .toString()
        .replace(/(\d)(?=(\d{3})+\.)/g, function($0, $1) {
            return $1 + ",";
        });

}

4.获取url参数

function getQueryString(){
var shref = window.location.href;
var arrHref = shref.split('?');
if(arrHref[0] == shref){
return '';
}
var qObj = {};
var qArr = arrHref[1].split('&');
for(var i = 0;i<qArr.length;i++){
arrr = qArr[i].split('=');
qObj[arrr[0]] = arrr[1];
}
return qObj;
}