JS基本语法汇总
原文链接(http://www.cnblogs.com/wzhiq896/p/6783296.html )
作者：wangwen896
另外推荐一个学习教程：https://zh.javascript.info/
1、分类
ECMAScript js基本语法与标准
DOM Document Object Model文档对象模型 BOM Browser Object Model浏览器对象模型 tips：DOM和BOM都是一套API（Application programing interface） 2、注释方式
style /* */ body <!-- --!> script // /* */ /** * js说明文档注释 */ 3、简单指令
alert(""); 提示框； confirm(""); 确认框，点击后会响应返回true或false； prompt(); 弹出一个输入框； document.write(""); console.log(""); 在控制台打印相应的信息； console.dir(""); 在控制台打印出该对象的所有信息； 4、变量命名
数字（0-9）、字母（a-z，A-Z）、下划线（_）； tips:应避免保留字和关键字； 5、NaN和isNaN
isNaN(number),如果number不是数字，则为true； Number(number),在转换为数字类型时，若number不是数字，则返回NaN； 6、转义字符
\
\r 回车
\n 空格
\t 缩进
\\ 反斜杠
7、逻辑短路、逻辑中断
true || 6; 逻辑或短路，左边为ture返回右值； 6 && true; 逻辑与短路，左边false返回右值； 8、优先级
* / % + - && || ? tips：自上而下优先级越来越高 9、类型转换（type）
parseInt("12a3"); 转为数字，尝试强转； parseFloat("123.123"); data.toString(); String(data); tips:变量声明未赋值，其值为undefined； 对象为空，其值为null； 10、三元表达式
eg : a>b?a=1:a=2; 格式: 判断条件？true的时候执行的操作：false的时候执行的操作； 11、数组Array
（1）、定义法 构造函数： var arr = new Array("123","abc","xxx"); 字面量： var arr = ["123","646","abc"]; 数组长度： var arr = new Array(6);(数组长度为6)； （2）、赋值 arr[0]=1; 12、形参和实参
定义函数时，function funcA(a,b,c){}，其中的a、b、c即为形参； 调用函数时，funcA(1,2,3);其中的1、2、3即为实参； tips：function里面有一个arguments对象，里面存有所有传进函数的实参； 13、函数function
（1）、函数命名 1、 可以使用字符、数字、下划线、$； 2、 不能以数字开头； 3、 不能使用关键字和保留字； 4、 区分大小写； 5、 建议要有意义 -- 动词+名字结构； 6、 驼峰命名法； 7、 函数名不能重名，后面写的重名函数会把前面写的函数给覆盖掉； （2）、函数的返回值 返回值： 当函数执行完毕之后，所得到的结果就是一个函数返回值 任意函数都有返回值 1、 在函数内部没有显示的写有return的时候，函数的返回值是undefined； 2、 当函数内部有return，但是return后面没有跟着任何内容或者数据的时候， 函数的返回值是undefined，并且return后面的代码不会执行； 3、 当return后面跟着内容或者数据的时候，函数的返回值就是这个跟着的内容或者数据； （3）、函数的四种形式： 1、没有参数，没有return； 通常在于封装一段过程； 2、没有参数，有return； 通常用于内部封装引用其他函数（闭包，回调）； 3、有参数，没有return； 通常用于执行操作的封装； 4、有参数，有return； 常见形式； （4）、匿名函数 匿名函数的name属性值为anonymous； 函数仅用一次的情况，即用即废； eg: setTimeout(function(){ console.log(this.name); },1000); tips:在1秒后在控制台打印出本函数的名称； （5）、回调函数 在一个函数当中，另一个函数作为参数传入该函数中，另一个的这个函数即为回调函数； eg: function atack(callback){ return callback; } tips:在调用该函数时，指定callback是哪个函数； atack（func）； （6）、短路运算 作用：防止传入函数的数据不足，造成无法运行； eg： function getResult(a,b,fn) { fn && fn(); }（通常使用逻辑与的短路来决定是否执行回调函数；） function getResult_2(a,b){ a || 0; }（通常用逻辑或的短路来防止实参不足的情况，强行赋值；） （7）、自执行函数 （function func2(){ }）() tips:在函数定义的结束最后写入一个（），该函数定义完成后直接被调用执行； （8）、递归 在函数执行的最后再一次的调用自身； tips:递归是一种非常耗资源的做法，通常为了简化运算，还会结合缓存进行； 并且注意，递归必须要有结束判断条件（if），否则该函数被调用后就是死循环； 14、数据类型
（1）、简单数据类型 string、number、boolean （2）、复杂数据类型 String、Number、Boolean、Array、Math、Date、Obeject、function、RegExp(正则表达式) （3）、空数据类型 * Null ---→Null的数据类型会返回一个Object * undifined tips：用typeof可以进行判断数据类型； tips：定义的简单数据类型变量，其数据保存在变量中； 而复杂数据类型，其变量保存的是数据所在的内存地址；15、内置对象
Array、Date、Math、String； 16、（Math）数学对象
向上取整 Math.ceil(number); 向下取整 Math.floor(number); 四舍五入 Math.round(number); 求多个数字之间的最大值 Math.max(); 求多个数字之间的最小值 Math.min(); 求x的y次幂 Math.pow(x,y); 求正弦值 Math.sin(x); example: 求一个角度的正弦值，要求x必须是一个额弧度值 角度和弧度的转换公式： 弧度 = 角度 * 2 * Math.PI / 360; Math.sin(30*2*Math.PI/360) Math.abs(x); 得到一个数字的绝对值 17、（Array）数组对象
（1）、arr1.concat(arr2); 数组拼接，结果为将arr2拼接到arr1的最后； （2）、arr.join()； 数组字符串输出，括号内可以指定元素连接的符号； eg: arr=["a","b","c","d"]; console.log(arr.join("|")); (结果为"a|b|c|d") （3）、arr.pop(); 切除数组的最后一个元素，返回值为该元素； （4）、arr.slice(start,end) 获取，获取数组的指定片段，start必须有，如果参数为负数则从末尾开始选取； 返回值为该片段组成的，一个新的数组； （5）、arr.push 添加，用于向数组的末尾添加新的元素，参数可以是多个； 返回值为数组的新长度； （6）、arr.splice 1、用于向数组中指定的索引添加元素； arr.splice(2, 0, "William","asdfasdf"); 在第2个元素开始，删除的元素个数（可以为0，为0到结尾）， 加入元素为"William"、"asdfasdf"； 2、用于替换数组中的元素； arr.splice(2,1,"William")； 3、用于删除数组中的元素； arr.splice(2,2); （7）、arr.indexOf(element); 查找，在数组中查找element，返回值为索引，如果没有该元素返回-1； （8）、arr.sort(function); 排序，function为一个函数； eg: function sortNumber(a,b){ return a-b; } arr.sort(sortNumber);(从小到大排序) tips：如果a-b改成b-a，那么执行的操作为从大到小； tips:字符串对象（String）的方法与Array的方法类似； 18、（Date）日期对象
date.getTime() date.getMilliseconds() date.getSeconds() date.getMinutes() date.getHours() date.getDay() date.getDate() date.getMonth() date.getFullYear() tips:很多，查文档 19、（String）对象
charAt(index)
str[index] 获取字符串指定位置的字符
concat() 拼接字符串
--------------------------- slice(start,end)/ substring(start,end) 截取从start开始，end结束的字符， 返回一个新的字符串，若start为负数，那么从最后一个字符开始； substr(start,length) 截取从start开始，length长度的字符，得到一个新的的字符串 --------------------------- indexOf(char) 获取指定字符第一次在字符串中的位置 lastIndexOf(char) 获取指定字符最后一次出现在字符串中的位置 trim() 去除字符串前后的空白 --------------------------- toUpperCase() toLocaleUpperCase() 转换为大写 toLowerCase() toLocaleLowerCawse() 转换为小写 --------------------------- replace() 替换字符 split() 分割字符串为数组 20、自定义对象
对象：无序属性的集合；
特征：属性（key）；
行为：方法（value）； js是基于对象的弱类型语言； 继承：基于类，子类可以从父类得到的特征； 工厂模式：定义一个function构造函数，作为对象，要创建对象直接调用该构造函数，加new关键字； 构造函数：定义对象的函数，里面存有该对象拥有的基本属性和方法； 命名首字母大写，this会自动指代当前对象； 访问对象属性： obj[key]; obj.key; 遍历对象： for(key in obj){ key 为属性名； obj[key] 为属性值（value）； } 21、JSON
{
"name" : "李狗蛋", "age" : 18, "color" : "yellow" } 1、 所有的属性名，必须使用双引号包起来； 2、 字面量侧重的描述对象，JSON侧重于数据传输； 3、 JSON不支持undefined； 4、 JSON不是对象，从服务器发来的json一般是字符串， 通过JSON.parse(jsonDate.json)可以将其转换成js对象； 22、JS解析
（1）、作用域 全局作用域：整个代码所有地方都可以调用； 局部作用域：在函数内部声明的变量，只可以在函数内部使用； （2）、变量提升和函数提升 预解析：在解析的时候，var和function都会被提升到代码的最顶端； 但是赋值操作不会被提升，定义和函数才会被提升； if里面的变量定义也会被提升，但是赋值操作不会； 23、其他细节（tips）
(1)、元素由对象组成的数组进行排序 eg： var data = [ {title: "老司机", count: 20}, {title: "诗人", count: 5}, {title: "歌手", count: 10}, {title: "隔壁老王", count: 30}, {title: "水手", count: 7}, {title: "葫芦娃", count: 6}, ]; //该数组的元素都为对象。我们需求为根据count的值给数组重新排序。 //解决方案：使用sort方法，对传入的函数做手脚。 function sortArr(a,b){ return a.count > b.count; } data.sort(sortArr); //原本的a和b的比较方法变成a.count和b.count； //原本的比较方法可以参见17，数组对象 //至此，data将以count值从小到大排列。 tips:Array对象的sort方法传入的为比较函数，比较函数里return排序比较的方法； 原始的sort方法传入的函数内部return的值为a>b， 通过修改sort传入的函数，可以实现对元素为对象的数组的排序！
JS基础知识点总结
何在一个网站或者一个页面，去书写你的js代码:
1.js的分层(功能):jquery(tool) 组件(ui) 应用(app),mvc(backboneJs)
2.js的规划():避免全局变量和方法(命名空间,闭包,面向对象),模块化(seaJs,requireJs)
常用内部类:Data Array Math String
HTML属性，CSS属性
HTML：属性.HTML属性="值"；
CSS：对象.style.CSS属性="值";
class和float
1.class:className
2.float:cssFloat
获取对象
id:document.getElementById("id 名")
事件:用户的动作
鼠标事件：
onclick：点击
onmouseover: 鼠标放上
onmouseout:鼠标离开
ondbclick:双击事件
onmousedown:鼠标按下
onmouseup:鼠标抬起
onmousemove鼠标移动
表单事件：
onfocus:获取焦点
onblur:失去焦点
onsubmit:提交事件
onchange:当发生改变的时候
onreset:重置事件
键盘事件:
onkeyup:键盘抬起
onkeydown:键盘按下
onkeypress:键盘按键一次
窗口时间:onload事件
页面加载完成之后立刻执行的事件
两种方式:
1.<script>window.onload=init/*函数名，不能加括号*/;</script>
2.<body onload="init()"></body>
event:保存事件发生时的相关的信息
当事件发生的时候,event
event.clientX:事件发生时的X的坐标
event.clientY:事件发生时的Y的坐标
event.target:事件源
event:必须通过实际参数的形式传递给函数才可以用
<input type = "button" value = "点击" onclick = "fn(event)" >
修改p中的内容
innerHTML:对象中所有的内容（文本内容和标签内容），一般指的是双标签或者容器标签
innerText:对象中所有的文本内容
document.createElement("标签名");
document.body.appendChild(对象);
removeChild(对象)
document.body是body标签对象
document.documentElement是html标签对象
ECMAscript,BOM,DOM
1.window:对象最高级
2.BOM:浏览器对象: brower object model
3.DOM:文档对象模型:document object model
4.BOM:网页一打开就会存在
5.DOM:去操作的代码
6.document是链接DOM和BOM
document有下级，其他的都没有下级【多窗口】
window.open("链接","name","设置");
1.width:设置窗口宽度
2.height:设置窗口高度
3.left:新窗口到左端距离
4.top:新窗口到顶部的距离
5.srollbars:滚动条【yes,no,1,0】
6.toolbar:工具类【yes,no,0】
7.location:地址栏
window.close: 关闭窗口
window.close()
创建定时器:
一次性计时器:window.setTimeout("函数()"，时间t)
执行:是在时间t之后执行js代码【只会执行一次】
时间:以毫秒为单位
反复性计时器:window.setInterval("函数()"，时间t)
时间:以毫秒为单位
执行:是每过时间t就会执行一次js代码【n次】
清楚定时器:
清除一次性定时器:window.clearTimeout(定时器名)
清除反复性定时器:window.clearInterval(定时器名)
注意:要想清除定时器，必须给定时器名字，匿名定时器无法清除
找对象的方法:
di:document.getElementById("id名");
标签:document.getElementsByTagName("标签名")//获取的是对象的集合(数组)
对象.getElementByTagName(标签名)
name:document.getElementByName("name名");//form集合(数组)
className:document.getElementByClassName("class名");//集合(数组)【firefox】
document.images;//获取img对象(数组)
document.links;//获取链接对象(数组)
document.forms;//获取表单对象(数组)
document.body;//body标签对象
document.documentElement;//HTML对象
event:事件信息对象
this:当前对象
location对象
location.href:返回url信息【可以获取url信息，也可以给其赋值，实现跳转页面】
location.assign():加载新的文档【跳转页面】
location.reload():重新加载当前的文档【刷新页面】
location.replace():用新的文档替代当前的文档【跳转页面】
location.assign和location.replace的区别:
location.assign:会产生历史记录
location.replace:不会产生历史记录
history对象:
history.length:浏览过的url数量
history.back():返回历史记录的前一个页面
history.forward():加载历史记录中的下一个页面
history.go(n):跳转到历史记录中指定的页面，如果是-1实际上就是history.back()的功能
screen对象
screen.height:获取屏幕的高度
screen.width:获取屏幕的宽度
screen.availHeight:获取除去任务栏的高度
screen.availWidth:获取除去任务栏的宽度
navigator对象
navigator.appName:浏览器名
navigator.appCodeName:浏览器代码名
navigator.appVersion:浏览器的版本号和平台信息
navigator.userAgent:浏览器信息
DOM:描述网页各个组成部分的关系
var obj = document.getElementById("id名")
火狐浏览器中空白处也算一个节点
parentNode:父节点
childNodes:子节点
firstChild:第一个子节点
lastChild:最后一个子节点
nextSibling:下一个兄弟节点【注意:必须是同父级关系】
previousSiblind:前一个兄弟节点【注意:必须是同父级关系】
登录验证：
onsubmit:表单提交事件
onsubmit="return 函数()"