JavaScript大总结

JavaScript

1. 基本语法

1.1 引入

• 内联试

<a href="javascript:void(0)" onclick="alert('ok')">点击</a>

• 内嵌式

<script>alert('ok');</script>

• 外链式

<script src="demo.js"></script>

1.2 调试输出

1. alert():将内容通过对话框弹出到浏览器
   
   • document.write():将内容直接输出到浏览器
   • console.log():将内容输出到浏览器的控制台

1.3 语句

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

1.4 注释

1. 单行注释：(双斜杠)//
   
   • 多行注释：/**/

1.5 变量：

• 存储信息的“容器”
• 变量的命名规则：变量名由字母，数字，下划线和$组成，且不能以数字开头

// 申明变量var username = 'zhangsan';// 同时申明多个变量var username = 'zhangsan', age = 30, sex = '男';// 申明变量但是不赋值var username;// 不使用var申明变量username = 'zhangsan';

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

1.6 数据类型

字符串（String）、数字（Number）、布尔（Boolean）、数组（Array）、对象（Object）、空（Null）、未定义（Undefined）

使用typeof检测数据类型

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 数组

    // 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:"男"}    ];

1.6.5 对象

    // 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();

1.6.6 Undefined

• 未定义的变量 alert(typeof age)
• 定义但是未赋值的变量 var sex; alert(typeof age)

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 转化为数值 不包含进制之间的转化

• 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条件语句(范围判断)

// 定义变量var age = 24;// 只有if判断if (age 

1.9.2 switch语句（具体值判断）

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('输入的月份有问题');}

2.0 流程控制－循环语句

2.0.1 for循环

