JavaScript完整总结

#JavaScript

## 1. 基本语法
### 1.1 引入
- 内联试
<pre>
<a href="javascript:void(0)" onclick="alert('ok')">点击</a>
</pre>
- 内嵌式
<pre>
<script>
alert('ok');
</script>
</pre>
- 外链式
<pre>
<script src="demo.js"></script>
</pre>
### 1.2 调试输出
1. alert():将内容通过对话框弹出到浏览器
- document.write():将内容直接输出到浏览器
- con
sole.log():将内容输出到浏览器的控制台

### 1.3 语句
1. javascript代码的末尾不必须添加分号，但是推荐加上
- **javascript严格区分大小写**
- javascript会忽略多余的空格
- javascript是脚本语言，浏览器在读取代码时，逐行的执行脚本代码。而对于传统的编程来说，会在执行前对所有代码进行编译（解释型语言）
- 程序都是从0开始计数

### 1.4 注释
1. 单行注释：(双斜杠)//
- 多行注释：/**/

### 1.5 变量：
- 存储信息的“容器”
- **变量的命名规则：变量名由字母，数字，下划线和$组成，且不能以数字开头**
<pre>
// 申明变量
var username = 'zhangsan';

// 同时申明多个变量
var username = 'zhangsan', age = 30, sex = '男';

// 申明变量但是不赋值
var username;

// 不使用var申明变量
username = 'zhangsan';
</pre>

<mark>一个好的编程习惯是，在代码开始处，统一对需要的变量进行声明。</mark>

### 1.6 数据类型
**字符串（String）、数字（Number）、布尔（Boolean）、对象（Object）、空（Null）、未定义（Undefined）函数(Function)**
<p>使用typeof检测数据类型</p>

#### 1.6.1 字符串（String）
- 使用单引号和双引号定义字符串
- 单双引号需要注意的内容
    - 单双引号没有区别，都不解析变量
    - 单双引号可以相互嵌套
    - 不可以嵌套自身，除非使用转义字符转义
  
#### 1.6.2 数字（Number）
- 整型
- 浮点型（计算的时候有计算损耗，不建议进行精确计算）
- NaN(Not a number)
    - NaN与任何值运算都为NaN
    - NaN与任何值都不想等，包括自身
    - isNaN():判断一个值是否时NaN

#### 1.6.3 布尔（Boolean）
- true
- false

#### 1.6.4 数组
<pre>
    // 1. 创建数组的方式
    var cars = new Array();
    cars[0] = 'BMW';
    cars[1] = 'BYD';
    cars[2] = 'BenZ';
    
    // 2.直接定义数组
    var cars = new Array('BMW', 'BYD', 'Benz');
    
    // 3.简单定义
    var cars = ['BMW', 'BYD', 'Benz'];
    
    // 4.数组元素的值可以是任何值
    var shoplist = ['zhangsan',20,true,null,undefined,[1,2,3],{}];
    
    // 5.常用的一种复合数据(瀑布流，AngularJS中$scope.shoplist)
    var shoplist = [
        {id:1,username:"zhangsan",age:20,sex:"男"},
        {id:2,username:"lisi",age:18,sex:"女"},
        {id:3,username:"wangwu",age:32,sex:"男"}
    ];
</pre>

#### 1.6.5 对象
<pre>
    // 1.｛｝定义对象(jquery中animate,$.ajax({}))
    var obj = {
        username:"zhangsan",
        age:20,
        sex:"男",
        say:function(){},
        eat:function(){}
    }
    
    // 2.使用new Object()定义
    var obj = new Object();
    obj['username'] = 'zhangsan';
    obj.age = 20;
    obj.say = function(){}
    
    // 3.使用构造函数定义
    function Ball(){
        this.x = 100;
        this.y = 100;
        this.radius = 50;
        this.draw = function(){}
    }
    // 通过new关键字生成对象
    var b = new Ball();
</pre>

#### 1.6.6 Undefined
- 未定义的变量    alert(typeof age)
- 定义但是未赋值的变量 var sex; alert(typeof sex)

