Javascript学习笔记内容

精通HTML语言，擅长css+div布局，css3+html5,响应式布局，能快速手写兼容各类常用浏览器的前端代码。精通Photoshop、Dreamweaver、Flash等美工制作软件。对各类常用Javascript效果,query框架有一定的研究，熟悉java和JSP编程，SQL语言，数据库面试题1.Class="box"与.Box{}这两者有区别，大小写必须一致3.剃刀文件是一个.js文件4.Js只写在行为层，html只写在结构层，不要串写。5.选项卡，水平菜单6.什么是函数：一个程序块，执行一项单一任务或一系列任务。好处是具有重用性，降低程序复杂度。7.什么是闭包：有权限访问另一个函数作用域的变量的函数。创建闭包的常见方式就是在一个函数a内部创建另一个函数b，即内部函数。当内部函数在定义它的作用域的外部被引用时，就创建了该内部函数的一个闭包。称外部函数的调用环境为封闭闭包的环境。如果内部函数引用了位于外部函数中的变量，相当于授权该变量能够被延迟使用。因此，当外部函数调用完成后，这些变量的内存不会被释放（最后的值会保存），闭包仍然需要使用它们。闭包的作用就是在a执行完并返回后，闭包使得Javascript的垃圾回收机制GC不会收回a所占用的资源，因为a的内部函数b的执行需要依赖a中的变量。8.(1)vars=confirm();(2)vars;s=confirm();(1)方法声明变量立即赋值更好2.书写CSS样式步骤：a.先做reset样式（将浏览器内置的样式复位，即覆盖）b.按照结构层盒子的嵌套，并列关系写好盒子关系c.按照效果图分析效果给每个盒子添加相应的属性和值9.页面一：alert(s);//报错，找不到页面二：vars;alert(s);//undefined页面三：alert(window.XMLHttpRequest);//不报错，弹出内容10.面向对象：无需关心内部如何，只要知道如何使用它封装、抽象（把主要的内容抽出，创建对象，再进行封装）、继承（子级继承父级的属性和方法）用面向对象做选项卡11.属性和变量的区别，函数和方法的区别属性和方法是属于某对象，是私有的；变量是自由自在的。变量能变成属性，属性不能变成变量。全局变量和函数相当于window的属性：vara==window.afunctionaa()==window.aa=function()面向对象叫"方法"，面向过程叫"函数"，函数是有返回值的方法用对象调用的叫方法（this），直接调用函数名的叫函数事件：就是文档或浏览器窗口中发生的一些特定的交互瞬间。事件处理程序的名字以"on"开头，因此click事件的事件处理程序就是onclick。分类：读取事件页面载入事件onload，对象window用户事件1.onmouseoveronmouseoutonmousemoveonmouseuponmousedownonclickonkeydownonkeyuponcontextmenu（环境菜单）对象document2.onsubmit对象formonsubmit在form上加，不能在submit按钮上加3.keycodeclientXclientYbutton（指示哪一个鼠标键被按下[0无、1左、2右、4中]）offsetXoffsetYpageXpageY对象eventclientXclientY以可视区域来定坐标4.clientWidth可视区域的宽度clientHeight对象documentElement(html)offset可读不可写offsetWidth物体自身宽度，包含边框，填充，不包边界offsetLeft左偏移量，包含左边界scrollscrollTop滚动离开顶端的距离scrollWidthonfocusonbluronreadystatechangesetTimeoutsetInterval对象window设置定时器前可以先关定时器，解决许多问题cookie对象document火狐，查看页面信息functioneventHandler(e){//获取事件对象e=e||window.event;//IE和Chrome下是window.eventFF下是e//获取事件源vartarget=e.target||e.srcElement;//IE和Chrome下是srcElementFF下是target}用CSS3做简单的动画效果但兼容性低，Javascript做复杂的动画效果，JQuery也可做动画效果且兼容性高。8个div语义化不强表格加载速度慢列表ullispana;dldtdd最好解决样式冲突。Javascript最佳实践交互就是网页的元素针对用户的特定行为，产生指定的变化。响应事件。1.是什么？JS是用来实现交互的。它是纯文本的，用任何的纯文本编辑器都能编辑它；同时它是网页的一部分，随着一个html页面被请求，JS脚本也随之下载到了用户的计算机本地，在用户计算机本地渲染运行。它是可读的。2.不是什么？（1）Javascript不是Java。Javascript是轻量级运行在浏览器中的语言，而Java是跨平台的开发多种应用的语言。Jsp网站、安卓都是Java开发的。（2）Javascript和php,asp,jsp完全不同。Javascript是运行在用户计算机中的，是前台的脚本；php,asp,jsp是运行在服务器上的。Javascript的功能单一，仅仅是用来开发页面效果的；php等语言可以与数据库交互，开发网sayName:function(){alert();}};原型模式的不足：它省略了为构造函数传递初始化参数这一环节，结果所有实例在默认情况下都将取得相同的属性值；它最大问题是由其共享的本性所导致，原型中所有属性是被很多实例共享的，这种共享对于函数非常合适，然而，对于包含引用类型值的属性来说，问题就比较突出了。（4）组合使用构造函数模式和原型模式（推荐）176页（5）动态原型模式（6）寄生构造函数模式（7）稳妥构造函数模式（安全）常见的三种节点：元素节点(p)，属性节点(id)，文本节点(text)（查找时的先后顺序）<pid="p1"class="">text</p>4.如何学？增删改查（读写）对htmlcssinnerHTMLcreateTextNodeappendChildparentNodeinsertBeforechildNodesnodeValue行为层的样式优先级最高。Js控制css用style（行间样式），className，setAttributeoP.style.background="";设置行间样式.para{}oP.className="para";设置外部样式oP.setAttribute("class","para");设置外部样式对象（名词）=属性+方法+事件万物皆是对象。属性（名词）：描述对象特征无（）相当于变量用方法（动词）：描述对象的行为有（）相当于函数用，函数名（参数）事件：指令表达式：由运算符和操作数链接起来的式子对象.属性="新的值";赋值对象.方法("参数");调用方法JS对大小写敏感一个盒子可以响应单击事件，也称为为它添加了事件监听。如：<divonlick="bianbiaoti()"></div>事件的三要素：事件源：有监听的HTML标签，即能响应事件的HTML标签。如<div>事件名：用户的特定行为。如：onclick,onmouseover事件的响应：一个个functionHTML事件处理：在标记上加事件然后调用函数（写在结构层）DOM0级事件处理例：window.onload.html事件源（事件发生在谁身上）ie下window.event.srcElement标准下event.targetnodeName：找到元素标签名循环影响性能，找东西放循环体外性能更好事件委托（让别人做）：利用冒泡原理，把事件加到父级上，触发执行效果。浏览器解析：事件捕获-》目标阶段-》冒泡阶段事件委托好处：1.提高性能2.新添加的元素还会有之前的事件性能好：代码少，完成的功能多window.onload=function(){varoUl=document.getElementById("ul");varaLi=oUl.getElementsByTagName("li");varoBtn=document.getElementById("btn");variNow=4;oUl.onmouseover=function(ev){varev=ev||window.event;vartarget=ev.target||ev.srcElement;//alert(target.innerHTML);if(target.nodeName.toLowerCase()=="li"){target.style.background="red";}}oUl.onmouseout=function(ev){varev=ev||window.event;vartarget=ev.target||ev.srcElement;//alert(target.innerHTML);if(target.nodeName.toLowerCase()=="li"){target.style.background="";}}oBtn.onclick=function(){iNow++;varoLi=document.createElement("li");oLi.innerHTML=1111*iNow;oUl.appendChild(oLi);}}函数：内置函数（系统中的函数）、自定义函数有名函数（可实现函数重用）、匿名函数A.三个对话框方法（内置函数）：alert();confirm();prompt();这三个方法是window对象的方法。如何学习函数：1.掌握该函数的功能2.函数有没有返回值（1）vars=alert(true);警告框document.write(s);//得出undefined变量不加引号，如s（2）vars=confirm("你确定吗？");确认框document.write(s);//得出true或false（3）vars=prompt("请输入你的大名","");提示框document.write(s);//得出第二个参数的值或null3.函数的参数（参数的数据类型及参数的个数）4.函数的定义和调用（针对自定义函数）B.自定义函数的定义和调用简单格式functionabc(){功能语句vari=2;varj=1;vars=i+j;alert(s);}调用函数的格式abc();执行环境及作用域：varcolor="blue";functionchangeColor(){varanotherColor="red";functionswapColors(){vartempColor=anotherColor;anotherColor=color;color=tempColor;//这里可以访问color、anotherColor和tempColor}//这里可以访问color和anotherColor，但不能访问tempColorswapColors();}//这里只能访问colorchangeColor();注：无论全局环境还是changeColor()的局部环境都无权访问tempColor，但在swapColor()内部可访问其他两个环境中的所有变量，因为他们是它的父执行环境。使用var声明的变量会自动被添加到最接近的环境中。在函数内部，最接近的环境就是函数的局部环境；在with语句中，最接近的环境是函数环境。如果初始化变量时没有使用var声明，该变量会自动被添加到全局环境。JS高级程序设计第三版94页JavaScript变量可以用来保存两种类型的值：基本类型值和引用类型值。基本类型的值源自以下几种基本数据类型：Undefined、Null、Boolean、Number、String、function编写利器：sublime,webstormSublime:Html:5div...Ctrl+eCtrl+滚动鼠标调整字号按鼠标中键可以多行编辑Ctrl+shift+K删除当前行Ctrl+shift+D复制当前行Ctrl+shift+上下键调整当前行的位置Ctrl+alt+[让CSS格式进行转换（单行，多行）DOM:alert(images.length);//输出图像的数量alert(images[0].src);//输出第一个图像元素的src特性alert(images.item(0).src);//输出第一个图像元素的src特性<imgsrc="myimage.gif"name="myImage"/>varmyImage=dItem("myImage");或写varmyImage=images["myImage"];特殊集合：Document.forms，包含文档中所有的<form>元素，与document.getElementsByTagName("form")得到的结果相同；Document.images，包含文档中所有