JavaScript笔记知识点整理 图文

JavaScript笔记知识点整理图文JavaScript笔记知识点整理图文/NUMPAGES47JavaScript笔记知识点整理图文JavaScript笔记知识点整理图文JavaScript基础变量：区分大小写（html不区分大小写）变量和作用域：Js在函数内部直接读取全局变量在函数外部无法读取函数内部的局部变量在函数内部声明变量的时候，要使用var，如果不用，则认为声明的是全局变量标识符的命名：第一个字符必须是字母、下划线或$第二个字符及以后：字母、数字、下划线或￥保留字（不可以当做标识符）：声明变量：声明变量：vara；赋值：a=10；声明变量和初始化变量：vara=10；声明多个变量：varx，y，z=10；不声明变量，直接使用：x=10数据类型：Typeof操作符：用来检测变量的数据类型：Undefined：未定义Boolean：布尔型String：字符串Number：数值Object：对象/nullFunction：函数例如：Varsun=“太阳”；Alert（typeofsun）；Undefined类型：定义了一个变量但是没有给这个变量赋值、使用一个为定义的量、或者用了一个不存在的对象的属性的时候，返回undefinedNull类型：空字符，表示不存在的值如果定义的变量准备在将来用于保存对象，那么最好将该变量初始化为null。养成编码的规范，不要忘记初始化变量。Boolean类型：true/false（小写）Varhello=“helloworld”；alert（typeofhello）//返回的是string类型Varhello=Boolean（helloworld；alert（typeofhello）//返回的是boolean类型If语句：Varhello=“helloworld”if(hello){ alert(“如果条件为true，就执行这条语句”);}else{ alert(“如果条件为false，就执行这条语句”);}Number类型：数字型整数或者实数，所有的数字都以浮点型来表示，如：vara=474；varb=54.23；判定是否超过数字型的范围：isfinite（）函数，如果没有超过，返回true，超过了返回false。varbox=10e1000; alert(isFinite(box)); //返回false处理整数：parseInt（）函数String类型：表示由零或多个16位Unicode字符组成的字符序列，即字符串。字符串可以由双引号(“”)或单引号(‘’)表示。Tostring（）函数：把值换成字符串Object类型：一组数据和功能的集合Varbox=newobject（）；Object里可以任意传参，可以传数值、字符串、布尔值等。而且，还可以进行相应的计算。转义序列：\n：换行\t：制表\b：空格\r：回车\f：换页\\：斜杠运算符：数组：Push（）：追加数组数据Pop（）：删除数组最后一个数据Shift（）：移除数组第一个数据Unshift（）:把数据移到数组的第一位实例属性和类属性：实例属性：在函数中用this前缀修饰的变量，要通过对象来访问类属性：在函数中以函数名前缀修饰的变量，类属性是整个类的，可以通过类（函数）来访问。局部变量：只能在函数里面访问函数：函数的声明：无参函数：functionbox（）{Alert（‘只有函数被调用，我才会被执行’）}调用函数：box（）；有参函数：functionbox（name，age）{Alert（‘你的名字’+name+‘年龄’+age）}调用函数并且传参数：box（‘爆米花’，12）；定义函数的三种方式：定义命名函数定义匿名函数使用function类匿名函数vars=newFunction（‘nume’，document.write（‘Function定义的函数’+document.write（“你好”+name））+）递归函数：Return返回值：Arguments对象：是所在函数的一个内置类数组对象，可以用数组的[i]和.length。Sd重载：就是根据参数选择相同函数名而参数不同的函数调用函数的三种方式直接调用函数以call（）方法调用函数：需要动态传入一个函数引用（动态的调用函数）函数的引用.call（调用者，参数1，参数2）以apply（）方法调用函数Apply（）和call（）的区别：Call（）调用的时候，必须在括号内详细的列出每个参数Apply（）动态调用的时候，可以在括号中用arguments来代表所有参数对象的创建使用new关键字调用构造器创建对象使用object直接创建对象Js的对象都是object类的子类使用json创建对象语句Foreach循环：for（var变量名in数组名）{}For循环：for（var变量名；范围；变量++/--）{}If语句While语句Dowhile语句Switch语句Break：跳出整个循环（当前所在的循环）Continue：结束本次循环，进行下一次循环跳出外层循环：设置标签，如图DOM（documentobjectmodel）文档对象模型DOMHTML改变HTML内容：Document.getElementById(id).innerHTML=newhtml;id.innerHTML=新内容或者：改变HTML属性Document.getEelementId(id).attribute=newvalue;id.属性=新的属性值DOMCSSDocument.getEelementId(id).perty=newstyle;id.style.属性=新的属性值DOM事件Onclick事件：在html元素上点击执行function；Ondblclick时间：双击触发Onload事件/onunload事件共同点：在用户进入或者离开页面的时候被触发；用于处理cookie不同点：onload检测发访问者的浏览器类型和版本，加载网页的正确版本Onchange事件：对输入的字段进行验证Onmouseover/onmouseout事件：鼠标放在元素上面/移动的时候触发函数类似伪元素选择器：hover，不同在于这个触发函数Onmousedown/onmouseup事件：点击按钮的时候触发事件1，松开鼠标后，触发事件2，最后结束的时候，类似事件onclick。Onfocus事件：获得焦点Onblur时间：失去焦点Onkeydown/onkeypress/onkeyup：按下键盘某个键的时候触发/单机键盘某个键/松开键盘某个键Onreset：重置表单的时候触发Onsubmit：提交Onsize：改变窗口大小DOM节点添加节点：第一步:创建一个新的元素类型：createElement（）；第二步：在创建一个元素节点第三步：在元素的后面追加这个节点在已有的元素里面追加这个新的元素第四步：定义原有对象的元素名称第五步：向已有的元素后面追加新的元素删除节点：第一步：获取父元素id第二步：获取将要删除元素的id第三步：从父元素中删除子元素修改html元素innerHTML：div/span/td内容的呈现value：textarea内容的呈现className：修改HTML的css样式：class选择器名称style：修改HTML元素的内联css样式options[index]：select指定列表复制当前节点：nodecloneNode（booleant/f）：复制当前节点。当值为true，表示在复制当前节点的同时，复制该节点的全部及其后代当值为false，表示只复制当前节点插入节点：InsertBefore（NodenewNode，NoderefNode）：在refNode节点之前插入newNode替换节点：replaceChild（NodenewNode，NodeoldNode）；为列表框和下拉菜单添加选项HTMLSelectElement的add方法进行添加选项Add（option，before）：在before选项之前添加option选项，before指定为奴的时候可以将option选项添加到最后直接为select的执行选项赋值appendChild（option）；Newoption（text，value，defaultselected，selected）Text：选项的文本Value：选中该选项的值DefaultSelect：默认是否选中选项Selected：该选项当前是否被选中动态添加表格内容：insertRow（index）：在指定索引处插入一行createCaption（）：为表格创建标题insertCell（longindex）：在指定索引处创建一个单元格节点访问HTML元素：ParentNode：返回当前节点的父节点PreviousSibling：返回当前节点的前一个兄弟节点nextSibling：返回当前节点的下一个兄弟节点childElementByTagName（tagName）：返回当前节点的具有指定标签名的所有子节点firstChild：返回当前节点的第一个子节点lastChild：返回当前节点的最后一个子节点访问表单控件<Action：表单提交的地址Element：返回表单内全部表单控件组成的数组Length：个数MethodTarget：_self,_blank,_parent,_top:指定提交表单式的结果窗口Reset（）：重置表单Submit（）：提交表单访问列表框和下拉菜单的选项：Form：返回当前列表框或下拉菜单所在的表单对象Length：Options：返回所有选项组成的数组selectedIndex：返回选中选项的所有type：index：selected：是否被选中text：选项呈现的文本value：每一个选项的value属性访问表格子元素：Caption：标题对象Tfoot：Thead：Tbody：Table.Rows[index]：返回表格的第index+1行Cells:单元格组成的数组Rowindex：行索引删除列表框和下拉菜单的选项Remove（longindex）直接将制定的选项赋值为null删除表格的行或者单元格事件冒泡：当浏览器执行某个动作的时候，页面上有多个元素相应该事件传递方向：从下向上传递事件重定向事件：不用按照dom数上溯，希望给在不同节点之间跳跃Target。fireEvent（Stringevent，Eventevent）：将事件event事件重定向到target对象<head>