#### 1.6.7 Null
- 将值设置为null清空变量

### 1.7 数据类型的相互转化
#### 1.7.1 转化为字符串
- String()

#### 1.7.2 转化为布尔
- Boolean()
    - **'' 0 0.0 NaN false null undefined->false**
    - 其余都为真（'false','0','null'）

#### 1.7.3 转化为数值 <mark>不包含进制之间的转化</mark>
- Number()    
    1. 普通字符串->NaN
    2. 纯数字字符串,数值->原型输出
    3. 空字符串'',空格字符串' ',null->0
    4. true->1  false->0
    5. undefined->NaN
- parseInt()
    - **从第一个字符开始查找，直到找到非法字符(非数字)截止，返回找到的数字**
- parseFloat()
    - **从第一个字符开始查找，直到找到非法字符(除数字和第一个小数点之外的字符)截止，返回找到的数字**

### 1.8 运算符
#### 1.8.1 算术运算符 + - * / % ++ --
#### 1.8.2 赋值运算符 = += -= *= /= %=
#### 1.8.3 **连接运算符 +**
- ＋号两边是纯数字：＋代表加法运算
- 除此之外，＋都是连接运算

#### 1.8.4 比较运算符 == === !=!== > < <= > >=
#### 1.8.5 逻辑运算符
- &&（两真为真，其余都为假）
- ||（两假为假，其余都为真）
- ! （取反）

#### 1.8.6 条件运算符（三元运算符）
3==3 ? value1 : value2;

### 1.9 流程控制：条件语句
#### 1.9.1 if条件语句(范围判断)
<pre>
// 定义变量
var age = 24;

// 只有if判断
if (age < 18) {
    console.log('小弟弟，你好小');
}

// if...else...判断
if (age < 18) {
    // 当年龄小于18岁的时候，执行此段代码
    console.log('你还小，不要祸害小姑娘');
} else {
    // 当年龄大于等于18岁的时候，执行此段代码
    console.log('不小了，找个小姑娘吧');
}

// if...else if...else...
if (age < 18) {
    console.log('小弟弟，你还小');
} else if (age >= 18 && age < 24) {
    console.log('你还是一个剩斗士');
} else if (age >= 24 && age < 30) {
    console.log('你是一个必剩客');
} else {
    console.log('你乃齐天大剩也');
}
</pre>
 
#### 1.9.2 switch语句（具体值判断）
<pre>
var month = 1;
switch (month) {
    case 1:
    case 3:
    case 5:
    case 7:
    case 8:
    case 10:
    case 12:
        console.log('31天');
        break;
    case 4:
    case 6:
    case 9:
    case 11:
        console.log('30天');
        break;
    case 2:
        console.log('28天');
        break;
    default:
        console.log('输入的月份有问题');
}
</pre>

### 2.0 流程控制－循环语句
#### 2.0.1 for循环
<pre>
for (var i = 0; i < 10; i++) {
    console.log(i);
}
</pre>

#### 2.0.2 while循环
<pre>
var i = 0;

while (i < 10) {
    console.log(i);
    
    i++;
}
</pre>

#### 2.0.3 do...while循环
<pre>
var i = 0;
do {
    console.log(i);
    
    i++;
} while (i < 10);
</pre>

#### 2.0.4 for...in...循环
<pre>
var data = {username:'张三',age:20,sex:'男'};

for (var i in data) {
    console.log(i+'===>'+data[i]);
}
</pre>

#### 2.0.5 break和continue语句
<pre>
// break:终止循环
for (var i = 0; i < 10; i++) {
    if (i == 4) {
        break;
    }

    console.log(i);
}

// 最终的结果是：0 1 2 3
</pre>

<pre>
// 跳过当前循环继续执行下一次的循环
for (var i = 0; i < 10; i++) {
    if (i == 4) {
        continue;
    }

    console.log(i);
}
// 最终的结果是：0 1 2 3 5 6 7 8 9
</pre>

