三种定义函数的方式
变量声明提升
在函数体内部，声明变量，会把该声明提升到函数体的最顶端。 只提升变量声明，不赋值
arguments
arguments是存储了函数传送过过来实参
Javascript在创建函数的同时，会在函数内部创建一个arguments对象实例.
arguments对象只有函数开始时才可用。函数的 arguments 对象并不是一个数组，访问单个参数的方式与访问数组元素的方式相同
arguments对象的长度是由实参个数而不是形参个数决定的
return 返回值
一个函数实际上就是一个计算过程，计算完成之后的结果就是返回值。
定义函数的返回值：
在函数内部用return来设置返回值，一个函数只能有一个返回值。
同时，终止代码的执行。
所有的自定义函数默认没有返回值；
Return 后面不要换行
getElementsByTagName() 获取某类标签
前面我们可以得到一个盒子 通过 id 获得
getElementById() 只得到一个 盒子
我们想要获取某类标签 比如说所有 的div li span
getElementsByTagName(); 很多个所以是复数 很多个
得到的是一个伪数组。
this 这个 自己的 指向的是 事件调用者
InnerHTML 属于盒子的内容 表单的内容 value
表单自动获得焦点 focus() 选择表单内容 select();
排他思想
数组常用用法
1，push() 后面推进去
console.log(arr.push(8)); 结果是 5 返回改数组的长度
2，unshift() 从数组的前面放入
3，pop() 删除最后一个元素
console.log(arr.pop()); 结果是 12 返回最后一个元素
4，shift() 删除第一个元素
5，concat() 连接两个数组
aa.concat(bb);
6，join() 把数组转换为字符串
arrayObject.join(separator)。参数 separator 可选。指定要使用的分隔符。如果省略该参数，则使用逗号作为分隔符。
7，split() 把字符串转换为数组
stringObject.split(separator,howmany)。参数 separator 可选。指定要使用的分隔符。如果省略该参数，则使用逗号作为分隔符。
howmany 可选。该参数可指定返回的数组的最大长度
DOM节点
nodeType == 1 元素节点
nodeType == 2 属性节点
nodeType == 3 文本节点
DOM节点操作
1，创建节点
var div = document.creatElement(“li”);
2，插入节点
A. appendChild(); 添加孩子 append 添加的意思
意思： 添加孩子 放到盒子的 最后面。
B. insertBefore(插入的节点，参照节点) 子节点 添加孩子
写满两个参数
demo.insertBefore(test,childrens[0]);
放到了第一个孩子的前面
如果第二个参数 为 null 则 默认这新生成的盒子放到最后面。
demo.insertBefore(test,null);
3，移除节点
removeChild() 孩子节点
4，克隆节点
cloneNode();
括号里面可以跟参数 ， 如果 里面是 true 深层复制， 除了复制本盒子，还复制子节点
如果为 false 浅层复制 只复制 本节点 不复制 子节点。
5,节点属性操作
getAttribute(属性) 获取属性
setAttribute(“属性”,”值”);
removeAttribute(“属性”);
内置对象
1， 日期函数 ( Date() )
2，定时器
window.setInterval(“执行的函数”,间隔时间)
关闭定时器 clearInterval(定时器名称); 定时器不再进行
setTimeout(“函数”, 时间 ) 隔多久执行一次函数
setInterval是排队执行的
假如 间隔时间是1秒， 而执行的程序的时间是2秒 上次还没执行完的代码会排队, 上一次执行完下一次的就立即执行, 这样实际执行的间隔时间为2秒
setTimeout延迟时间为1秒执行, 要执行的代码需要2秒来执行,那这段代码上一次与下一次的执行时间为3秒.
按钮不可用
btn.disabled = “disabled” || btn.disabled = true;
因为 button是个双标签 所以要更改他的值， 使用 innerHTML 的，不是value
转换为字符串
2+ “” = “2”
2+”ab” = “2ab”
- String() 转换为字符串
- toString（基数） ; 基数就是进制
var txt = 10;
txt.toString(2) 二进制 1010
获取字符位置方法
charAt，获取相应位置字符（参数： 字符位置）
charCodeAt获取相应位置字符unicode编码（参数： 字符位置）
var txt = “abcedf”;
比如， txt.charAt(4); 索引号一定是从0开始 返回的结果是 d
我们根据我们输入的 位数 返回相应的 字符 。
unicode编码 是我们字符的字符的唯一表示 。
操作字符串
1, concat() 连接字符串
2, slice(“取字符串的起始位置”, [结束位置]) ; [] 可选的
slice(3) 从第3个开始取，一直取到最后
起始位置可以是负数 ， 如果是负数，则是从 右边往左边开始取。
3,substr(起始位置,[取的个数])
substring 始终会把 小的值作为 起始位置 大的值作为结束位置
大小写转换
toUpperCase，转换为大写（参数： 无）
toLowerCase，转换为小写（参数：无）
offset家族
目的： js中有一套方便的获取元素尺寸的办法就是offset家族
offsetWidth offsetHeight
得到对象的宽度和高度(自己的，与他人无关)
offsetWidth = width + border + padding
div { width:220px; border-left:2px solid red; padding:10px;}
div.offsetWidth = 220 + 2 + 20
为什么不用 div.style.width 因为它只能得到行内的数值
offsetLeft offsetTop
就是子盒子到定位的父盒子边框到边框的距离（不包括border）
如果父级都没有定位则以body 为准
这里的父级指的是所有上一级 不仅仅指的是 父亲 还可以是 爷爷 曾爷爷 曾曾爷爷。。。。
offsetParent
返回改对象的父级 （带有定位） 不一定是亲的爸爸
前面学过一个返回父亲(亲的) parentNode 有所区别
如果当前元素的父级元素没有进行CSS定位（position为absolute或relative），offsetParent为body。
如果当前元素的父级元素中有CSS定位（position为absolute或relative），offsetParent取最近的那个父级元素。
offsetTop style.top 的区别
1、最大区别在于 offsetLeft 可以返回没有定位盒子的距离左侧的位置。 而 style.top 不可以 只有定位的盒子 才有 left top right
2、offsetTop 返回的是数字，而 style.top 返回的是字符串，除了数字外还带有单位：px。
style.left = 300px parseInt（300px） 结果 300
parseInt（style.left）+ parseInt（style.left）
3、offsetTop 只读，而 style.top 可读写。
4、如果没有给 HTML 元素指定过 top 样式，则 style.top 返回的是空字符串。
5、最重要的区别 style.left 只能得到 行内样式 ，offsetLeft 随便
事件对象
在触发DOM上的某个事件时，会产生一个事件对象event，这个对象中包含着所有与事件有关的信息。所有浏览器都支持event对象，但支持的方式不同。
常见属性
pageX clientX screenX 区别
screen X screenY
是以我们的电脑屏幕 为基准点 测量
pageX pageY
以我们的 文档 （绝对定位） 的基准点 对齐 ie678 不认识
clientX clientY
以 可视区域 为基准点 类似于 固定定位
常用事件
onmouseover onmouseout onclick
div.onmouseover 只触发一次
div.onmousemove 每移动一像素，就会触发一次
onmouseup 当鼠标弹起
onmousedown 当鼠标按下的时候
防止选择拖动
我们知道 按下鼠标然后拖拽可以选择文字 的。
清除选中的内容
window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
scroll家族
scrollTop 被卷去的头部
scrollLeft 被卷去的左部
怎么得到scrollTop
我们学习一个事件 ： 页面滚动效果
window.onscroll = function() { 页面滚动语句 }
谷歌浏览器 和没有声明 DTD <DOCTYPE > ： document.body.scrollTop;
火狐 和其他浏览器
document.documentElement.scrollTop;
ie9+ 和 最新浏览器 都认识
window.pageXOffset; pageYOffset （scrollTop）
兼容性写法：
var scrollTop = window.pageYOffset ||document.documentElement.scrollTop|| document.body.scrollTop || 0;
scrollTo(x,y)
window.scrollTo(15,15);
方法可把内容滚动到指定的坐标。
格式：scrollTo(xpos,ypos)
xpos 必需。要在窗口文档显示区左上角显示的文档的 x 坐标。
ypos必需。要在窗口文档显示区左上角显示的文档的 y 坐标
因为我们的网页大部分都没有水平滚动条，所以，这个x 不太常用。
client 家族
client 可视区域
clientWidth： width + padding 不包含border
window.onresize 改变窗口事件
阻止冒泡的方法
标准浏览器 和 ie浏览器
w3c的方法是event.stopPropagation()
IE则是使用event.cancelBubble = true
三个取整函数
这三个函数都是 数学函数
Math
- Math.ceil() 向上取整 天花板
比如说 console.log(Math.ceil(1.01)) 结果 是 2
console.log(Math.ceil(1.9)) 结果 2
console.log(Math.ceil(-1.3)) 结果 是 -1 - Math.floor() 向下取整 地板
比如说 console.log(Math.floor(1.01)) 结果 是 1
console.log(Math.floor(1.9)) 结果 1
console.log(Math.floor(-1.3)) 结果 是 -2 - Math.round() 四舍五入函数
console.log(Math.round(1.01)) 结果 是 1
console.log(Math.round(1.9)) 结果 是 2
js 常用 访问 CSS 属性
我们访问得到css 属性，比较常用的有两种：
利用点语法
box.style.width box.style.top
点语法可以得到 width 属性 和 top属性 带有单位的。 100px
但是这个语法有非常大的缺陷， 不变的。
后面的width 和 top 没有办法传递参数的。
var w = width;
box.style.w-
利用 [] 访问属性
语法格式: box.style[“width”]
元素.style[“属性”];
console.log(box.style["left"]);最大的优点 ： 可以给属性传递参数
得到css 样式
兼容写法
