搜索
JavaScript主讲：钟林菲目录数组的常用操作01DOM节点操作02Date类型03String对象04无缝滚动05offset与client06目录event属性07scroll事件08冒泡机制09闭包10面向对象11总结1201.数组的常用操作push()方法可向数组的末尾添加一个或多个元素，并返回新数组的长度。对原数组操作unshift()方法可向数组的开头添加一个或更多元素，并返回新数组的长度。Vararr=[1,2,3]arr.push(4,5,6);arr.unshift(-1,0,);pop()方法删除数组的最后一个元素，并且返回被删除的元素的值。如果数组已经为空，则pop()不改变数组，并返回undefined值。arr.pop();shift()方法用于把数组的第一个元素删除，并返回被删除的元素的值。如果数组是空的，那么shift()方法不进行任何操作，返回undefined值。concat()连接数组，组成新数组arr.concat(4,5,6);创建新数组该方法用于在一个数组后连接另一个或多个数组。它不会改变现有的数组，返回的是连接后的新数组。concat(）方法可以接受值，也可以接受数组作为参数。Vararray1=[];vararray2,arry3array1.concat(array2,array3,...);Number();把对象的值转换为数值。01.数组的常用操作join()将数组各个元素是通过指定的分隔符进行连接成为一个字符串。arr.join(“-”);“1-2-3”split()方法用于把一个字符串分割成字符串数组，必需指定要使用的分隔符。如果分隔符为空字符串(“”)，string中的每个字符都会被分割varstr=“hello-world”str.split(“-”);可指定howmany参数，该参数为数值，指定返回的数组的最大长度。sort()对数组进行排序，返回排序后的数组对象。可接受参数，必须是函数。Vararr=[“b”,”a”,”d”]arr.sort(mysort);functionmysort(a,b){returna-b}splice()用于插入、删除或替换数组的元素。首先，必须指定index，即从何处插入/删除元素。该参数为数值，为元素的下标。其次，必须指定要删除的元素的个数，可以是0。如果未规定此参数，则删除从index开始到原数组结尾的所有元素。如果要插入元素，可将新元素作为参数写在括号内，新元素之间用,隔开。arr=[1,2,3,4]arr.splice(2,2,”5”,”6”)02.DOM节点操作divid=“div1”Varmydiv=document.getElementById(“div1”);父节点：mydiv.parentNode;相邻：mydiv.nextSibling;mydiv.previousSibling子节点：mydiv.childNodes();firstChild()lastChild()document.getElementByIddoucument.getElementsByNamedocument.getElementsByTagName(“li”)document.getElementsByClassName02.DOM节点操作createElement(“”)创建节点：返回一个元素对象cloneNode(false)克隆节点，接受一个参数deep，值为true或false。子节点操作：appendChild()向节点添加最后一个子节点mydiv.appendChild(“p”);insertBefore()在指定的已有子节点之前插入新的子节点。如果未指定已有子节点，会在结尾插入newnode。removeChild()移除指定子节点属性操作：div.getAttribute(“id”)setAttribute(“id”,”mydiv”)removeAttribute(“id”)03.Date()类型获取日期和时间varmydate=newDate(“2016/8/2000:00：00”);getDate()获取日1-31getDay()获取星期0-6getMonth()获取月0-11getFullYear()获取完整年份（浏览器都支持）getHours()获取小时0-23getMinutes()获取分钟0-59getSeconds()获取秒0-59getMilliseconds()获取当前的毫秒getTime()返回累计毫秒数(从1970/1/1午夜)setInterval()setTimeout()04.String对象类型回答下列每个函数的用法：varstr=“helloworld”indexOf(“l”);根据字符返回位置subStr(0,2)第一个参数是截取开始的位置，第二个参数是截取的长度subString(0,2)第一个参数是截取开始的位置，第二个参数是结束位置charAt(3)根据位置返回字符splitjoin合并字符串slice截取字符串toLowerCasetoUpperCase05.练习练习：1.实现倒计时2.元素匀速运动3.元素缓速运动（先快后慢）4.检查上传文件的格式，文件为.jpg或.png为正确格式，其它为错误。5.封装getElementsByClassName()方法06.offset与clientoffsetWidthoffsetHeight得到元素对象包括边框在内的宽度和高度offsetWidth=width+border+paddingdiv{width:220px;border-left:2pxsolidred;padding:10px;}div.offsetWidth=220+2+20clientWidthclientHeight得到元素对象边框以内的宽度和高度，不包括边框注意：offsetWidth，clientWidth与div.style.width的区别06.offset与clientoffsetLeftoffsetTop返回对象与上级元素（最近的带有定位的父级元素）左边或上面的距离如果父级都没有定位则以body为准距离从父级元素的外边距开始算。06.offset与clientoffsetTop与style.top的区别一、最大区别在于offsetLeft、offsetTop可以返回没有定位的元素距离左侧的位置。而style.left、style.top不可以。只有定位的元素才有lefttopright二、offsetTop返回的是数字，而style.top返回的是字符串，除了数字外还带有单位：px。style.left=300px三、offsetTop只能返回，不能设置，而style.top可设置也可返回。四、如果没有给HTML元素指定过top样式，则style.top返回的是空字符串。五、style.left、style.top只能得到行内样式。07.event事件属性我们学过一些事件:onmouseoveronmouseout.....作用于元素本身以及其子元素onmouseenteronmouseleave只作用于元素本身onmousedownonmouseuponclick例：btn.onclick=function(event){语句}event就是事件的本身。在触发DOM上的某个事件时，会产生一个事件对象event，这个对象中包含着所有与事件有关的信息。所有浏览器都支持event对象，但支持的方式不同。比如鼠标操作时候，会添加鼠标位置的相关信息到事件对象中。普通浏览器支持eventie678支持window.event所以我们采取兼容性的写法：varevent=event||window.event;07.event事件属性鼠标键盘属性altKey事件触发时alt键是否被按下，返回true或falseevent.altKey==1ctrlKey事件触发时ctrl键是否被按下，返回true或falsebutton可返回一个整数，指示当事件被触发时哪个鼠标按键被点击。0-1-2或1-4-2(IE)pageX鼠标指针相对于该网页的水平坐标IE6/7/8不支持pageY鼠标指针相对于该网页的垂直坐标IE6/7/8不支持screenX鼠标指针相对于该屏幕的水平坐标screenY鼠标指针相对于该屏幕的垂直坐标target返回触发事件的节点，如生成事件的元素、文档或窗口。Btn.onclick=funtion(event){event.target}type返回当前事件的类型clientX鼠标指针相对于该网页的水平坐标clientY鼠标指针相对于该网页的垂直坐标08.scoll事件onscroll事件在元素滚动条在滚动时触发window.onscroll=function(){}scrollTop网页被卷去的高度。谷歌浏览器和没有声明DTDDOCTYPE：document.body.scrollTop;火狐和其他浏览器document.documentElement.scrollTop;ie9+和最新浏览器window.pageXOffset;pageYOffset（scrollTop）兼容性写法：varscrollTop=window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop||0;08.scroll事件scrollTo(x,y)window.scrollTo(15,15);方法可把内容滚动到指定的坐标。格式：scrollTo(xpos,ypos)xpos必需。要在窗口文档显示区左上角显示的文档的x坐标。ypos必需。要在窗口文档显示区左上角显示的文档的y坐标因为我们的网页大部分都没有水平滚动条，所以，这个x不太常用。09.冒泡事件冒泡:当一个元素上的事件被触发的时候，比如说鼠标点击了一个按钮，同样的事件将会在那个元素的所有祖先元素中被触发。这一过程被称为事件冒泡；这个事件从原始元素开始一直冒泡到DOM树的最上层。顺序IE6.0:div-body-html-document其他浏览器:div-body-html-document-window不是所有的事件都能冒泡。以下事件不冒泡：blur、focus、load、unload09.冒泡阻止冒泡的方法标准浏览器和ie浏览器w3c的方法是event.stopPropagation()IE则是使用event.cancelBubble=truebubble冒泡泡泡cancel取消兼容的写法：if(event&&event.stopPropagation){event.stopPropagation();//w3c标准}else{event.cancelBubble=true;//ie678ie浏览器8}10.闭包用一个函数去访问另外一个函数内部定义的局部变量的方式就是闭包。内部变量是局部变量局部变量只能在函数作用域的内部使用。闭包的特点：优点：不产生全局变量，实现属性私有化。缺点：闭包中的数据会常驻内存，在不用的时候要删掉否则会导致内存溢出。10.闭包functionouterFun(){vara=0;functioninnerFun(){a++;alert(a);}returninnerFun;}varobj=outerFun();obj();1obj();2varobj2=outerFun();obj2();1obj2();2结果：11.面向对象面试题：1.简单说下你对函数的了解2.简单说下你对面向对象的理解3.简单说下你对原型链的理解4.简述你对JS中继承的理解11.面向对象面向对象：通过类可以创建多个具有相同属性和方法的对象。面向对象有两种，基于类的（class-based）面向对象和基于原型的(prototype-based)面向对象在基于类的面向对象方式中，对象（objec