### 2.1 **正则表达式**
#### 2.1.1 元字符
- [0-9]:任意一个数字
- [a-z]:任意一个小写字母
- [x|y]:匹配x或者y（匹配其中的一个）
- [^0-9]:匹配一个任意非数字
- [\d]:任意一个数字
- [\s]:任意一个空白字符(\r\n\t)
- [\w]:约等于A-Za-z0-9_
- ^[a-z]{6,12}$:必须是6-12位的字母

#### 2.1.2 量词
- *    相当于{0,} 任意数量
- +    相当于{1,} 至少一个
- ?    相当于{0,1} 至多一个
- {6,18}

#### 2.1.3 模式修正符
- i:不区分大小写
- g:执行全局匹配
- m:执行多行匹配

### 2.2 JSON：只有属性的对象
#### 2.2.1 JSON功能
存储和传输数据的格式
#### 2.2.2 实例
<pre>
// JS对象
// 与普通对象区别：只有属性，键用引号
{"username":"zhangsan", "age":20, "sex":"男"}
</pre>
#### 2.2.3 JSON方法
- 将JSON字符串转化为JSON对象：JSON.parse()
- 将Javascript对象转换为JSON字符串:JSON.stringify()

### 2.3 **函数**
#### 2.3.1 函数定义
<pre>
// 1.普通函数
function demo(){
    console.log('第一种定义函数方式');
}

// 2.匿名函数
(function(){
    console.log('第二种定义函数方式');
})()

// 3.使用Function定义函数
new Function('x','y','return x+y;');
</pre>
#### 2.3.2 函数的特点
- 普通函数在同一个script标签之内，可以先调用后定义，但是跨script标签则不支持
- 定义函数而不调用等于没写
- 同名函数会覆盖，不会报错
- 变量的作用域
    - 在函数外申明的变量为全局变量，函数内可以直接调用
    - 在函数内使用var申明的变量为局部变量，只能在函数内调用
    - 在函数内直接定义变量为全局变量
- 参数个数
    - 形参 > 实参：多余的形参的值为undefined
    - 实参 > 形参：多余的实参被忽略
- argument函数内置对象 
    - 函数中内置的的所有参数组成的对象

#### 2.3.3 函数分类
<pre>
1.功能函数 执行一个功能，而不需要返回值
    function test(){
        alert('ok');
    }
    var t = test();
    alert(t);    // ???
2.返回值函数
    function demo(){
        return 'ok';
    }
    var d = demo();
    alert(d);    // ???
</pre>

### 2.4 内置对象
#### 2.4.1 Array对象
- arr.length：获取数组元素的长度
- arr.join(str)：将arr以指定字符连接成字符串
- arr.push():在数组末尾推入指定元素
- arr.pop()：弹出并返回数组末尾元素
- arr.shift()：弹出并返回数组第一个元素
- arr.unshift()：在数组开头处添加指定元素
- arr.sort([函数:排序规则])：排序（默认采用字符串顺序排序，数字排序则需要通过自定义函数实现）
- arr.reverse()：数组元素顺序反转
- arr.indexOf()：获取指定元素在数组中的位置，不存在返回-1
- arr.lastIndexOf()：获取指定元素最后一次出现的位置，不存在返回-1
- arr.slice(起始位置,结束位置):获取数组中指定的片段(不包含结束位置)
- arr.splice(起始位置,长度):从数组中添加或删除元素。
- arr.every():检测数值元素的每个元素是否都符合条件。
- arr.map():通过指定函数处理数组的每个元素，并返回处理后的数组。
- arr.filter():检测数值元素，并返回符合条件所有元素的数组。
- arr.some():检测数组元素中是否有元素符合指定条件。

#### 2.4.2 Boolean对象

#### 2.4.3 Date对象
- var d = new Date()：获取当前的日期对象
<pre>
    new Date()
    new Date(时间戳)
    new Date('2016/8/19 5:28:30'):注意这种格式的兼容性
    new Date(2016,7,19,5,28,19,178)