<metacharset="UTF-8">

<title>重定向事件</title>

</head>

<bodyonclick="c('tb元素')">

<tableonclick="c('tr元素')">

<tronclick="c('td元素')">

<tdonclick="c('p元素')">

<ponclick="c('btn元素')">

<inputtype="button"value="点击我"onclick="">

</p>

</td>

</tr>

</table>

<hr>

<inputtype="button"id="forward"value="被转发的事件"onclick="c('被转发的事件按钮')">

<divid="re">

</div>

<script>

functionc(who){

//打印写入放入内容

document.getElementById("re").innerHTML+=who+"被点击了";

//取消事件冒泡

event.cancelBubble=true;

//将事件重定向到id为forward的元素

document.getElementById("forward").fireEvent("onclick",event);

}

</script>

</body>Dom句柄特点：句柄之间互不影响，不会覆盖可以减少多次修改AddEventListenter（事件，function）：添加事件句柄RemoveEventListenter（事件，function）：移除事件句柄；注意：加红的function，后面不带括号对象定义：javascript中的所有事物都是对象：字符串、数值、数组、函数…也可以自定义对象。访问对象的属性：pertyname（对象名.属性名）访问对象的方法：objectname.methodname()（对象名.方法()）创建对象：直接创建对象：person=newobject（）；P=“miliy”;Person.age=44;Person.gender=”女”;Document.Write（”姓名：”+）;使用对象构造器：functionperson（name，age，gender）{T=name;This.age=age;This.gender=gender;}Myfriend=newpersion(“andy”,12,”男”)；数字：只有一种数字类型，不定义不同类型的数字八进制：数字的前缀是0，默认是八进制十六进制：数字的前缀是0x，默认为十六进制对象方法：toString：把数字转换为字符串；toLocalString：把数字转换为字符串，使用本地数字格式顺序toFixed：把数字转换为字符串，结果的小数点后有指定位数toOrecision：把数字格式化为指定长度；valueOf：返回一个Number对象的基本数字值数组定义：var数组名=newArray（）；Var数组名=newArray（n）；Var数组名=newArray（元素1，元素2，元素3）；数组变量[i]=值；数组长度：数组名.length修改数组长度：数组名.length=4（你想定义的长度）；拼接数组concat（数组1，数组2，数组3,）；数组转换成字符串：join（分隔符）；删除数组最后一个元素，返回最后一个元素：pop（）；添加元素，返回数组元素：push（）；删除第一个元素，返回第一个元素：shift（）从数组中选择元素重新组建数组：slice（开始位置，结束位置）；删除或者替换元素：splice（位置，多少，元素）；排序数组：sort（）；倒序数组：reverse（）；返回一个包含数组中所有元素的字符串，每个元素用逗号分隔：toString（）；字符串逻辑Math（算数）对象：Math.round（）:四舍五入Math.random（）：返回0-1之间的随机数Math.floor（）：舍去小数点后的，向下取，不进位Math.abs（x）：返回x的绝对值Math.acos（x）：返回x的余弦值Math.sqrt（x）：返回x的平方根Math.pow（x）:返回x的平方查找字符：charAt（位置）：字符串在指定位置处的字符indexOf（字符串，[起始位置]）：从字符串对象指定开始的位置，从前到后查找字符串lastIndexOf（字符串）：从后到前查找子字符串在字符串对象中的位置substring（开始位置，[长度]）：从开始位置开始截取指定长度的字符，返回截取的字符substring（开始位置，结束位置）；split（分隔符）：分割字符串到一个数组中去，把字符串变成数组replace（需要替代的字符，新的字符）；日期对象常用函数：Setxxx：设置日期和事件Getxxx：获取日期和时间；Toxxx：将日期转换成指定格式Date（）：返回当前的日期和时间GetDate（）：从date对象中返回某个月中的某一天getDay（）：从date中返回一周中的某一天7getTime（）：获取从到现在的毫秒数toTimeString：把date对象的时间转换为字符串访问时间对象：ClientX：返回发生鼠标事件在页面中的x坐标ClientY：返回发生鼠标事件在页面中的Y坐标OffsetX：返回发生鼠标事件位置相对于事件源的x坐标OffsetY：返回发生鼠标事件位置相对于事件源的Y坐标（RegExp）正则表达式：作用：用来检索某个文本，使用一种模式来描述要减速的内容定义：vara=newRegExp(“e”);在字符串中检索的时候，寻找的是字符“e”方法：test（）：检索字符串中的指定值，返回值是true或falseexec（）：检索字符串中的指定值，返回的是被找到的值，如果没有匹配到，返回null；compile（）：可以改变检索模式，也可以添加或者删除第二个参数canvas：语法：//获得canvas区域

