JavaScript笔记

JavaScript组成

1.ECMAScript
2.BOM 浏览器对象
3.DOM document文档
外部引入js文件

<script type="text/javascript" src="demo.js"></script>

注意：如果这个script标签是为了引入外部文件，那它内部就不能再写代码了

---

JavaScript变量

JS数据类型：

1. 基本数据类型
   <1>数字 number
   <2>字符串，可以单引号也可以双引号
   <3>布尔值 boolean
   <4>特殊数据类型：null，undefined
2. 复合数据类型

---

JS变量声明：

1. 使用关键字var进行声明，可以同时定义多个变量
   var name= 'xx',age = 18
   标志符的规则：由数字、字母、下划线和$组成，不能以数字开头，区分大小写
2. 可以使用typeof()函数查看变量类型

---

JS运算符：

算数运算符

1. 任何类型的数据和字符串做相加的时候，其他数据类型会自动转换为字符串类型，算式会变成字符串拼接。
2. 仍和数据除了和字符串做相加运算之外，与NAN做算数运算结果都是NAN
3. 字符串除做加法运算之外，对于其余运算，如果是纯数字字符串，就转成数字，否则就转成NAN

一元运算符

1. a++
2. ++a
3. –a
4. a–

关系运算符

1. == ,!=,>=,<=,>,<, === , !==
2. 关系运算符为非数值的时候，遵从以下比较
   <1>如果两个操作数都是字符串，则比较字符串对应的编码值
   <2>如果两个操作数有一个为数值，则将另一个转成数值，再进行数值比较
   <3>在等于和不等的比较小，如果操作数为布尔值，则将false转成0，true转成1
   <4>如果一个操作数为字符串，在比较之前将它转成数字再比较
   <5>如果一个操作数为NaN，== 返回false，!=返回true，NaN==NaN也是false
   <6>对于全等和全不等，只有值和类型都一样采返回true

逻辑运算符

1. &&、||、!

---

---

JS数据类型转换

1. 其他数据类型除了和字符串做相加操作以外，与数字类型做算数运算的时候，其他数据类型都会自动转换成数字，然后再运算。
2. 特殊数字类型中，true转换成1，null转换成0，false转换成0
   强制数据类型转换
3. 通过Boolean()函数将表达式转换为布尔值。数字0转成false，非0转为true； 空字符串专程false，非空专程true；null与undefined转成false
4. 通过Number()函数将别的数据类型转成数字，true转成数字1，false转成数字0；纯数字字符串转成对应数字，非数字字符串专程NAN；null转成0，undefined转成NAN
5. 使用parseInt()函数将其他数字类型转成数字，与number不同的是，它可以截取整数和取整。例如，它可以将20a转成20
6. 使用parseFloat()函数将其他数字类型转成数字
7. 对于除数为0的情况，在JS中计算得到Infinity或者-Infinity

---

JS三大结构

顺序结构:

较为简单，不在赘述

选择结构:
if-else语句：

if(condition){
	代码
}
else if(condition){
	代码
}
else{
	代码
}

switch语句：

switch(表达式){
	case 常量1:
		语句1；
		break;
	case 常量2：
		语句2；
		break；
	default:
		语句3;
		break;
}

三目运算符：

表达式1?表达式2:表达式3

循环结构：
while循环：

while(表达式){
	循环语句;
}

do-while循环:

do{
	循环语句;
}while(表达式);

for循环:

for(表达式1;表达式2;表达式3){
	循环语句;
	}

---

函数：

函数分为内置函数和自定义函数，自定义函数的语法如下：
无参函数的声明：

function 函数名(){
	函数体;
}

有参函数的声明：

function 函数名(形参){
	函数体;
}

参数个数不确定的情况下函数的声明：
在函数内部都有一个内置的数组arguments，它可以储存函数传入的所有参数。
arguments.length可以输出参数的参数；
可以用对应的下标对该数组进行随机访问。

函数的返回值:
使用return+想要返回的东西就可以了，return会结束这个函数。
事件驱动函数：
和页面交互过程中调用的函数，叫做事件驱动函数。下述函数表示页面加载完成后进行动作。

window.onload = function(){
	代码
}

---

数组

数组的定义：

1. var arr = new Array(元素1,元素2...);
2. var arr = Array(元素1,元素2...);
3. var arr = [元素1,元素2...];

注意：如果使用new Array(n)方式创建数组，且括号中只有一个数字，那就说明创建了一个长度是n的数组

---

数组的属性和遍历