</pre>
- d.getFullYear()：年
- d.getMonth()：月（0-11）
- d.getDate()：日（1-31）
- d.getHours()：小时（0-23）
- d.getMinutes()：分钟（0-59）
- d.getSeconds()：秒数（0-59）
- d.getTime():时间戳

#### 2.4.4 Math对象
##### 属性
- PI:圆周率
##### 方法
- Math.abs()：绝对值
- Math.ceil()：进一取整
- Math.floor()：舍去取整
- Math.round()：四舍五入
- Math.max()：获取最大值
- Math.min()：获取最小值
- Math.random()：获取随机数
<pre>
function rand(m,n){
    return Math.floor(Math.random()*(n-m+1)+m);
}
</pre>

#### 2.4.5 Number对象
- MAX_VALUE:最大的数
- MIN_VALUE:最小的数
- num.toFixed(num):保留指定的小数位

#### 2.4.6 String对象
- str.length:字符串的长度
- str.split(str)：将字符串以指定字符切割

- str.search(str|reg)：在字符串中搜索指定字符，返回对应的位置，不存在返回-1
- str.match(str|reg):在字符串中匹配指定字符，存在返回数组，不存在返回null
- str.replace(str1|reg,str2)：用str2替换str1的值

- str.slice(start,end):获取字符串中指定的片段(不包含结束位置)
- str.indexOf(str)：获取字符串中指定字符的位置，不存在返回-1
- str.lastIndexOf(str)：获取字符串中指定字符最后出现的位置，不存在返回-1
- str.charAt(num):获取指定位置的字符

- str.charCodeAt(num):指定位置的字母对应的Unicode编码
- String.fromCharCode():将Unicode编码转为字符

#### 2.4.7 RegExp对象
- reg.test(str):使用正则表达式检验str是否符合要求

## 2.BOM（Window对象）
### 2.1 全局属性和函数
- 所有的全局变量是window对象的属性
- 所有的全局函数是window对象的方法
- 系统方法
    - alert()、confirm()、prompt()
    - moveBy()、moveTo()、resizeBy()、resizeTo()、scrollBy()、scrollTo()
    - open('1.html','','width=200,height="200'):打开一个新窗口
    - close():关闭窗口
    - setInterval()、setTimeout()、clearInterval()、clearTimeout()
    
### 2.2 Navigator对象（浏览器相关的信息）
- navigator.appCodeName        返回浏览器的代码名。
- navigator.appName    返回浏览器的名称。
- navigator.appVersion    返回浏览器的平台和版本信息。
- navigator.cookieEnabled    返回指明浏览器中是否启用 cookie 的布尔值。
- navigator.platform    返回运行浏览器的操作系统平台。
- navigator.userAgent    返回由客户机发送服务器的 user-agent 头部的值。
- navigator.userLanguage    返回 OS 的自然语言设置。

### 2.3 Screen对象（屏幕相关的信息）
- screen.width:浏览器的宽度
- screen.height：浏览器的高度
- screen.availHeight：浏览器可用高度
- screen.availWidth：浏览器可用宽度

### 2.4 Frames对象

### 2.5 **History对象（当前那浏览器的历史记录）**
- history.length:返回浏览器历史列表中URL数目
- history.go(0|-1|1):加载 history 列表中的某个具体的页面
- history.pushState(state,'',url) 与window.onpopstate()结合使用

### 2.6 **Location对象（当前浏览器的url地址信息）**
- location.hash:锚点|做历史记录管理
- location.href：获取设置当前的URL地址
- location.reload()：刷新

## 3.HTML DOM对象
### 3.1 DOM Document对象
#### 3.1.1 Form表单对象
    - document.forms[0]
    - document.forms['formName']
    - document.formName
    - 表单元素对象:formObj.inputName
#### 3.1.2 Select对象
    - 属性：
        - disabled
        - length
        - selectedIndex
    - 方法：
        add()
        remove()
#### 3.1.2 table表格对象
    - table.rows：获取表格行
    - talbe.insertRow(index)：添加行
    - table.deleteRow(index)：删除行
    - row.cells:获取单元格对象
    - row.insertCell(index)：添加单元格
