前端开发的一些小记录点

修改了`css`、`js`文件，可以加一个时间戳作为版本号，以防止缓存。

<link rel="stylesheet" type="text/css" href='css/style.css?version=20181128' />

如果是动态设置样式，最好给盒子加高度，不要等图片加载出来之后，获取对应图片的高度再计算,因为可能图片加载很慢，此时，外层盒子高度为0，没法正确的计算。

.pic-container{ 
  height: 100px;
}

把 `title` 标签放到定义字符集的 `meta` 标签下面

<meta charset="UTF-8">
<title>learn js</title>

什么是事件冒泡

气泡从水底开始往上升，由深到浅，升到最上面。在上升的过程中，气泡会经过不同深度层次的水。相对应地：这个气泡就相当于我们这里的事件，而水则相当于我们的整个dom树；事件从dom 树的底层层层往上传递，直至传递到dom的根节点。

如何阻止事件冒泡

// 1、不兼容 ie
event.stopPropagation();

// 2、兼容 ie
if(event.stopPropagation){
      event.stopPropagation();
}else{
      event.cancelBubble = true;
}

如何取消默认行为

// 不兼容 ie
event.preventDefault(); 

// 兼容 ie
if(event.preventDefault){
      event.preventDefault();  
}else{
      event.returnValue=false;
}

页面之间实现跳转的几种方式

// 1、a 链接跳转
 <a href="b.html">b</a>

// 2、
window.location.href  = "b.html";

// 3、
self.location = "b.html";

// 4、
top.location = "b.html";

// 5、返回上一页
window.history.back(-1);

页面之间传值的几种方式

(1)、url 传值

window.location.href = "https://www.google.com/search?q=hello&oq=hello"

// 如何把后面的值转化为 JSON
function parseURL(url){
    var url = url.split("?")[1];
    var para = url.split("&");
    var len = para.length;
    var res = {};
    var arr = [];
    for(var i=0;i<len;i++){
        arr = para[i].split("=");
        res[arr[0]] = arr[1];
    }
    return res;
}

(2)、cookie 传参

function setCookie(cname,cvalue,exdays){
    var d = new Date();
    d.setTime(d.getTime() + (exdays*24*60*60*1000));
    var expires = "expires=" + d.toUTCString();
    document.cookie = cname + "=" + cvalue + "; " + expires;
}

function getCookie(cname){
    var name = cname + "=";
    var ca = document.cookie.split(";");
    for(var i=0;i<ca.length;i++){
        var c = ca[i];
        while(c.charAt(0)==' '){
            c = c.substring(1); 
        }
        if(c.indexof(cname) == 0){
            return c.substring(name.length,c.length);
        }
    }
    return "";
}

(3)、H5中Web Storage中的localStorage对象

localStorage.setItem("age","24");

localStorage.getItem("age");

图片标签尽量加 alt 属性

<img src="https://www.baidu.com" alt="到百度首页" title="到百度首页">

`<br>` 标签最好用在 `p` 段落内部的文字换行，其他地方不要用

<p>
  我是一个段落，<br>
  我是一个段落。
</p>

几种常见的灰色

媒体查询

// 在最大宽度为1366像素的屏幕上应用的样式
@media screen and (max-width: 1366px) {
    .top{
        height: 40px;
        line-height: 40px;
        font-size: 14px;
    }
}

// 在最小宽度为1366像素，最大为1600像素的屏幕上应用的样式
@media screen and (min-width: 1366px)  and （max-width: 1600px）{
    .top{
        height: 40px;
        line-height: 40px;
        font-size: 14px;
    }
}

jquery 各版本 CDN

// jquery-2.1.1

 

注:jquery-2.0以上版本不再支持IE 6/7/8)百度引用地址 (推荐目前最稳定的，不会出现延时打不开情况)


百度压缩版引用地址:
<script src="http://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>
微软压缩版引用地址:
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-2.1.1.min.js"></script>
官网jquery压缩版引用地址:
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>


// jquery-2.0.0


百度压缩版引用地址:
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
微软压缩版引用地址:
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-2.0.0.min.js"></script>
官网jquery压缩版引用地址:
<script src="http://code.jquery.com/jquery-2.0.0.min.js"></script>

 

// jquery-1.11.1

 

百度压缩版引用地址:
<script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
微软压缩版引用地址:
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.11.1.min.js"></script>
官网jquery压缩版引用地址:
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>

 

// jquery-1.10.2

百度压缩版引用地址:
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
微软压缩版引用地址:
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.10.2.min.js"></script>
官网jquery压缩版引用地址:
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>