数组长度：

arr.length#该属性可以修改，不是只读的

数组访问和赋值：

1.通过下标遍历访问
for(var i = 0; i < arr.length;i++){
	arr[i]
}
2. for...in进行遍历
for(var i in arr){
	arr[i]
}

数组的方法
1.栈方法：

var result1 = arr.push()#将元素添加到数组末尾,返回数组的长度
var result2 = arr.pop()#将元素从数组尾部取出，返回取出的元素

2.队列方法：

1.进队列：
arr.push()
2.出队列：
arr.shift() #从头部取出一个元素，返回取出的元素
3.进队列
arr.unshift(参数...) #从数组的头部插入元素，参数个数随意，返回数组的长度

3.concat方法：

arr1.concat(arr2)#讲两个数组合并成一个新的数组，返回合并好的新数组，arr1和arr2的元素不会发生改变。

4.slice方法：

arr.slice(start,end)#基于当前数组获取指定区域元素并创建一个新数组，原数组不变。

5.splice方法：

arr.splice(参数1，参数2，参数3)#返回截取出来的元素

1.参数1代表截取的开始下标
2.参数2代表截取的长度
3.参数3代表在截取的开始下标位置要插入的元素，参数3不是必选项
6.join方法

arr.join(拼接符)#使用拼接符将数组拼接成一个字符串

ECMA新增方法

arr.indexof(元素,index) #查找元素	
arr.forEach(function(item,index,array){
	item 表示当前遍历到的元素
	index 表示当前遍历到的下标
	array 表示当前数组
})
newArr = arr.map(function(item,index,array){
		操作
	})
返回操作后得到的新的数组
var x = arr.reduce(function(pre,next,index,array){
	pre 上一次遍历return的值
	next 当前遍历到的元素
	return 一个值
	})#归并，返回最后一次return的值
var x = arr.filter(function(item,index,array){
	return item > 30;
	})#过滤，找出所有大于30的元素
var x = arr.some(function(item,index,array){
	return 条件
	})#判断数组中是否有一个元素满足条件，arr.every则是判断数组中是否所有元素都符合条件

二维数组

数组中的元素也是数组，那么这个数组就是二维数组

数组排序

1.逆向排序（将数组元素颠倒）

arr.reverse()

2.sort(将元素从小到大排序，默认按字符串排序的，sortby是一个比较函数)

arr.sort(sortby)

字符串

字符串是不可以改变的

创建字符串

var str = new String("string")
var str = String("string")
var str = "string"

访问字符串中的字符

String.charAt(index)
String[index]

字符串常见方法

显示相关函数

doucument.write()中使用

String.big() //大号字体显示
String.blink() //闪动字符串
String.bold() //粗体显示字符串
String.fixed() //以打字机文本显示字符串
String.strike() //使用删除线显示字符串
String.fontcolor() //使用指定颜色显示字符串
String.fontsize() //使用指定尺寸来显示字符串
String.link() //把字符串显示为链接
String.sub() //把字符串显示为下标
String.sup() //把字符串显示为上标

其他函数

1.charAt(index)#返回index处的元素
2.charCodeAt(index)#返回ASCII码值
3.fromCharCode(任意个ASCII码值)#返回任意个ASCII码对应的字符所组成的字符串
4.str1.concat(str2)#连接字符串
5.str.indexOf(substr,start)#在字符串中查找子串，找到就返回第一次出现的位置，没查找到就是-1
6.str.lastIndexOf(substr)#找最后出现的子串的位置
7.str.search(substr)#可以使用正则表达式
8.str.replace(匹配的字符串/正则表达式，新的字符串)#用新的穿替换旧的串
9.str.substring(start,end)
10.str.split(分隔符，生成数组的长度)#返回分割的子串的数组，第二个参数可以不用。
11.toLowerCase()
12.toUpperCase()

---

ECMA5严格模式

在作用域中声明"use strict"，就让这个作用域采用严格模式

---

Math对象

Math.round()#四舍五入
Math.random()#返回0-1之间的随机数
Math.max()#返回较大数
Math.min()#返回较小数
Math.abs()#返回绝对值
Math.ceil()#向上取整
Math.floor()#向下取整
Math.pow(x,y)#x的y次方
Math.sqrt()#开平方
Math.sin(弧度)
Math.cos(弧度)
Math.tan(弧度)
Math.PI = 180弧度

---

JS对象

对象的创建

