- 作用域 js只有函数作用域 没有块级作用域
<html>
<head>
<script type="text/javascript">
function buttonInit(){
for(var i=1;i<4;i++){
var b=document.getElementById("button"+i);
b.addEventListener("click",function(){ alert("Button"+i);},false);
}
}
window.onload=buttonInit;
</script>
</head>
<body>
<button id="button1">Button1</button>
<button id="button2">Button2</button>
<button id="button3">Button3</button>
</body>
</html> 点击按钮都是button4 因为事件绑定之后 i=4
修改作用域：
1. with：
with(location){
var url=href+qs;
}with讲location放到with语句的开始。
此时 href相当于location.href
2. catch 如同with try-catch时 如果try出错 会跳到catch 然后catch会获得错误信息 catch(exception)
3. eval
2.this call和apply
function getMax2(arr){
return Math.max.apply(null,arr);
}获得数组最大值
Array.prototype.push.apply(arr1,arr2)数组arr2的内容合到arr1后面
3.css position : absolute fixed relative(相对于元素的正常位置设置top等 不影响相邻元素) static(默认的 忽略left right等) float;
4. css display: none block(块级元素 自带前后换行) inline(行级元素) inline-block(行内块 该元素是inline 但是其内部元素是block) list-item(列表元素) table(块级table) inline-table(类似inline-block) 一些有关table的display inherit(继承父元素)
5. flex
6.bfc Block fomatting context BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
规则：
- 内部的Box会在垂直方向，一个接一个地放置。
- Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
- 每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
- BFC的区域不会与float box重叠。 BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
- 计算BFC的高度时，浮动元素也参与计算
产生bfc的元素： - 根元素
- float属性不为none
- position为absolute或fixed
- display为inline-block,table-cell, table-caption, flex, inline-flex
- overflow不为visible
一些例子： - 自适应两栏布局（左边元素float 右边元素消除float）
.left {
width: 100px;
height: 150px;
float: left;
background: #f66;
}
.right{
height: 200px;
overflow:hidden;
background: #fcc;
}- 清除内部浮动 (消除float来使父元素计算高度时包括float元素的高度)
.par {
border: 5px solid #fcc;
width: 300px;
overflow: hidden;
}
.child {
border: 5px solid #f66;
width:100px;
height: 100px;
float: left;
}- 防止垂直 margin 重叠 （外加一个块包装并消除float）
.wrap {
overflow: hidden;
}
p {
color: #f55;
background: #fcc;
width: 200px;
line-height: 100px;
text-align:center;
margin: 100px;
}
对应html:
<p>Haha</p>
<div class="wrap">
<p>Hehe</p>
</div>7.盒模型： width和height是最里面内容 外面是padding 再外面 border 再外面 padding
box-sizing : box-sizing属性可以为三个值之一：content-box（default），border-box，padding-box 还有inherit。
- content-box，border和padding不计算入width之内
- padding-box，padding计算入width内
- border-box，border和padding计算入width之内，其实就是怪异模式了~
8. 行
line-height:有5种： 百分比(font-size*百分比，这个值会保留下来，被子元素继承) 长度（固定的px值） normal（保存1.2这个比例 每个子元素的line-height都是子元素自身的font-size*1.2） 纯数字（等同于normal） inherit
行间距： line-heght 减去 font-size 的一半 当line-height小于font-size时 会挤在一起
vertical-align: 设置垂直对齐
9. 换行： whitespace：处理空白字符 值： pre(空白会被浏览器保留。其行为方式类似 HTML 中的 pre 标签) nowrap(不会换行 遇到br才换) pre-wrap(保留空格正常换行) pre-line(合并空白符序列，但是保留换行符) word-break: normal 使用浏览器默认的换行规则。break-all 允许在单词内换行。keep-all 只能在半角空格或连字符处换行。
10. transform: 应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。 要加前缀 不会影响相邻元素的布局
11. transition:
transition-property 规定设置过渡效果的 CSS 属性的名称。
transition-duration 规定完成过渡效果需要多少秒或毫秒。
transition-timing-function 规定速度效果的速度曲线。
transition-delay 定义过渡效果何时开始。
animation 与keyframe keyframe设置百分比动作 animation：
@keyframes 规定动画。
animation 所有动画属性的简写属性，除了 animation-play-state 属性。
animation-name 规定 @keyframes 动画的名称。
animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0。
animation-timing-function 规定动画的速度曲线。默认是 “ease”。
animation-delay 规定动画何时开始。默认是 0。
animation-iteration-count 规定动画被播放的次数。默认是 1。
animation-direction 规定动画是否在下一周期逆向地播放。默认是 “normal”。
animation-play-state 规定动画是否正在运行或暂停。默认是 “running”。
animation-fill-mode 规定对象动画时间之外的状态。
12. insertbefore 与 appendChild 添加元素 前 和 后 二者都可以移动元素位置
insertbefore可以设置第二个参数 在目标元素前加 如果为null 则在最后加
createelement创建节点
createAttribute() 来创建新的属性节点，并使用 setAttributeNode() 把该节点插入一个元素中
3万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