varcanvas=document.getElementById("diagonal");

//getContext

varcontext=canvas.getContext("2d");

//开始绘制

context.beginPath();

//起点位置MoveTo（x,y)

//终点位置lineTo(x,y)

context.moveTo(70,140);

context.lineTo(140,70);

//把这个线绘制到canvas上

context.stroke();绘制矩形：fillRect(x,y,width,height):矩形：（左上角x坐标，左上角y坐标，矩形宽度，矩形高度）绘制圆：arc（原点，原点，半径，开始的弧度，定义画圆的方向）fill（）：填充stroke（）：描边<canvasid="mycanvas"width="200"height="200"style="border:1pxsolidblack">

</canvas>

<script>

varc=document.getElementById("mycanvas");

varctx=c.getContext("2d");

ctx.fillStyle="pink";

ctx.beginPath();

ctx.arc(70,18,15,0,Math.PI*2,true);

ctx.closePath();

ctx.fill();

</script>绘制带阴影的图形<canvasid="mycanvas"width="200"height="200"style="border:1pxsolidblack">

</canvas>

<script>

varc=document.getElementById("mycanvas");

varctx=c.getContext("2d");

//阴影x轴偏移

ctx.shadowOffsetX=15;

ctx.shadowOffsetY=15;

//模糊半径