for (var i = 0; i 

2.0.2 while循环

var i = 0;while (i 

2.0.3 do…while循环

var i = 0;do {    console.log(i);    i++;} while (i 

2.0.4 for…in…循环

var data = {username:'张三',age:20,sex:'男'};for (var i in data) {    console.log(i+'===>'+data[i]);}

2.0.5 break和continue语句

// break:终止循环for (var i = 0; i 

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 实例

// JS对象// 与普通对象区别：只有属性，键用引号{"username":"zhangsan", "age":20, "sex":"男"}

2.2.3 JSON方法

• 将JSON字符串转化为JSON对象：JSON.parse()
• 将Javascript对象转换为JSON字符串:JSON.stringify()

2.3 函数

2.3.1 函数定义

// 1.普通函数function demo(){    console.log('第一种定义函数方式');}// 2.匿名函数(function(){    console.log('第二种定义函数方式');})()// 3.使用Function定义函数new Function('x','y','return x+y;');

2.3.2 函数的特点

• 普通函数在同一个script标签之内，可以先调用后定义，但是跨script标签则不支持
• 定义函数而不调用等于没写
• 同名函数会覆盖，不会报错
• 变量的作用域
  
  • 在函数外申明的变量为全局变量，函数内可以直接调用
  • 在函数内使用var申明的变量为局部变量，只能在函数内调用
  • 在函数内直接定义变量为全局变量
• 参数个数
  
  • 形参 > 实参：多余的形参的值为undefined
  • 实参 > 形参：多余的实参被忽略
• argument函数内置对象
  
  • 函数中内置的的所有参数组成的对象

2.3.3 函数分类

1.功能函数 执行一个功能，而不需要返回值    1.创建表格函数：createTable()    2.$.get('1.php',function(msg){        // 此处回调函数功能：判断用户名是否被注册，没有返回值        if (msg == 'yes') {            spanObj.innerHTML = '该用名可用';        } else {            spanObj.innerHTML = '该用户名已经被注册';        }    })2.返回值函数    1.AngularJS中getShopIndex(id),getCartIndex(id)都是具有返回值的函数，返回对应的索引值    2.获取结果    function demo(){        return 'ok';    }    var d = demo();    alert(d);   // ???    function test(){        alert('ok');    }    var t = test();    alert(t);   // ???

2.4 内置对象

2.4.1 Array对象

• arr.length:长度
  
  - arr.join():把数组中的所有元素放入一个字符串。
  
  - arr.push():向数组的末尾添加一个或多个元素，并返回新的长度
  
  - arr.pop():用于删除并返回数组的最后一个元素
  
  - arr.shift():用于把数组的第一个元素从其中删除，并返回第一个元素的值
  
  - arr.unshift():可向数组的开头添加一个或更多元素，并返回新的长度
  
  - arr.sort([函数:排序规则]):用于对数组的元素进行排序。
  
  - arr.reverse():用于颠倒数组中元素的顺序
  
  - arr.indexOf():可返回某个指定的字符串值在字符串中首次出现的位置
  
  - arr.lastIndexOf():可返回一个指定的字符串值最后出现的位置，在一个字符串中的指定位置从后向前搜索
  
  - arr.slice(起始位置,结束位置):获取数组中指定的片段(不包含结束位置):可提取字符串的某个部分，并以新的字符串返回被提取的部分
  
  - arr.splice(起始位置,长度):从数组中添加或删除元素。
  
  - arr.every():检测数值元素的每个元素是否都符合条件。
  
  - arr.map():通过指定函数处理数组的每个元素，并返回处理后的数组。
  
  - arr.filter():检测数值元素，并返回符合条件所有元素的数组。
  
  - arr.some():检测数组元素中是否有元素符合指定条件。

2.4.2 Boolean对象

2.4.3 Date对象

• var d = new Date()

    new Date()    new Date(时间戳)    new Date('2016/8/19 5:28:30'):注意这种格式的兼容性    new Date(2016,7,19,5,28,19,178)

• d.getFullYear():年
• d.getMonth():月
• d.getDate():日
• d.getHours():小时
• d.getMinutes():秒
• d.getSeconds():毫秒
• d.getTime():时间戳

2.4.4 Math对象

属性

• PI:圆周率:属性就是 π，即圆的周长和它的直径之比。这个值近似为 3.141592653589793

方法

• abs():可返回数的绝对值
• ceil():执行的是向上取整计算，它返回的是大于或等于函数参数，并且与之最接近的整数
• floor():执行的是向下取整计算，它返回的是小于或等于函数参数，并且与之最接近的整数
• round():把一个数字舍入为最接近的整数
• max():两个指定的数中带有较大的值的那个数
• min():两个指定的数中带有较小的值的那个数
• random():介于 0 ~ 1 之间的一个随机数

2.4.5 Number对象

• MAX_VALUE:最大的数
• MIN_VALUE:最小的数
• toFixed():把 Number 四舍五入为指定小数位数的数字

2.4.6 String对象

• length:长度
• split():把一个字符串分割成字符串数组
• search():检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串
• match():在字符串内检索指定的值，或找到一个或多个正则表达式的匹配

• replace():用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串

• slice():可提取字符串的某个部分，并以新的字符串返回被提取的部分

• indexOf():某个指定的字符串值在字符串中首次出现的位置
• lastIndexOf():一个指定的字符串值最后出现的位置，在一个字符串中的指定位置从后向前搜索

• charAt():返回指定位置的字符

• charCodeAt():指定位置的字母对应的Unicode编码

• String.formCharCode():将Unicode编码转为字符

2.4.7 RegExp对象

• reg.test(str):使用正则表达式检验str是否符合要求

2.BOM（Window对象）

2.1 全局属性和函数

• 所有的全局变量是window对象的属性
• 所有的全局函数是window对象的方法
• 系统方法
  
  • alert()
  • confirm()用于显示一个带有指定消息和 OK 及取消按钮的对话框
  • prompt()提示用户输入的对话框
  • moveBy():可相对窗口的当前坐标把它移动指定的像素、
  • moveTo()把窗口的左上角移动到一个指定的坐标、
  • resizeBy()按照指定的像素调整窗口的大小、
  • resizeTo()、把窗口的大小调整到指定的宽度和高度
  • scrollBy()按照指定的像素值来滚动内容、
  • scrollTo()把内容滚动到指定的坐标
  • open(‘1.html’,”,’width=200,height=”200’):打开一个新窗口
  • close():关闭窗口
  • setInterval()按照指定的周期（以毫秒计）来调用函数或计算表达式、
  • setTimeout()在指定的毫秒数后调用函数或计算表达式、
  • clearInterval()取消由 setInterval() 设置的 timeout、
  • clearTimeout():取消由 setTimeout() 方法设置的 timeout

2.2 Navigator对象（浏览器相关的信息）

• appCodeName 返回浏览器的代码名。
• appName 返回浏览器的名称。
• appVersion 返回浏览器的平台和版本信息。
• cookieEnabled 返回指明浏览器中是否启用 cookie 的布尔值。
• platform 返回运行浏览器的操作系统平台。
• userAgent 返回由客户机发送服务器的 user-agent 头部的值。
• userLanguage 返回 OS 的自然语言设置。

2.3 Screen对象（屏幕相关的信息）

• width
• height
• availHeight:返回显示屏幕的高度 (除 Windows 任务栏之外)。
• availWidth:返回显示屏幕的宽度 (除 Windows 任务栏之外)。

2.4 Frames对象:返回窗口中所有命名的框架

2.5 History对象（当前那浏览器的历史记录）

• length:返回浏览器历史列表中URL数目
• back():加载 history 列表中的前一个 URL。
• forward():加载 history 列表中的下一个 URL。
• go():加载 history 列表中的某个具体的页面
• history.pushState(data,”,下标) 与window.onpopstate()结合使用

2.6 Location对象（当前浏览器的url地址信息）

• hash:锚点 历史回退
  location.hash = 下标;
  data[下标] = 值;
  window.onhashchange()
• href
• 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:当页面加载完成的时候
• onunload:用户退出页面
• onresize:当页面大小发生改变的时候
• onerror:当图片加载失败的时候
• onabort:图像加载被中断
• onscroll:当页面发生滚动的时候
• 延迟加载：onscroll

3.2.4.5 鼠标键盘属性值

• altKey:Alt 键是否被按下并保持住了
• shiftKey:
• ctrlKey:
• clientX:鼠标指针向对于浏览器页面（或客户区）的水平坐标
• clientY:鼠标指针向对于浏览器页面（或客户区）的垂直坐标

3.2.4.6 事件冒泡

• stopPropagation()
• JS中e.cancelBubble = true
• jquery中 e.stopPropagation()/return false;

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

3.2.4.7 千万要注意的事件默认行为（preventDefault自己查阅资料解决）

• 点击a链接默认跳转页面
• 点击提交按钮默认提交表单
• 点击鼠标右键出现右键菜单

// 阻止a链接跳转（如果要用a链接做点击事件，务必将这里禁止）<a href="javascript:;">百度</a><a href="javascript:void(0);">百度</a>// 表单formObj.onsubmit = function(){    // 如果要做表单验证或者Ajax提交    // 表单验证不通过，return false    // 如果是ajax提交，return false    return false;}

3.3 DOM 节点操作

3.2.1 标签元素的属性

• attributes:属性返回包含被选节点属性的 NamedNodeMap

• className:属性可设置或返回元素的 class 属性

• childNodes/children:所有子节点的集合/子节点

• firstChild/firstElementChild:第一个子节点/第一个元素子节点
• lastChild/lastElementChild:最后一个子节点/最后一个元素子节点
• nextSibling/nextElementSibling:下一个节点/下一个元素节点
• previousSibling/previousElementSibling:前一个兄弟节点/前一个元素节点
• parentNode:定位到一个节点，找到他的父节点
• nodeName:节点的名称
• nodeType:节点的类型。

• nodeValue:节点的值。

• innerHTML:获取或设置的是元素中的所有内容，包含标签

• clientWidth:获取浏览器的宽度
• clientHeight:获取浏览器的高度
• offsetHeight:获取div对象的高度(宽度 = 自身宽度+边框厚度+padding值)
• offsetWidth:获取div对象的宽度
• offsetLeft:获取div距离页面(父级元素有定位，则相对于父级元素)的左边距
• offsetTop:获取div距离页面(父级元素有定位，则相对于父级元素)的上边距
• scrollWidth:获取页面的总宽度
• scrollHeight:获取页面的总高度
• scrollTop:获取浏览器滚动的高度
• scrollLeft:获取浏览器滚动的宽度

3.2.2 标签元素的方法

• appendChild():向节点的子节点列表的末尾添加新的子节点
• insertBefore():在已有的子节点之前插入一个新的子节点
• replaceChild():用其他节点替换某个子节点
• removeChild():删除指定节点
• cloneNode():创建指定的节点的精确拷贝

上面的东西掌握之后，决定不了你的上限，但是可以决定你的下限