目录
引入JavaScript文件
——in 运算符
——for in 语句
——instanceof语句
数据类型
——数据类型转换
对象分类
创建函数对象
——函数方法
方法
全局变量
prototype原型
垃圾回收
内建对象
——数组
————数组方法
————数组遍历
——Date对象
——Math工具类
正则表达式
——创建正则表达式对象
——正则表达式语法
——支持正则表达式的四个String方法
DOM
——节点
————节点属性
——事件
——事件绑定
——DOM操作HTML
——DOM操作CSS
——事件冒泡
——事件委托
——滚轮
——键盘
BOM
——Navigator
——History
——Location
————属性
————方法
——Window
类操作
JSON
JavaScript
- 解释型脚本语言
- JavaScript由 ECMAScript，DOM，BOM组成
- JS严格区分大小写
JS代码需要写到 <script> </script> 标签中
document.write(""); 向<body>中写内容
引入JavaScript文件
<script type="text/javascript" src="path.js"></script>
基本语法
和Java语言一样
in 运算符
"属性" in 对象 用于判断某一对象是否有某一属性，返回true或false
for in 语句
for(var a in obj){
console.log("n");
} 可以输出obj中的所有属性
instanceof语句
对象 instanceof 构造函数
用于判断对象是否由某一构造函数构造，是返回true，否则返回false
数据类型
基本数据类型
String 单引号双引号都支持
Number 当数字超过最大值则返回一个Infinity
Infinity 正无穷
-Infinity 负无穷
NaN 非数（typeof还是Number）
Boolean
Null （typeof为Object类型）
Undefined
引用数据类型
Object
数据类型转换
将其他数据类型转换为String类型
- 引用toString()方法
- 调用String()函数
将其他数据类型转换为Number类型
- 使用Number()函数（只能是纯数字）
如果非数字或者Undefined则返回NaN
如果是空字符串或者Null则返回0 - parseInt()函数（只能取整数），parseFloat()
专门对付字符串
praseInt(a,10); 10代表10进制
将其他数据类型转换为Boolean类型
- 使用Boolean()函数
除了0、NaN、空串、Null和Undefined，其他都是true
\u4040 \u加上四位编码，可以打出Unicode中的任意字符
undefined衍生自null，所以两个值 == 判断时，返回true
NaN不相等于任何值，包括他本身（可以用isNaN()函数来判断）
=== 表示是否全等，包括数据类型
对象分类
- 内建对象（比如String）
- 宿主对象（比如 BOM 和 DOM）
- 自定义对象
如果读取的是对象中没有的属性，不会报错，而是返回undefined
delete obj.name; 删除属性
创建对象时，给对象属性赋值
var obj = {属性1:值1,属性2:{},属性3:值3};
创建函数对象
var fun = new Function();
函数对象具有所有普通对象的所有功能
function 函数名(a,b){ 函数的声明格式,a,b不检查数据类型
return c;
}
立即执行函数
(function(a,b){
return a+b;
})(12,23);
函数方法
fun.apply(obj); 可以改变函数内的this指针
fun.call(obj,2,3); 可以将函数原本的实参在this指针后依次传入
fun.apply(obj,[2,3]); apply在传入实参是要将实参封装为一个数组
arguments 就是用来封装实参的数组
arguments.callee 对应的就是当前在使用的函数对象
方法
obj.doSomething = function(){}
全局变量
全局变量中有一个全局对象window
所有的全局变量和方法都会设置为他的属性和方法
prototype原型
所有实例化对象都可以访问的一个共同区域
类.__proto__.属性(或方法) = ;
每个对象都hasOwnProperty()方法
可以用于检查是否拥有某个不是来自于prototype的属性或方法
hasOwnProperty()方法 存在于 原型对象 中的 原型对象 中
垃圾回收
JS有自动垃圾回收机制
内建对象
数组
var arr = new Array(10); 代表长度为10
var arr = new Array(10,20,30);
new Array的方式其实不常用，因为JS里面的数组不是定长的
var arr = [10,20,30];
数组方法
push(1,2,3); 向数组末尾添加一个或多个元素，并返回新的长度
unshift(1,2,3); 向数组开头添加一个或多个元素，并返回新的长度
pop(); 删除最后一个元素，并返回该元素
arr.slice(0,5); 截取开始位置到结束位置，并返回一个新数组
arr.splice(0,2,a); 从开始位置删除指定长度的元素，
a为插入到被删除元素
会影响到原数组，并将被影响的元素返回
arr.concat(); 连接两个或多个数组，不会对原数组产生影响
arr.jion("a"); 将数字中的元素连成一个字符串，以a分隔开，默认是“,”
数组遍历
forEach方法(兼容性不高)
arr.forEach(function(a,b,c){
consoloe.log(a + b + c);
});
a,b,c分别为正在遍历的元素，元素的索引，正在遍历的数组
Date对象
var d = new Date("月/日/年 时:分:秒")；
d.getDate(); 获取日
d.getDay(); 获取周几(数字0-6,0是周日)
d.getMonth(); 获取月份(数字0-11)
d.getFullYear(); 获取年份
d.getHours(); 获取时
d.getMinutes(); 获取分
d.getSeconds(); 获取秒
d.getTime(); 获取时间戳(单位毫秒）
Math工具类
abs(x); 返回x的绝对值
ceil(x); 向上取整
floor(x); 向下取整
round(x); 四舍五入
random(); 生成0-1之间的随机数
max(1,2); 获取最大值
min(1,2); 获取最小值
pow(x,y); 返回x的y次幂
sqrt(x); 开根
正则表达式
创建正则表达式对象
var reg = new RegExp("正则表达式","匹配模式"); （可以传参，更加灵活）
reg = /正则表达式/匹配模式;
正则表达式语法
. 任意字符
a|b|c a或b或c
[a-z] a到z任意一个
[ab] a或b
[A-z] 任意字母
[0-9] 0-9数字
[^ab] 除了a,b其他都可以
\ 转义字符(注意在字符串中\本身就是转义！)
\w 任意字母数字
\d 任意数字0-9
\s 空格
\b 单词边界
\大写 和小写相反
量词
a{3} 正好连续出现3次a
a{1,3} 正好连续出现1-3次a
a{3,} 正好连续出现3次以上a
a+ 至少出现一次a
a* 0个或多个
a? 0个或1个
^a 以a开头
a$ 以a结尾
匹配模式
可以是“i”,或者“g”，匹配模式同时可以设置多个
i 意为忽略大小写
g 全局匹配模式
正则表达式检测
reg.test(); 用于检测一个字符串是否复合正则表达式的规则
支持正则表达式的四个String方法
可以传入一个正则表达式作为参数
split(x); （默认全局匹配模式）以x为分界将字符串分割
search(x); （不支持全局匹配模式）搜索字符串是否有自定内容，搜素到返回第一个位置
match(x); （手动设置全局匹配模式）可以根据将符合的内容提取出来，返回一个数组
replace(x,a); （手动设置全局匹配模式）可以将指定内容替换为a
DOM
- Document Object Model
节点
- 构成HTML文档的最基本的单元
节点分类
文档节点、元素节点、属性节点、文本节点
节点属性
事件
- 文档或浏览器窗口中发送的一些特点的交互瞬间
事件绑定
btn.onclick = function(){}
这种单击事件绑定的函数，称为单击响应函数
window.onload = function(){
//可以用于控制页面加载完毕，才可以执行JS代码
}
DOM操作HTML
获取对象
document.getElementById("id"); 通过id获取 一个 对象
document.getElementsByTagName(); 通过标签名获取 一组 对象
document,getElementsByName(); 通过name获取 一组 对象
获取标签内的内容
对象.innerHTML; 获取标签中的内容（对于单目标签无效）
对象.innerText; 获取标签中的文本内容（去除html标签）
获取属性
对象.属性名
对象.className
获取子节点
方法
getElementsByTagName(); 返回当前对象的指定 后代 节点
属性
对象.childNodes; 获取所有子节点（包括其中的文本节点）
对象.children; 获取所有子节点（不包括文本）
对象.firstchild; 包括空白
对象.firstElementChild; 不包括空白（兼容性不高）
对象.lastchild; 包括空白
获取父节点和兄弟节点
parentNode 当前节点的父节点
previousSibling 前一个兄弟节点(如果节点间有空白文本，会获取到空白文本)
previousElementSibling; 前一个兄弟元素(兼容性不高)
nextSibling 后一个兄弟节点
document.body;
document.documentElement; html根标签
document.all; 所有标签
getElementsByClassName(); 获取class的标签（兼容性不高）
document.querySelector();
通过css选择器来获取对象（缺点：只会返回一个标签）
document.querySelectorAll();
返回所有标签对象（只有一个标签，也会返回一个数组）
节点的增删改
createElement(""); 创建元素节点,str中传入要传入的标签类型
createTextNode("")；
创建文本节点,str中传入文本内容（可以用innerHTML代替）
appendChild(); 向父元素中加入一个子节点
insertBefore(插入节点,指定节点);
在指定子节点前插入子节点(父节点来调用)
replaceChild(新节点,旧节点); 替换子节点
removeChild(节点); 删除子节点
点击超链接之后，会跳转页面，即便是留在当前页面，这个是超链接的默认行为
可以在绑定响应函数后面加上 return false 语句来取消行为
DOM操作CSS
元素.style.样式名 获取的是内联样式，而不是样式表中的
元素.style.样式名 = 值； 修改的是内联样式，优先级高
样式名中含有"-"的名字，在JS中是不合法的，改成驼峰式命名即可
例如 background-color 改成 backgroundColor
getComputedStyle(对象,null).样式名; 获取当前生效样式(IE8不支持)
null为伪元素，一般填null
对象.currentStyle.样式名 IE8获取当前生效样式
可以写一个函数，用 if(window.getComputedStyle) 来判断在不同浏览器下使用哪
一个获取方式，window 绝对不可以少，如果缺省 getComputedStyle 为一个变
量，而有 window 则为一个属性，如果属性找不到，返回 undefined，而变量找
不到会报错导致程序异常
clientWidth 可见宽度，只有数字，没有px，可以用于计算
clienHeight 可见高度，包括内容区和内边距，只读属性
offsetWidth 包括内容区，内边距，边框
offsetParent 找最近的开启定位的祖先元素
offsetLeft 相对的定位左偏移量
scrollHeight 总的滚动区域的高度
scrollTop 当前滚动距离里顶部的距离
对象.onscroll = function(){} 当滚动条滚动时触发事件
对象.onmousemove 鼠标移入对象时，事件触发
对象.onmousedown 鼠标按下
对象.onmouseup 鼠标松开
event.clientX 获取鼠标水平坐标(IE8不支持)
event.clientY 获取鼠标垂直坐标
window.event.clientX IE8支持
event.pageX 相对于页面的水平距离（不是相对于视口,IE8不支持）
事件冒泡
- 事件的向上传导，后代事件的同类触发事件向祖先元素传导
event.cancelBubble = true; 取消冒泡
事件的冒泡分为 由内向外 和 由外向内
由外向内冒泡 接近目标 的过程被叫做 捕获阶段
W3C综合了两种，将事件传播分为3个阶段
- 捕获阶段
- 目标解读
- 冒泡阶段
事件委托
- 利用事件冒泡的原理，将事件绑定给元素共同的祖先元素
event中的target表示的是触发事件的对象
event.target.className == 'li'
对象.addEventListener("click",fuction(){},false); 添加响应事件(IE8不支持)
第一个参数为事件类型
第二个参数为响应函数
第三个参数为是否在捕获阶段触发
attachEvent("onclick",function(){}) IE8支撑
当拖拽一个网页内容时，浏览器会默认搜索这个内容，通过return flase取消默认行为(IE8不支持)
setCapture(); 开启对事件的捕获（只有IE8支持）
releaseCapture(); 取消对事件的捕获
滚轮
对象.onmousewheel 鼠标滚轮事件(火狐不支持)
对象.DOMMouseScroll 火狐的方式
event.wheelDelta 获取滚动方向（上正下反）(火狐不支持)
event.detail 火狐的方式（下正上反）
滚轮滚动时，滚动条会动是浏览器默认行为，通过return false 取消默认行为
也可以用 event.preventDefault(); 来取消默认行为(IE8不支持)
event.preventDefault && event.preventDefault();
如果存在这个对象方法就使用，没有就不用
键盘
- 键盘事件一般绑定给可以获得焦点的对象或者div
document.onkeydown
document.onkeyup
event.ctrlKey
event.altKey
event.shiftKey
event.keyCode
在onkeydown中使用 return flase 可以取消在input里面输入的默认行为
可以用于限制用户输入特定内容
BOM
- 浏览器对象模型
BOM对象
- Window Navigator Location History Screen
BOM对象都是作为window对象的属性保存的
由于window是全局对象，可以不写“window.”直接引用
Navigator
navigator.userAgent 判断浏览器的信息(IE8不支持)
if("ActiveXObject" in window) 判断是否为IE浏览器
History
history.length 记录历史访问记录的数量
history.back(); 历史回退按钮
history.forward(); 历史前进按钮
history.go(1); 跳转到指定页面，负数为向后跳转
Location
location 获取完整网址
属性
方法
location.reload(true); 刷新，传入true则为强制清空缓存刷新
location.replace("");
传入一个网址，跳转到该网址，并且不会生成历史记录，不能回退
Window
alert(); 向浏览器发出警告框
confirm(""); 确认或者取消提示框，返回boolean类型
console.log(); 向控制台输出内容
setInterval(fuction(){},1000);
定时器，单位为毫秒，每隔一定时间执行一次函数
返回一个Number类型，作为区分多个定时器的标识
clearInterval(); 传入一个Number类型，关闭指定定时器
关闭空定时器不会报错
setTimeout(function(){},1000); 延时调用
clearTimeout(timer); 关闭延时调用
类操作
由于每次都去修改样式内容显得 JS 代码十分冗长，因此先写好一个CSS样式表
通过JS修改对象对应的 CSS 样式表即可，这样可以大幅度减少JS代码，但是这
样会导致前面的 CSS 样式表被覆盖，不过我们可以利用拼串的方式来解决，因
为一个对象同时可以有多个class属性
对象 += " newClass";
newClass前必须有空格，用于CSS分隔多个class属性
利用正则表达式判断class列表中是否已经含有该CSS样式表，防止重复添加
JSON
- JavaScript Object Notation JS对象表示法
- 本质就是特殊格式字符串
属性名必须加双引号
JSON.parse(); 将JSON字符串转换为JS对象
JSON.stringify(); 将JS对象转换为JSON字符串(IE7不支持)
?