ctx.shadowBlur=10;

ctx.shadowColor="#ddd";

ctx.fillStyle="#00f";

ctx.fillRect(20,20,150,100);

//模糊颜色

</script>使用图像：DrawImage（image，dx，dy）：接受一个图片，并将其绘制到canvas中Dx：图片左上角坐标，dy图片左上角y坐标DrawImage（image，dx，dy，dw，dh）：接受一个图片，将其缩放到宽度为dw，高度为dh，把图片放在canvas中（da，dy）的位置DrawImage（image，sx，sy，sw，sh，dx，dy，dw，dh）：接受一个范围，通过（sx，sy，sw，sh）指定图片裁剪的范围，然后把裁剪过得图片放到canvas的位置范围中闭包如何从外部读取局部变量（闭包）：在一个函数内部，再定义一个函数：第一步：定义一个普通函数f1（）；第二步：在f1中定义一个普通函数f2（）；第三步：在f1中返回f2（在f1中返回f2的引用）第四步：执行f1，把f1的返回结果复制给变量c；第五步：执行c（）；函数A的内部函数B被函数A以外的一个变量C引用Functionf1（）{Varn=99;Functionf2(){Alert(n);}Returnf2;}Varresult=f1();Result();//99外部可以访问局部变量闭包：当一个内部函数被其他函数之外的变量引用的时候，就形成了闭包。闭包的特性：函数嵌套函数函数内部可以引用外部的参数和变量参数和变量不会被垃圾回收机制回收闭包的用途：可以直接读取函数内部定义的变量让这些变量的值始终存在内存中注意：问题1：闭包会使函数中的变量都被保存在内存中，内存消耗大，所以不能滥用，否则会导致网页的性能问题，内存泄漏解决方案：在退出函数的时候，将不使用的局部变量全部删除问题2：闭包会在复函数外部，改变复函数内部的变量值，如果把复函数当做对象使用，把闭包当做公用方法（public），内部变量相当于私有属性（privatevalue）不嗯呢该随便改变复函数内部变量的值。JsonJavaScriptObjectNotation：对象表示法格式：{key：value}Json常用内置类：array数组类/Date日期类/Function函数类/Math数学类/String字符串类/Object对象类/Number数值类/Error错误类Json内置对象：它使用JavaScript对象的格式来存储数据。JSON是灵活的，因为它允许

数据结构

是

字符串，数字，布尔值，字符串，和

对象

