Hank's Blog

讨论完Array对象的方法，再来讨论一下String对象的方法，两者拥有部分相似的方法：concat()、indexOf()、lastIndexOf()、slice()、valueOf()。这里不再赘述。

提取字符串

• substr() 语法string.substr(start,length)。如果start是负数，那么该参数声明从字符串的尾部开始算起的位置。如果 length 为 0 或负数，将返回一个空字符串。
• substring() 语法string.substring(start,end)。使用 start 和 end 两者中的较小值作为子字符串的起始点。如果 start 或 end 为 NaN 或者负数，那么将其替换为0。

substr()、substring()、slice() 三者都不改变原数组或字符串的值。

各类选择器的优先级

1. important声明 1000
2. ID选择器 100
3. 类选择器 10
4. 伪类选择器 10
5. 属性选择器 10
6. 标签选择器 1
7. 伪元素选择器 1
8. 通配符选择器 0

属性选择器 = 伪类选择器

1
2

a[src^="https"] { color: green; }
:last-child { color: red; }

伪类选择器 > 相邻选择器

1
2

:last-child { color: green; }
p~ul { color: blue; }

相邻选择器 = 子选择器 = 后代选择器

1
2
3

p~ul { color: red; }
body > p { color: green; }
body p { color: blue; }

后代选择器 > 标签选择器

1
2

body p { color: blue; }
p { color: green; }

事件通常是在由用户和浏览器进行交互时触发，其实通过 Javascript 也可以在任何时间触发特定的事件。这种能力在测试web应用程序的时候，模拟事件是非常有用的。

事件模拟三步

1. 通过 document.createEvent() 方法创建 event 对象，接收一个参数，即表示要创建的事件类型的字符串：
   • UIEvents：通用的 UI 事件，鼠标事件键盘事件都是继承自UI事件，在 DOM3 级上使用的是 UIEvent 。
   • MouseEvents：通用的鼠标事件，在 DOM3 级上使用的是 MouseEvent 。
   • MutationEvents：通用的突变事件，在 DOM3 级上使用的是 MutationEvent 。
   • HTMLEvents：通用的 HTML 事件，在 DOM3 级上还没有等效的。

2. 在创建了event对象之后，还需要使用与事件有关的信息对其进行初始化。每种类型的event对象都有一个特殊的方法，为它传入适当的数据就可以初始化该event对象。用 event.init……() 此类行的方法。
3. 触发事件。这需要使用 dispatchEvent()方法，接收一个参数，即表示要触发的 event 对象。

在实际的 JavaScript 代码编写中，经常会遇到处理数组的需求，因此在这里罗列一下原生的数组操作方法，常用的方法在前。

头尾增删

添加

• push() 向数组的末尾添加一个或更多元素，并返回新的长度。
• unshift() 向数组的开头添加一个或更多元素，并返回新的长度。

1
2
3

var arr = [1, 2, 4, 5]
console.log(arr.push('2')) // 5
console.log(arr) // [1, 2, 4, 5, "2"]

数组中已经存在两个可以直接用来重排序的方法：reverse() 和 sort() 。

reverse()

reverse() 直接颠倒数组的顺序，改变原数组。

1
2
3

var arr = [0, 1, 5, 10, 15]
arr.reverse()
console.log(arr) // [15, 10, 5, 1, 0]

这个方法的作用很直观，但是很明显不够灵活，因此才有了 sort() 方法。

事件委托是什么

事件委托，又叫事件代理，JavaScript高级程序设计上讲：事件委托就是利用** 事件冒泡 **，只指定一个事件处理程序，就可以管理某一类型的所有事件。

为什么需要事件委托

1. 在 JavaScript 中，添加到页面上的事件处理程序数量将直接关系到页面的整体运行性能。如果用事件委托，与 dom 的操作就只需要交互一次，这样就能大大的减少与dom的交互次数，提高性能。
2. 每个函数都是一个对象，是对象就会占用内存，对象越多，内存占用率就越大，自然性能就越差了。如果用事件委托，那么我们就可以只对它的父级进行操作，这样就需要一个内存空间就够了，提高性能。

网上看到这样一个问题：

1
2
3
4
5
6
7
8
9
10

var objArr = [{
        'a': 999,
        'b': 888
    }, {
        'a': 123,
        'b': 345,
        'c': 345
    }, {
        'a': 666
    }]

请把以上的对象数组，根据数组每项属性个数的多少排序，使其转化为

1
2
3
4
5
6
7
8
9
10

var objArr = [{
        'a': 666
    },{
        'a': 999,
        'b': 888
    },{
        'a': 123,
        'b': 345,
        'c': 345
    }]

为什么要清除浮动

浮动是魔鬼，会脱离文档流，从而破坏原有的文档结构，最典型的例子就是造成父元素的高度塌陷。

清除浮动的方法

清除浮动有多种方法，这里讲三种方法，个人推荐第三种。

添加新元素、定义 clear:both

1
2
3
4
5
6

<div class="outer">
    <div class="div1">1</div>
    <div class="div2">2</div>
    <div class="div3">3</div>
    <div class="clear"></div>
</div>

1
2
3
4
5
6

.clear{
	clear:both; 
	height: 0; 
	line-height: 0; 
	font-size: 0;
}

margin 为负值是符合 W3C 标准的，完全没有兼容性问题，另外需要一提的是 padding 和 border 不支持负值。存在就是有意义的，那么负边距究竟有什么样的作用？

在普通文档流中的效果

那些没有脱离文档流的元素，其在页面中的位置是跟随者文档流的变化而变化的。看下面这幅图：

现在我们把上图中的块状元素、行内元素以及inline-block元素都设一个负边距 margin:-10px; 看看会发生什么：

注意到根据文档流的渲染顺序，前面的元素的会被后面的元素覆盖10px，另外顶部的块状元素也向上隐藏了10px。
由此可知，在文档流中，元素的最终边界是由margin决定的，margin为负的时候就相当于元素的边界向里收，文档流只认这个边界，不会管元素的实际尺寸是多少。

实际开发中，我们会遇到需要处理当前页面 URL 的问题。

获取 URL 参数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

var urlPara = （ function() {
    var url = window.document.location.href.toString()
    var urlSlice = url.split('?')
    if (typeof(urlSlice[1]) == 'string') {
        urlSlice = urlSlice[1].split('&')
        var getPara = {}
        var urlPara = []
        for (var i = 0; i < urlSlice.length; i++) {
            urlPara = urlSlice[i].split('=')
            getPara[urlPara[0]] = urlPara[1]
        }
        return getPara
    } else {
        return {}
    }
}）()