#### 3.1.3 Cookie对象
    document.cookie = 'username=zhangsan;expires=date;path=/;domain=qq.com;secure'

### 3.2 **DOM 功能（通过功能确定DOM是做什么的）**
#### 3.2.1 获取并改变HTML标签
    - document.getElementById()
    - document.getElementsByTagName()
    - document.getElementsByName()
    - document.querySelector('css选择器#box .a div'):匹配复合条件的第一个元素
    - document.querySelectorAll()：匹配所有的复合条件的元素
    - ID名直接获取（用于测试，不推荐用于正式环境）
#### 3.2.2 获取并改变HTML属性
    - obj.src
    - obj.getAttribute()
    - obj.setAttribute()
    - obj.removeAttribute()
#### 3.2.3 获取并改变CSS样式
    - obj.style.width:只能获取行内的样式，获取不到style标签和link标签之内的样式
    - 获取最终的样式（兼容）
        function getStyle(obj, attr){
            return obj.currentStyle ? obj.currentStyle[attr] : document.defaultView.getComputedStyle(obj, null)[attr];
        }
#### 3.2.4 **事件处理**
##### 3.2.4.1 鼠标事件
- onclick
- ondblclick
- oncontextmenu：右击
- onmouseover
- onmouseout
- onmousedown
- onmouseup
- onmousemove

##### 3.2.4.2 键盘事件
- onkeydown
- onkeyup
- onkeypress

##### 3.2.4.3 表单事件
- onfocus
- onblur
- onsubmit 当文本被选中时
- onchange
- onreset
- onselect

##### 3.2.4.4 框架对象事件
- onload
- onresize
- onerror
- onscroll

##### 3.2.4.5 鼠标键盘属性值
- altKey: ALT 键被按下
- shiftKey:
- ctrlKey:
- clientX
- clientY

##### 3.2.4.6 事件冒泡
- JS:var e = ent || window.event; e.cancelBubble = true
- jquery:e.stopPropagation()/return false;

<pre>
区别：
return false;代表终止函数，之后的代码将不执行
e.stopPropagation():阻止事件冒泡，之后的代码继续执行
</pre>

##### 3.2.4.7 千万要注意的事件默认行为
- 点击a链接默认跳转页面
- 点击提交按钮默认提交表单
- 点击鼠标右键出现右键菜单
<pre>
// 阻止a链接跳转（如果要用a链接做点击事件，务必将这里禁止）
<a href="javascript:;">百度</a>
<a href="javascript:void(0);">百度</a>
// 表单
formObj.onsubmit = function(){
    // 验证不通过，阻止表单提交
    return false;
}
document.oncontextmenu = function(){
    // 阻止浏览器右键菜单
    return false;
}
</pre>

### 3.3 **DOM 节点操作**
#### 3.2.1 标签元素的属性
- attributes:
- className:

- childNodes/children:
- firstChild/firstElementChild:
- lastChild/lastElementChild:
- nextSibling/nextElementSibling:
- previousSibling/previousElementSibling:
- parentNode:
- nodeName:
- nodeType:
- nodeValue:

- innerHTML:

- clientWidth:dom对象的可见宽度
- clientHeight:可见高度    
    document.documentElement.clientWidth:当前窗口宽度
    document.documentElement.clientHeight:当前窗口高度
- offsetHeight:
- offsetWidth
    divObj.offsetHeight:高度（包含height，padding，border）
    divObj.offsetWidth

    距离上一级元素的左边距和上边距（如果父级没有定位，则是相对于body）
- offsetLeft:
- offsetTop:
    
- scrollWidth:
- scrollHeight:
    document.documentElement.scrollWidth:获取当前页面的宽度
    document.documentElement.scrollHeight:获取当前页面的高度

    当前内容滚动的距离
- scrollTop:
- scrollLeft:
    document.body.scrollTop || document.documentElement.scrollTop;
    divObj.scrollTop/divObj.scrollLeft

#### 3.2.2 标签元素的方法
- appendChild()
- insertBefore()
- replaceChild()
- removeChild()
- cloneNode()