XMLJavaScript高级AjaxjQuery笔记Day-9JavaScript高级

JavaScript高级（2）一、闭包1、闭包的定义闭包，指的是词法表示包括不被计算的变量的函数，也就是说，函数可以使用函数之外定义的变量。闭包函数它可以获取一个函数内部的局部变量，并且闭包函数所作的作用域会一直保存在内存中。2、闭包的特点1、使用闭包，内存不会释放2、闭包函数可以读取局部变量查看上面的闭包的定义中的案例即可。3、案例1、每隔一秒依次输出一个数2、单击li，显示它的下标写法二：二、事件绑定1、事件驱动编程事件的组成：用户的行为 + 浏览器的JavaScript引擎（捕获用户的行为） + 事件处理程序2、事件监听函数绑定与移除1、HTML标签的on-属性如果事件处理程序代码比较多，我们在script代码段中先定义一个函数，然后在“on”标签中调用这个函数即可。2、标签节点的事件属性移除事件：3、使用addEventListener（或IE8中的attachEvent）方法用这种方式可以为一个dom对象添加多个相同的事件。：IE8+及火狐浏览器绑定方式、IE8及更低版本浏览器绑定方式、兼容性封装函数移除事件的方法：3、事件中的this指向4、常用事件页面事件onload ：当页面载入完毕后触发焦点事件onfocus ：当获取焦点时触发onblur ：当失去焦点时触发鼠标事件onmouseover ：当鼠标悬浮时触发onmouseout ：当鼠标离开时触发键盘事件onkeypress ：当键盘按下时触发（如果按住某个键不松开，会一直触发press事件）onkeydown ：当键盘按下时触发onkeyup ：当键盘弹起时触发其他事件：onchange ：内容改变时会触发，常用语selectoptiononsubmit ：表单提交时触发，这个事件要给form绑定而不是给提交按钮绑定onresize ： 页面窗口改变大小时会触发onscroll ：滚动条滚动时触发onprogress ：进度事件，用于上传文件的进度三、DOM1、什么是DOMDOM全称是Document Object Model（文档对象模型），它是JS将HTML按文档结构和内容层次抽象出的模型，使得JS有了访问HTML的能力，能够实现对HTML中内容的操作。DOM存在广泛，PHP以及其他语言也有各自的DOM模型。DOM模型呈现树状结构，因此也叫“树模型”，树中的内容（标签、属性、文本）称为“节点”，包含有元素节点（标签）、属性节点、文本节点。每个节点，都是一个dom节点对象。2、节点与DOM模型根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点：整个文档是一个文档节点，用document对象表示每个 HTML 元素是元素节点，比如html、head、body、a、h1HTML 元素内的文本是文本节点 每个 HTML 属性是属性节点，比如href 注释是注释节点3、节点之间的关系4、元素节点查询操作1、基于文档（document）查询get：获取Element：一个元素Elements：多个元素By：根据.Tag：标签document.getElementById(元素id); /得到一个dom对象 document.getElementsByTagName(标签名); /得到的是一个数组，数组的每个单元是一个dom对象上面两个方式推荐使用，因为这两个方法兼容性最好。document.getElementsByClassName(类名); /IE8+支持，就是从IE9支持 得到的是一个数组，数组的每个单元是一个dom对象document.getElementsByName(元素的name属性); /得到的是一个数组，虽然各个浏览器都可用，但是不推荐 下面两个非常推荐使用的，是h5中才提供的方法document.querySelector(css选择器); /IE7+支持 从IE8支持 得到的是一个dom对象document.querySelectorAll(css选择器); /IE7+支持 从IE8支持 得到的是一个数组2、相互关系查询、根据父节点查找子节点children：查找所有子节点，非w3c标准，但是比较好用，会忽略标签之间的空白childNodes：查找所有的子节点，w3c标准，不太好用，认为标签之间的空白也是一个节点firstChild：查找第一个孩子，认为标签之间的空白也是一个节点lastChild：查找最后一个孩子，认为标签之间的空白也是一个节点firstElementChild：查找第一个孩子，从IE9支持lastElementChild：查找最后一个孩子，从IE9支持parentNode.getEle.()：根据父节点查找子节点、根据子节点查父节点、查询兄弟节点查询兄弟节点：（previousSibling / nextSibling）3、遗留DOM早期DOM访问形式，在一些特定元素的获取上比较方便。被保留下来使用，W3C标准化之后 称为“0级DOM”。document.body访问body节点document.forms 访问所有的表单返回集合document.formN 访问表单项document.anchors 访问所有的锚点返回集合document.links 访问所有的链接返回集合document.images 访问所有的图片返回集合document.all 访问所有的元素5、元素节点增删改操作1、增加元素节点/创建节点方法一：父节点.appendChild(子节点)方法二：父节点.insertBefore(新节点, 参照的节点);2、克隆节点3、修改节点方法：父节点.replaceChild(新节点, 待替换的节点);4、删除节点方法：父节点.removeChild(子节点);7、属性节点操作1、获取元素的属性elementNode.attributes 获取元素的所有属性，elementNode表示元素节点elementNode.getAttribute(属性名)读取一个属性值elementNode.属性名 获取元素的属性2、添加/修改元素的属性elementNode.setAttribute()设置（修改/添加）一个属性值elementNode.属性名 = 值 设置元素的属性3、删除元素的属性elementNode.removeAttribute()删除一个属性4、判断元素是否有哪个属性elementNode.hasAttribute()检测是否有某个属性，有返回true，没有返回false5、案例-全选，反选，取消详见：14全选反选取消.htmlhtml代码：js代码：8、操作css样式1、设置css样式：语法： elementNode.style.css样式 = 值css样式的写法：、一个单词的直接写即可。比如color height 、样式名称带中横线的，去掉中横线，后面单词首字母大写。比如fontSize lineHeight backgroundColor2、获取css样式使用 node.style.样式名称 的方式只能获取行内样式和js已经设置过的样式。在IE中支持node.currentStyle.样式名称火狐支持getComputedStyle(node).样式9、DOM属性DOM有四个属性，分别是：innerHTML获取/设置元素里的html内容nodeNamenodeName 是只读的 元素节点的 nodeName 与标签名相同 属性节点的 nodeName 与属性名相同 文本节点的 nodeName 始终是 #text 文档节点的 nodeName 始终是 #documentnodeValue元素节点的 nodeValue 是 undefined 或 null 文本节点的 nodeValue 是文本本身 属性节点的 nodeValue 是属性值nodeType表示节点的类型元素 1 属性 2 文本 3 注释 8 文档 910、获取元素的位置offsetLeft 元素在网页中水平坐标值ele.offsetLeftoffsetTop 元素在网页中垂直坐标值ele.offsetTopoffsetWidth元素在页面中占据的宽度ele.offsetWidthoffsetHeight元素在页面中占据的高度ele. offsetHeightscrollLeft 滚动条在容器中水平滚动的距离ele.scrollLeftscrollTop 滚动条在容器中垂直滚动的距离ele.scrollTop四、事件对象及和事件对象相关的知识1、事件对象事件发生以后，会生成一个事件对象，作为参数传给监听函数。浏览器原生提供一个Event对象，所有的事件都是这个对象的实例，或者说继承了Etotype对象。不同类型的事件，事件对象有所差异。事件对象中的一些常用属性：keyCode：表示键盘上的键对应的数值。key：表示按键（是一个实际的符号）altKey：表示是否按了alt键，按了结果为true，没按结果为falseshiftKey：表示是否按了shift键，按了结果为true，没按结果为falsectrlKey：表示是否按了ctrl键，按了结果为true，没按结果为falsepageX: 鼠标距离页面左边的距离pageY: 鼠标距离页面上面的距离screenX: 鼠标距离屏幕左边的距离screenY: 鼠标距离屏幕上面的距离不同浏览器获取事件对象的方式不一样：2、冒泡事件阻止冒泡：标准浏览器使用evt.stopPropagati