2017.8.29box-sizing、运算符、页面刷新、TCP、setInterval、CSS3伪类

JavaScript中的===，还有==号的比较

"==="为严格运算符，“==”为相等运算符
这篇知乎的文章主要讲解了一下的知识点：

• ==和===的比较以及区别
• 举出很多个比较常见的能够骗过自己的比较
• 说明==为什么不好

浮动引起的问题

JavaScript运算符总结

box-sizing属性

box-sizing属性的了解：
主要用来控制元素盒子模型的解析模式。默认值是content-box(标准3c模型)。

• content-box,设置width、hight属性是指content部分的高/宽。
• border-box：让元素维持IE传统盒子模型。这个时候设置元素的width和height是指content部分的宽高+border+padding

页面刷新的方法

window.location.reload()
self.opener.location.reload();//子窗口刷新父窗口
parent.另一个FrameID.location.reload()//刷新另一个框架页面应用

先关闭还是先刷新

关于关闭和刷新的顺序问题，是怕关闭后没有执行到刷新方法，解决的方法可以将方法放在最底层的页面，然后在最后一个页面调用这个方法。还有现在是已经书写了close方法的话，可以再多传个参数，控制是否需要刷新

getElementsByClassName()

自己的潜意识中只有document才能调用这个方法，其实不然，就像下面这种写法有时候也是很有必要的（因为要缩小查找的范围）

var clickObj = e.currentTarget.parentNode.parentNode.parentNode;
var stateNum = clickObj.getElementsByClassName('stateNum')[0].innerHTML;

TCP

3次握手的核心目的在于：

• 首要目的是告知对方seq,对方回复ack(收到的seq+包的大小),这样发送端就知道有没有丢包了
• 次要目的是要告知和协商一些信息。

为什么要建立握手3次，挥手4次：

• 首先，TCP是双向的，所以断开是4次
• 其实连接的时候也应该为4次的（如果将第二步中的发送ack+syn分成两步的话）
• 其次，之所以是四次是因为服务器端收到fin后，知道对方要关闭了，然后OS通知应用层要处理一些东西，但是这个过程是需要时间的，没有那么快可以，所以它会先选择返回ack，然后再返回fin。然而握手的过程是不用准备的，所以直接返回了ack+syn

一种传参的写法

一种写法，是将一些id什么的放在页面中，然后需要的时候从js中获取。可是为什么要这样做呢？不是JavaScript能够直接拿到的话，不是可以直接传送了么？

setInterval的使用

今天一个业务的需要，需要不断的望后台发送数据，想了想，使用setInterval来实现

function request(){
    var reqObj = {
            url: 'api/arriversure/sureScan.do',
            data: {
                taskId:taskId
            },
            success: function(data) {
                if(data.statusCode = "0000"){
                    clearInterval(sh);//关闭setInterval
                }
            },
            error: function(data) {
                console.log("确定error");
            },
            fail: function() {
                console.log("确定falils");
            }
        }
        wlbPostData(reqObj);
}

var sh;
sh=setInterval(request,1000);//开启setInterval

CSS3新增伪类

之前需要有总结过这个方面的内容，但是发现并没有完善，很粗糙，所以很有必要重新总结归纳一下。

注意：ie8及以下的版本都不支持CSS3伪类

• element:nth-child(n)
  1）n可以接受具体的值，也可以接受函数像2n+1，值得注意的是n是从1开始的哦。当为函数的时候n则从0开始
  2）n为odd的时候，表示选择单数，为even的时候，表示选择双数元素
• element:nth-last-child(n)
  与上面的：nth-child(n)相似，只是改成了倒数计算，所以我们可以选择后几项

:nth-last-child

• element:last-child选择最后一个元素
• element:only-child
  如果是element唯一的子元素，则选中它
• elem:nth-of-type(n)
  这个和nth-child(n)的区别，第一个是选择父元素下第n个elem元素
  第二个是选择父元素下第n个子元素，并且这个元素的标签名为elem

举个例子：

    
1
    
2
    
3
    
强行插楼！！
    
4
    
5
    
6
    
7
    
8
    
9
    
10
  

.test li:nth-of-type(4){
    background:#f00;
}

nth-of-type

.test li:nth-child(4){
    background:#f00;
}

nth-child

• elem:first-of-type和elem:last-of-type
  不言而喻，选中父元素下第1个/最后一个elem元素。

• elem:only-of-type
  如果父元素下的子元素只有一个elem元素，选中该元素。elem:only-of-type和elem:only-child不同的是，后者父元素下只能有一个子元素；而前者这不一定，只要父元素下只有一个elem标签就行。

个人不成文小结：

• nth开头就是相对于父元素而言，包含type就是指当前选择器所指的元素