// jquery-1.9.1

百度压缩版引用地址:
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
微软压缩版引用地址:
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.1.min.js"></script>
官网jquery压缩版引用地址:
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>


// jquery-1.8.3


百度压缩版引用地址:
<script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
微软压缩版引用地址:
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.8.3.min.js"></script>
官网jquery压缩版引用地址:
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>

 

// jquery-1.7.2

百度压缩版引用地址:
<script src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script>
微软压缩版引用地址:
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.7.2.min.js"></script>
官网jquery压缩版引用地址:
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>

 


// jquery-1.6.4

百度压缩版引用地址:
<script src="http://libs.baidu.com/jquery/1.6.4/jquery.min.js"></script>
微软压缩版引用地址:
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.6.4.min.js"></script>
官网jquery压缩版引用地址:
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>

$.inArray

返回数组中指定元素的索引值，没有找到返回 -1

var arr = [1, 2, 3, 8 , 9, 10];

var index1 = $.inArray(8, arr);
console.log(index1);   // 3

var index2 = $.inArray('8', arr);
console.log(index2);   // -1

delete 操作符

用于删除对象的某个属性

var obj = {
    username: 'tom',
    age: 24,
    likes: 'sing'
}
delete obj.age;
console.log(obj);

// {
//     username: 'tom',
//     likes: 'sing'
// }

使用 `debugger` 调试 `js`

setTimeout(function(){
    console.log('hello');
},0)
var num = 0;
for (var i = 0; i < 5; i++) {
    debugger;
    num += i;
}
console.log(i);

清除浏览器一系列记录及缓存

ctrl + shift + delete

监听 `input` 内容改变事件

1、onchange
在内容发生改变，并且失去焦点时触发

$("#username").on("change", function () {
    console.log($(this).val());
})

ie9 以下不支持。
2、oninput
内容发生改变时触发，不需要失去焦点。js 动态改变 value 值不会触发该事件。

$("#username").on("input", function () {
    console.log($(this).val());
})

ie9 以下不支持。

$(选择器).click(function(){}) 和 $(document).on('click', 选择器, function () {})的区别

主要区别：
$(选择器).click(function(){}) 只针对页面已经存在的元素。
举个例子：

// 这种情况下，最后一个创建的 li 元素是无法绑定点击事件的。
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
<script>
    $("ul li").click(function () {
        console.log($(this).text());
    })
    $("ul").append("<li>4</li>");
</script>

// 这种情况下，最后一个创建的 li 元素也拥有点击事件。
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
<script>
    $("body").on("click", "ul > li", function () {
        console.log($(this).text());
    })
    $("ul").append("<li>4</li>");
</script>

window.location.pathname 和 window.location.search

访问 http://127.0.0.1:8095/abc/b.html?user=tom&age=23 这个地址的话

console.log(window.location.pathname);   // /abc/b.html
console.log(window.location.search);   // ?user=tom&age=23
console.log(window.location.href);   // http://127.0.0.1:8095/abc/b.html?user=tom&age=23

jq 获取父页面

如果用 iframe 引入了一个子页面，想在子页面中操作父页面的话，可以使用 parent.document

$(parent.document).find('h2').css('background-color', 'yellowgreen');
$(window.parent.document).find('h2').css('background-color', 'yellowgreen');
$('h2', parent.document).css('background-color', 'yellowgreen');

$.ajax 的回调函数执行顺序

$.ajax({
    url: "./data.php",
    success: function () {
        console.log("success");
    },
    beforeSend: function () {
        console.log("beforeSend");
    },
    complete: function () {
        console.log("complete");
    },
    error: function () {
        console.log("error");
    }
})
// beforeSend
// success
// complete

js 删除数组中某个元素

`splice`

var arr = [0, 1, 2, 3, 4];
arr.splice(2, 1);
for (var i = 0; i < arr.length; i ++) {
    console.log(i + ' ---- ' + arr[i]);
}
// 0 ---- 0
// 1 ---- 1
// 2 ---- 3
// 3 ---- 4

`delete`

var arr = [0, 1, 2, 3, 4];
delete arr[2]
for (var i = 0; i < arr.length; i ++) {
    console.log(i + ' ---- ' + arr[i]);
}
// 0 ---- 0
// 1 ---- 1
// 2 ---- undefined
// 3 ---- 3
// 4 ---- 4

top parent self

parent常用在iframe和frame中的子页面访问父页面中的对象
top ：一个页面可能会有很多层，top是指最顶层的框架
self ：是指当前窗口