1.var person = new Object()
#给对象添加属性
person.name = 'XXX';/person["name"] = 'xxx'
#给对象添加方法
person.showName = function(){};/person["showname"] = function(){};
#删除对象的属性
delete(person.name);
2.var persion = Object();
3.var person = {};

日期对象

日期对象的创建

var d = new Date(参数);
#参数类型可以是"2015/08/22"、"2015-08-22"、(2015,04,13,14,34),从1970年开始到现在的毫秒数

日期对象的方法
1.格式化方法

date.toDateStrng();
date.toTimeString();
date.toLocaleDateString();
date.toLocaleTimeString();
date.toUTCString();

2.获取日期的方法

date.set/getDate()
date.getDay()
date.set/getMonth()
date.set/getFullYear()
date.set/getHours()
date.set/getMinutes()
date.set/getSeconds()
date.set/getMilliseconds()
date.set/getTime()
date.getTimezoneoffset()

3.日期转化函数

Date.parse(参数) //返回参数距离1970年的毫秒数

4.定时函数

setInterval(函数,毫秒数)// 每隔所传参数的毫秒数，就执行一次函数，返回定时器的ID
clearInterval(定时器id) //取消定时器

---

BOM

BOM是Browser Object Model的缩写，BOM就是浏览器的对象模型，使用Window对象来操作浏览器

Window对象的属性和方法

Window对象的方法
window下的所有方法都可以省略window.

1.window.alert(msg) // 警告框
2.window.confirm(msg) //带确定和取消的弹框，确定返回true，取消返回false
3.window.prompt(title,msg) //弹出一个带输入框的警告框，第一个参数代表输入框的标题，第二个参数代表输入框中默认包含的内容。当点击确定的时候，返回值就是输入的内容，点击取消的时候，返回值是null
4.window.open(参数1,参数2,参数3) //第一个参数代表想要打开的url，第二个参数是给打开的新窗口命名，第三个参数代表一串具有特殊意义的字符串，其意义下图1所示：

图1

location 对象

window.location#可以看作浏览器的地址栏输入框
属性
url组成 协议:主机名:端口号/路径?查询字符串#锚点

1.hash //锚点，及url中#后面的部分
2.host  //主机名：端口号
3.hostname //主机名 域名/IP
4.href //整个url
5.pathname //路径名
6.port //端口号
7.protocol //协议
8.search // url中?后面的部分

方法

1.assign(url)//跳转到指定的url
2.reload()//重载当前url,如果传true,则强制从服务器加载
3.replace()//用新的url替换当前url，无痕浏览

history对象

属性

history.length //返回历史记录的条数

方法

1.history.back()#返回上一条历史记录
2.history.forward()#返回下一条记录
3.history.go(number)#number = 0代表重载当前界面，正数代表前进几个界面，负数代表后退几个界面

---

DOM对象

DOM是文档对象模型，通过js操作html和css的中介，DOM树如下：

DOM中一共有三种类型的节点，下面以一个例子来进行说明：

<div title = "属性节点">测试Div</div> //<div></div>是元素节点，title = "属性节点"是属性节点, 测试Div是文本节点

节点通用属性

1.nodeName//元素节点代表元素的名称，属性节点代表属性名称，文本节点则为#text
2.nodeType//元素节点为1，属性节点为2，文本节点为3
3.nodeValue//元素节点为null，属性节点为属性值，文本节点为文本内容
4.childNodes//获取当前节点的所有子节点
5.firstNode//第一个子节点
6.lastNode//最后一个子节点

元素节点的属性

1.element.tagName //获取元素节点的属性
2.element.innerHTML //获取元素节点标签间的内容
3.element.id //获取节点的id
4.element.title//获取节点的title
5.element.style//获取节点的css属性
6.element.style.color//获取节点css中的color属性
7.element.className//获取节点的类
8.element.ownerDocument//获取节点的文档对象根节点
9.element.parentNode//获取该节点的父节点
10.element.previousSibling//获取该节点的前一个同级节点
11.element.nextSibling//获取该节点的下一个同级节点
12.element.attributes//获取该节点的属性节点的map，可以用element.attributes.getNamedItem(key)或者element.attributes[key]的方式得到value

....

注
1.当元素的属性中存在_的时候，需要删除_并且将_后面的字母大写，例如 element.style.background_color需要转化为 element.style.backgroundColor
2.元素.style只能获取行内的样式，无法获取外联的或行外的样式，需要通过getComputeStyle(elem)函数获取，但此方法只有苹果、谷歌和火狐支持，IE不支持。IE需要使用元素.currentStyle()获取

