JS通用总结(类型齐全,有你想要的).docx

JS总结第一天1. js的数据类型：字符串（string）、数字（number）、布尔（boolear）、数组（array）、对象（object）、undefined和null2. JS的数据常量：constant:不变的值3. JS的变量:变量的命名必须以字母或者下划线开始，可以跟字母数字下划线，但是不能有空格和特殊符号。整数变量x=100，数组变量y=”100”，JS变量声明用Var.4. JS的基本对象：字符串对象String日期对象Date数组对象Array数字对象Number数学对象Math正则表达式对象Regexp。第二天 JS的赋值、运算、比较、流程控制1. 变量的声明赋值：Var width; 赋值width=50px;可以先声明再赋值，也可是声明的同时进行赋值。2. 运算算术运算符：+ - */+-赋值运算符：= +=-=*=/=%=3. 比较比较运算符：=!=逻辑运算符：&|!字符串连接运算符:+三目运算符：条件?语句:4. 流程控制顺序结构：程序按照正常情况下的书写顺序执行选择结构：通过判断语句对不同的条件判断后进一步执行，通常有If语句（二选一执行）和Switch语句（从多条中选择其一执行）。IfIfElseIf(条件1)Else if(条件2)Setichcase1;break;case2;break;defult;循环结构：需要重复执行的的多行程序代码；主要有For循环和While循环While(条件)执行的代码Do执行的代码 while(条件);注意：循环语句中的条件为false时循环会结束，为了给for和while循环语句加入更多的使用程序，可以加入break和continue语句来改变循环的流程。Break中断循环，continue开始下一次循环。第三天 JS数组1. 定义数组一维数组：Var 数组名=new Array(size);两种方法，可以将数组单独列出 size0=”1”; Size1=”2”;方法二直接全部写出来var 数组名=new Array(“0”,”1”,.);，数组的长度可以小于元素实际长度，也可以大于元素实际长度。二维数组var 数组名=new Array(“1”,”2”,“4”,”5”);另一种方法var arr=new Array();arr0=new Array(0);Arr00=”1”;.2. 访问数组数组遍历：利用for语句来访问数组中的元素：var arr=new Array(1,2,3,4,5,6);for(var i=0;i属性方法对象看得见摸得着3. 类类是具有相同的属性和方法的对象，是抽象的例如创建一个学生类 var student=new 类名();具体使用：对象名.属性对象名.方法4. 定时器SetTimeout():一次性setInterval()：可以定期触发使用window对象的SetTimeout()方法：window.SetTimeout(“function()”,delay),它接受两个参数一个是要执行的代码，一个是延迟的毫秒数。清除定时器则用clear Timeout();使用方法document.onclick=function() window.clearTimeout(id);第五天 字符串操作、JSON、this关键字1. 字符串charAt()返回指定位置的字符charCodeAt()返回指定位置的unicode编码Search()用于检索字符串中指定的字符串Replace()查找匹配指定的字符串，然后用新字符串代替匹配字符串Concat()把两个或者多个字符串组合起来，返回一个新的字符串Slice()提取字符串的一部分，并反馈一个新的字符串，俩个参数，一个起始位置，一个终止位置（留头不留尾），如果没有end就取到末尾Indexof()返回字符串中一个子串的第一处索引Lastindexof()返回字符串一个子串的最后一处索引Substring()返回字符串的一个子串，传入参数是起始位置和始末位置（留头不留尾）Length返回字符串的长度Tolowercase()将整个字符串转换成小写Touppercase()将整个字符串转换成大写转义字符 2. JSON书写格式 “name”:“xiaoming”, “age”:“22”, “email”: ;取值用.来取值JSON.name和字符串之间的转换JSON.stringfy(json)JSON.parse(str)JSON有浅拷贝和深拷贝3. This关键字是函数运行自动生成的内部对象，只能在内部使用纯粹的函数调用、作为对象方法的调用、作为构造函数调用 修改指向的方法：Call(thisObj,Object)Apply(thisObj,argArray)第六天 Math对象、Date对象、正则表达式1. Math对象语法：Math.属性名属性：E自然对数的底数LN2返回2的自然对数LN10返回10的自然对数LOG2E返回以2为底e的对数LOG10E返回以10为底的 e 的对数PI返回圆周率SQRT1_2返回返回 2 的平方根的倒数SQRT2返回 2 的平方根常用方法（Math.方法名）abs(x)返回数的绝对值；ceil(x)对数进行上取整；floor(x)对数进行下取整；max(x,y)返回 x 和 y 中的最高值；min(x,y)返回 x 和 y 中的最低值；round(x)把数四舍五入为最接近的整数pow(x,y)返回 x 的 y 次幂random()返回 0 1 之间的随机数sqrt(x)返回数的平方根其他例如三角函数的方法如下：sin(x)返回数的正弦 、asin(x)返回数的反正弦值cos(x)返回数的余弦 、acos(x)返回数的反余弦值tan(x)返回角的正切 、atan(x)返回 x 的反正切值atan2(y,x)返回从 x 轴到点 (x,y) 的角度（介于 -PI/2 与 PI/2 弧度之间）2. Date对象创建语法：var myDate=new Date();属性constructor返回对Date函数的引用属性protype可以向Date添加属性和方法获取时间：getDate()/getDay()/getMonth()/getfullYear()getHours()/getMinutes()/getSeconds()/getMillseconds()设置时间：setDate()/setHours().其他一些方法：toSource()返回该对象的源代码toString()把 Date 对象转换为字符串toTimeString()把 Date 对象的时间部分转换为字符串toDateString()把 Date 对象的日期部分转换为字符串toUTCString()根据世界时，把 Date 对象转换为字符串3. 正则表达式使用单个字符串来描述匹配一系列符合某句法的字符串通常用来测试字符串、替换文本、从字符串中提取一个子字符串声明的方法var myRegExp=/内容/或者new RegExp(“内容”)常用方法:test(),匹配一个字符串是否符合正则规则，成功，则返回truematch(),找到一个或多个正则表达式的匹配replace(),替换与正则表达式匹配的子串search(),检索与正则表达式相匹配的值split(),把字符串分割为字符串数组全局匹配,修饰符g 语法：/./g直接量字符：任意字符 ： abc范围 ： a-z、0-9排除 ： a组合 ： a-z0-9A-Z正则表达式的使用符：n换行符；r回车符；t制表符；f换页符；cX与X对应的控制字符；v垂直制表符；b退格符；o空字符；量词：n,m至少出现n次，最多m次；n,至少次；*任意次；?零次或者一次0,1;+一次或者任意次；n整好n次；s匹配一个空白字符；S匹配一个非空白字符；b独立部分；B非独立部分；1第一个匹配子项的重复匹配；.匹配除换行符外任意一个字符；d匹配数字0-9；D匹配非数字字符；w匹配字母数字和下划线；W匹配除字母数字下划线之外的字符；匹配起始位置；$匹配始末位置；选择分组与引用：分组用();u4e00-u9fa5匹配中文s*|s*$行首行尾空格w+a-z0-9+(.a-z+)1,3$EMAILa-zA-z+:/s*网址1-90-94,9QQ号1-9d5邮政编码1-9d14|1-9d17|1-9d16x身份证号第七天 DOM文档对象类型1. DOM树HtmlHeadBodyTitlea h1Href2.DOM获取节点id获取 getElementById语法：node.getElementById(id); class获取 getElementsByClassName语法：node. getElementsByClassName(class);标签名获取 getElementsByTagName语法：node. getElementsByTagName(“h1 );3.查看节点类型语法：nodeObject.nodeTypenodeName nodeValue ；4.常用属性：className 类名;offsetWidth 宽;offsetHeight 高;offsetLeft offsetTop获取距离第一个定位父节点左上角的距离;创建节点 createElement( )5.子节点的增删改appendChild 在DOM子集最后添加子节点;insertBefore 在指定的已有子节点之前插入新的子节点;removeChild 删除一个节点;replaceChild 替换节点;6. DOM属性获取与设置获取方法： elementattributename element . attributenamegetAttribute( attributename )设置属性： setAttribute( attributename, attributevalue )删除属性： removeAttribute( attributename )第八天 DOM节点查找、事件1. 节点查找children子节点，不包含空节点childNodes子节点，不包含空节点firstChild第一个子节点，包含空节点firstElementChild第一个子节点，不包含空节点lastChild最后一个子节点，包含空节点lastElementChild最后一个子节点，不包含空节点nextSibling下一个兄弟节点，包含空节点nextElementSibling下一个兄弟节点，不包含空节点previousSibling前一个兄弟节点，包含空节点previousElementSibling前一个兄弟节点，不包含空节点parentNode父节点offsetParent第一个有定位属性的父节点，如果没有，则返回body2. 事件Onload加载完成Onfocus/onblur获得失去焦点Onchange表单内容发生改变Onclick点击Ondbclick双击Onkeydown键盘按下Onkeyup键盘抬起Onmousedown鼠标阿娘Onmouseup鼠标抬起Onmousemove鼠标移动Onmouseover移到对象上Onmouseout鼠标离开鼠标event对象属性clientX clientY第九天 事件、event对象、事件冒泡1. 事件Onselect在文本框中的文本被选中时发生Onsubmit在提交按钮被点击时触发Onreset点击重置按钮触发Onerror在加载错误时触发preventDefault() 或者 return false可以阻止事件；2. 事件对象事件从最上一级标签开始往下查找，直到捕获到事件目标(target)3. 事件冒泡事件从事件目标(target)开始，往上冒泡直到页面的最上一级标签。如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义事件处理程序或者事件则返回True；那么这个事件会向这个对象的父级对象传播，并不是所有的对象都能冒泡，blur,focus,load,unload都不能像其他事件一样冒泡。阻止冒泡：IE中使用cancelBubble=true，Firefox中使用stopPropation()；第十天 Window对象1. windowdui对象（浏览器窗口）属性innerHeight 返回窗口的文档显示区的高度innerWidth 返回窗口的文档显示区的宽度outerHeight 返回窗口的外部高度outerwidth 返回窗口的外部宽度length 设置或返回窗口中的框架数量name 设置或返回窗口的名称。window.open() 打开的新网页，第二个参数就是此网页的name。iframe里面，name属性方法close() 关闭浏览器窗口alert() 显示带有一段消息和一个确认按钮的警告框confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框prompt()显示可提示用户输入的对话框open() 打开一个新的浏览器窗口或查找一个已命名的窗口resizeBy() 按照指定的像素调整窗口的大小resizeTo() 把窗口的大小调整到指定的宽度和高度scrollBy() 按照指定的像素值来滚动内容scrollTo() 把内容滚动到指定的坐标2. Navigator对象（检测浏览器与操作系统版本）属性：appCodeName返回浏览器的代码名appVersion返回浏览器的次级版本appName返回浏览器的名称language返回当前浏览器的语言platform 返回运行浏览器的操作系统平台3. Document对象包含整个htmlDOM,通过window.document属性对其进行访问，也可以用document直接进行访问。Document.cookie获取或设置cookieDocument.title获取或设置titledocument.URL获取或者设置URL4. Window下的其他对象Screen对象 属性heightavailHeightavailWidthcolorDepthpixelDepthBody对象属性clientWidth网页可见区域宽clientHeight网页可见区域高scrollWidth网页正文全文宽scrollHeight网页正文全文高scrollTop网页被卷去的高scrollLeft网页被卷去的左Location对象hash设置或返回从井号 (#) 开始的 URL（锚）host设置或返回主机名和当前 URL 的端口号hostname设置或返回当前 URL 的主机名href设置或返回完整的 URLpathname设置或返回当前 URL 的路径部分port设置或返回当前 URL 的端口号protocol设置或返回当前 URL 的协议search设置或返回从问号 (?) 开始的 URL（查询部分）方法assign() 加载新的文档reload() 重新加载当前文档replace() 用新的文档替换当前文档第十一天Window的事件、cookie、历史记录、iframe操作1. Window的事件onscroll 当浏览器滚动时触发onresize 当浏览器调整大小时触发鼠标滚轮事件2. Cookie用很小的文本文件存储的浏览网页留下的信息，下次访问可直接读取此信息作用：保存数据到客户端浏览器 。可用于：保存用户登录状态、跟踪用户行为（如保存地区）、定制页面样式、创建购物车限制：每个域最多保存50个cookie，单个cookie大小不能超过4k储存方式：document.cookie = 名字值; expires=过期时间;3. 历史记录浏览器保存的历史记录可以前进后退：back() 退一步，类似在浏览器的工具栏上点击返回按钮forward() 前进一步，类似在浏览器中点击前进按钮go() 跳转到相应页4. iframe操作操作子页面document.getElementById(ifrmae的ID).contentWindow.document.getElementById(元素的ID)操作父页面window.parent.document.getElementById(元素的ID)操作顶级页面window.top.document.getElementById(元素的ID)第十二天 AJAX1. AJAX概念作用：在不刷新页面的情况下更新页面数据、节省用户操作时间并且提高用户体验减少数据请求、传输获取数据过程：初始化-发送请求-服务器收到请求-服务器处理-返回结果Form（get,post）Action提交Method方法Get传输数据较少且不安全，post支持大量数据传输，在内部传输一般看不见，而且安全性高。try catch用于异常处理，当try语句里的内容执行出现错误的时候，就会执行catch里的语句。catch里能使用err.message捕获出错的原因。finally里是始终会执行的语句2. AJAX方法Open方法 open(method,url,async)三个参数的含义提交方式 Form-method提交地址 Form-action异步（同步）Send方法发送数据请求，相当于Form的submionreadystatechange事件readyState属性：请求状态0（初始化）还没有调用open()方法1（载入）已调用send()方法，正在发送请求2（载入完成）send()方法完成，已收到全部响应内容3（解析）正在解析响应内容4（完成）响应内容解析完成，可以在客户端调用了status属性：服务器(请求资源)的状态3. AJAX数据处理返回的内容responseText：返回以文本形式存放的内容responseXML：返回XML形式的内容返回数据的处理数据类型：XML、HTML、JSONEval解析JSON的时候需要注意的地方JSON.parse() : 字符串解析成对象第十三天 性能优化、原型、闭包1. JS性能优化JS提供了三种循环：for(;)、while()、for(in)。在这三种循环中 for(in)的效率最差，因为它需要查询Hash键，因此应尽量少用for(in)循环，for(;)、while()循环的性能基本持平。如果需要遍历数组，应该先缓存数组长度，将数组长度放入局部变量中，避免多次查询数组长度减少全局变量使用，局部变量的访问速度要比全局变量的访问速度更快，因为全局变量其实是window对象的成员，而局部变量是放在函数的栈里的。尽量少使用eval，每次使用eval需要消耗大量时间尽量避免对象的嵌套查询，比如访问这样的对象obj1.obj2.obj3.obj4。应先将obj4以局部变量保存，然后再访问它包含的内容。使运算符时，尽量使用+，、*、=等运算符号，而不是直接进行赋