的任意组合。对象与对象之间要用“，”隔开访问对象属性：正则表达式（RegExp）声明表达式：vara=newRegExp（“hello”）；Vara2=/world/；查找字符串：/字符串/gi小写的g：global（全局）查找全部小写的i：忽略大小写方法：Test（）：检测会否存在，返回值为true/false；exec（）:检索指定的值，返回值是被找到的值，如果没有找到，返回null；字符串正则：match（）：匹配search（）：字符串查找replace（/换掉的字符/，“新字符”）：字符串替换split（）：分割字符串变成数组的时候经常会用到数字选择器：/\d/g获取一个字符串的数字/\d+/g允许表达式匹配一个或者更多的数字单词选择器：/\w/g获取一个字符串中的单词Null字符查找：/\0/g空白选择器：/\s/g查找字符串的空白这里的空白包括：""

(空格符)\r

(回车符)\n

(换行符)\t

(制表符)\f

(换页符)正则表达式的字符大写表示反义：例如：\S表示非空白字符方括号：[]/[abc]/g:对括号内的内容进行查找如：/[1-9]/g:对1-9内的数值进行查找/[^abc]/h：对不在括号内的字符进行查找量词：/n+/：匹配至少包含一个n字符串/n*/：匹配包含0个或者多个的n字符串/n?/:匹配包含0个或者一个n字符串/n{x}/：匹配包含连续x个的n字符串/n{x,y}/：匹配包含连续x个到连续y个的n字符串/n{x,}/:匹配至少含有x连续的n的字符串/n$/:匹配以n结尾的字符串/^n/:匹配以n开头的字符串/字符1（?=字符2）/：匹配字符后面紧跟字符2/字符1（?!字符2）/：匹配字符后面没有紧跟字符2DHTMLDHTML：动态HTML，JS：先获取页面的元素，修改属性+htmlDOM：+css+html动态定位：pixelLeft：像素值pixelRight：旋转：<script>

varcanvas=document.getElementById("canvas");

varctx=canvas.getContext("2d");

//弧度转角度的公式：degree*Math.PI/180

ctx.rotate(20*Math.PI/180);

//绘制的长方形(x,y,width,height)

ctx.fillRect(50,20,100,50);

</script>缩放：<script>

varcanvas=document.getElementById("canvas");

varctx=canvas.getContext("2d");

ctx.strokeRect(5,5,25,15);

//scale(x方向倍数，y方向倍数)

ctx.scale(2,2)//绘制的图形距离画布左上角2倍远的位置

ctx.strokeRect(5,5,25,15);

ctx.scale(2,3)//绘制的图形距离画布左上角2倍远的位置</script>Transform（a,b,c,d,e,f）：这个变换只会影响tranform（）方法调用后的绘图，调用这个方法时，会在前一个变换矩阵基础上创建a：水平缩放绘图b：水平倾斜c：垂直倾斜d：垂直缩放e：水平移动f：垂直移动<canvasid="canvas"style="border:1pxsolidpink">

<script>

varcanvas=document.getElementById("canvas");

varctx=canvas.getContext("2d");

ctx.fillStyle="yellow";

ctx.fillRect(50,20,100,50);

ctx.transform(1,0.5,-0.5,1,30,10);

ctx.fillStyle="pink";

ctx.fillRect(50,20,100,50);

ctx.transform(1,0.5,-0.5,1,30,10);

ctx.fillStyle="blue";

ctx.fillRect(50,20,100,50);

</script>translate（）：重新映射画布上（0,0）的位置translate（）之后调用fillRexc（）之类的方法会添加到x，y坐标值上<body>

<canvasid="canvas"style="border:1pxsolidpink"width="500px"height="800px">

<script>

varcanvas=document.getElementById("canvas");

varctx=canvas.getContext("2d");

ctx.fillRect(50,20,100,50);

ctx.translate(100,100);

ctx.fillRect(50,20,100,50);

ctx.translate(100,100);

ctx.fillRect(50,20,100,50);

</script>

</body>渐变：<script>

varcanvas=document.getElementById("canvas");

varctx=canvas.getContext("2d");

vargrd=ctx.createRadialGradient(75,50,5,90,60,100);

grd.addColorStop(0,"red");

grd.addColorStop(1,"white");

//填充效果

ctx.fillStyle=grd;

c