元素节点的方法

1.document.getElementById(id) //通过id属性访问元素节点
2.node.getElementsByTagName(tagName)//通过标签名获取节点，返回的是一个数组，支持查找标签内部的满足条件的节点
3.document.getElementsByName(name)//通过name获取节点，不支持查找标签内部的满足条件的节点
4.node.getElementsByClassName()//通过类名称获取标签，支持查找标签内部的满足条件的节点
5.element.removeChild(ChildNode);//如果想要删除多个节点，需要倒序删除（即从lastChild开始遍历）
6.document.write()//在页面中添加文本，但会把页面原来的内容覆盖掉
7.document.createElement()//创建一个元素节点
8.node.appendChild()//将新节点追加到node节点的子节点列表的末尾
9.document.createTextNode()//创建一个文件节点
10.parentNode.insertBerfore(newNode,oldNode)//将新节点插入在前面
11.parentNode.replaceChild(newNode,oldNode)//将新节点替换旧节点
12.node.cloneNode(true/false)//复制节点,参数传true则会复制节点中的内容，默认false
13.parentNode.removeChild(node)//移除节点

attribute方法

1.element.setAttribute(attr,value)
2.element.getAttribute(attr)
3.element.removeAttribute(attr)

attribute方法和传统的.操作的区别

1. 通过.操作选择节点的class属性需要通过采用className,而getAttribute只需要class
2. .操作无法删除属性
3. setAttribute操作可以自定义属性，而.操作则不能

---

JS事件

事件类型

鼠标事件

键盘事件

框架/对象事件

表单事件

剪切版事件

打印事件

其他事件

js中还有非常多的事件，此处不在赘述，有需要的可以查询JS事件

---

事件对象

当触发事件的时候，会产生一个事件对象，这个对象包含着所有与事件相关的信息。

获取事件的方式

以如下鼠标事件为例子

elem.onclick = function(e){
	var evt = e || window.event
}

事件属性

鼠标、键盘事件的属性

鼠标、键盘事件的方法

事件流

事件流是描述页面接受事件的顺序，事件流的三个阶段：捕获、目标、冒泡

阻止冒泡的方式

1.evt.cancelBubble = true;
2.evt.stopPropagation();

事件委托

将子元素的事件委托给他的父级。

事件默认方法

阻止事件默认方法：

1.evt.preventDefault()
2.evt.returnValue = false;
3.return false;

事件监听器

添加事件监听器

1.event.addEventListener(事件名，处理函数，布尔值)//事件名不能加on，布尔值控制冒泡，false代表冒泡，true则代表捕获
2.even.attachEvent(事件名，处理函数)//IE下的事件监听器

移除事件监听器

1.attachEvent(事件名，处理函数)//事件名不能加on
2.detachEvent(事件名，处理函数)//IE下的事件监听器

---

Cookie基础

设置cookie

1.document.cookie="name = value" //添加cookie，关闭浏览器后cookie消失，如果不想让它消失，则可以设置过期时间
2.document.cookie ="name = value;expires="+oDate; //oDate代表过期的时间，设置带过期时间的cookie

查看cookie

document.cookie

---

正则基础语法

创建正则表达式

1. var reg =/xxx/; 
	1.1 var reg = /xx/g ; //代表全局匹配
	1.2 var reg = /xx/i ; //代表忽略大小写
3. var reg = new RegExp("abc")；

正则表达式方法

1.reg.test(str)//检测str中是否有满足reg的子串，有就返回true
2.str.match(reg)//返回字符串中满足reg条件的子串
3.str.search(reg)//返回字符串中满足reg条件的第一个子串的位置
4.str.split(reg)//按照满足reg的子串对字符串进行分割
5.str.replace(reg,newSeq)//使用newSeq来替代满足reg的子串
6.reg.exec(str)//正则表达式的方法，将匹配成功的第一个内容放到数组里，如果没有匹配成功，就返回null

正则表达式的表示方法

1. .表示除了换行符之外的所有单个字符
2. *表示重复多次匹配
3. +表示匹配至少一次
4. ?表示进行0或1次匹配
5. []表示可以出现的范围，例如[0-9A-Z]表示可以匹配0-9和A-Z之间的任意一个字符
6. \w代表数字、字母、下划线；\W代表非数字、字母、下划线
7. \d代表数字，\D代表非数字
8. {m,n}代表至少匹配m次，至多匹配n次
9. /^匹配开始 $/匹配结束
10. ｜匹配或
11. ()代表分组匹配