JS学习--高级篇.doc

DOM目的是特效=写特效要知道哪些（怎么完成的）如：要使用程序(JS)控制图片的位置图片位置DOM（Document Object Model） 文档对象模型1.Document - 文档（整个文件）特指HTML 、XML文件。(标记语言)2.Object - 对象将HTML元素转为JS对象例：baiduvar obj=document.getElementById(one);注意：如果使用JS操作HTML文档，就需要先将HTML文档结构传换成JS对象3.Model - 模型操作（属性、内容、样式）的模式例：/改属性（对象.属性）obj.href=;obj.title=this is a test;obj.target=_self;/改内容 内容 obj.innerHTML=google;/改样式 注意：带“-”的去掉-,第二个字母大写 如：background-color 应为backgroundColor（）obj.style.backgroundColor=red;一、要学会如何将HTML元素，转成对象（3种方法）也就是“找对象”1.通过文档（document）中的任意标签如：标签名（多个）s、id（唯一）、name（多个）sdocument中的三个方法：var objs=document.getElementsByTagName(标签名);var objs=document.getElementById(ID名);var objs=document.getElementsByName(Name名); /数组接收（通常用于全选、全不选、反选）2.在document中或windows中有一些数组document.scriptsdocument.stylesdocument.applets上面三个不常用document.anchors锚点document.imagesdocument.linksdocument.forms例：/获取第二个的七种方法document.forms1.username.value;document.formsfrm.username.value;document.forms.item(1).username.value;document.forms.item(frm).username.value; /FF不支持这种document.forms.frm.username.value;document.frm.username.value;documentfrm.username.value;document.all（页面中所有标签）返回对文档中所有 HTML 元素的引用/可用于区分IE和非IEif(document.all)alert(IE); elsealert(FF);document.bodydocument.title3.按亲戚关系（标签也叫元素节点）。将文档想成一个倒树， 每一个部分（元素、内容， 属性， 注释）都是一节点。元素节点：如：div form属性节点： 内容节点：nodeType 节点类型nodeName 节点名nodeValue 节点值parentNode 父节点childNodes 所有的子节点 (数组)firstChild 第一个子节点lastChild 最后一个子节点previousSibling上一个同胞nextSibling 下一个同胞例：111122223333var obj=document.getElementById(two);alert(obj.nextS); /cccalert(obj.childNodes0.nodeValue); /2222每个节点都拥有包含着关于节点某些信息的属性。这些属性是：nodeName（节点名称）nodeName属性含有节点的名称。元素节点的nodeName是标签名称 属性节点的nodeName是属性名称 文本节点的nodeName永远是#text 文档节点的nodeName永远是#document 注意：nodeName所包含的XML元素的标签名称永远是大写的。nodeValue（节点值） 对于文本节点，nodeValue属性包含文本。对于属性节点，nodeValue属性包含属性值。nodeValue属性对于文档节点和元素节点是不可用的nodeType（节点类型） nodeType属性可返回节点的类型。 最重要的节点类型是： 元素类型节点类型元素1属性2文本3注释8文档9可以在一个文档流中1. 创建节点document.createElement(img)2. 添加到文档流中 appendChild(); insertBefore();3. 删除节点removeChild();例：向div标签内实现添加和删除操作var one=document.getElementById(one);function add()var img=document.createElement(img);img.src=bbs.gif;/创建一个新元素（任意元素）var aobj=document.createElement(a);/设置对象属性、内容，样式aobj.href=;aobj.target=_blank;aobj.style.backgroundColor=yellow;aobj.appendChild(img);/添加到加其他元素节点对象中one.appendChild(aobj);function del()one.removeChild(one.lastChild);二、要学会操作元素对象的属性和方法（属性，内容）属性：一种是HTML自带的属性，另一个是公用的属性内容：一种形如：内容 改内容：obj.innerHTML=; 内容最好用value改一种形如： 改内容：obj.value=; 所有表单都使用value去操作内容 例：obj.value=;非表单用以下的：内部innerHTML（取出所有内容，包括HTML标签）innerText（过滤掉中间的HTML标签）火狐不支持，火狐用obj.textContent/ie和ff ie 使用innerText 而ff使用textContent例：function ieff(obj, value)if(document.all)if(typeof(value)=undefined) return obj.innerText;elseobj.innerText=value; elseif(typeof(value)=undefined)return obj.textContent;elseobj.textContent=value;外部（即：内部内容加标签）outerTextouterHTML三、要学会操作元素对象的样式（改一条，改多条）例：obj.style.backgroundColor=red;obj.style.fontSize=3cm;obj.style.display=none; /隐藏/改多条（批量属性操作）.helloobj.className=hello;/obj.className+= hello;事件（与页面的交互）=事件处理1.事件源（发生事件的组件，一个事件源可以有多个事件）如：按钮、标签2.事件（怎么操作，固定的）如：点击鼠标：click单击dblclick双击mouseover鼠标放上mouseout鼠标离开mouseup抬起mousedown按下mousemove移动键盘：keyup抬起keydown按下keypress键盘事件文档：load加载unload关闭表单：focus焦点blur失去焦点change改变例：选择不同下拉列表时，图片发生变化前后左右/*select对象中的 options是一个数组，所有下拉列表项select对象事件发生改变时，选择的索引顺序是 selectedIndex */var tu=document.getElementById(tu);function show(obj)var f=obj.optionsobj.selectedIndex.value;tu.src=images/ren_+f+_1.gif;submit提交事件其他：scroll滚动事件selected事件.3.事件处理程序 有三种加事件的方法第一种：如：aaa第二种:对象.on事件=事件处理程序例：aaone.onclick=function()document.bgColor=red;第三种(了解就行)：aaaaaalert(222222);=setInterval(); /如: myTime=setInterval(show(),1000); 每隔一秒执行一次setTimeout(); /一次性定时,返回一个定时对象 clearTimeout();/清除定时对象，清除一条（主要用于页面跳转、选项卡） clearInterval(); /如： clearInterval(myTime);=浏览器对象模型窗体对象(window.成员)当前窗体window弹出窗体（相当于当前窗体的子窗体） open(URL,窗体名称,窗口规格)返回一个对象、opener（open方法打开的窗口的源窗口）在父窗体中可以找到子窗体对象，在子窗体中可以找到父窗体对象*分帧窗体 可以在一个窗体中控制其他窗体（只要能找到其他窗体）例：index.htmldemo.html 格式：window.属性window.方法（参数）opener.属性opener.方法（参数）self.属性self.方法（参数）parent.属性 /parent当前窗口或框架的框架组parent.方法（参数）top.属性 /top最上方的窗口top.方法（参数）窗口名称.属性窗口名称.方法（参数）以下为窗口对象的子对象document（整个文档）注意文档流问题（已经加载的文档，再输出(如：document.write)时就变新的文档）document.createElement(元素(标签)名);创建一个对象 如：var aobj=document.createElement(a);aobj.href=;aobj.innnerHTML=;/添加到其他元素节点对象中document.body.appendChild(aobj);one.removeChild(one.lastChild); /用外层容器删除内层的event(事件对象)发生什么事件，事件对象就代表什么是事件srcElement 代表事件源对象keyCode 事件发生时的键盘码clientX 、clientYscreenX 光标相对于该屏幕的水平位置 screenY光标相对于该屏幕的垂直位置returnValue例： document.oncontextmenu=function(e) /oncontextmenu文本菜单事件（相当于右击）alert();var ev=e|window.event;ev.returnValue=false;/相当于直接return false;cancelBubble例：function show1()alert(click); /点击body体时弹出一个框function show2()alert(click img bbs.gif); /不加下面的属性。点击图片弹出两个框event.cancelBubble=true;例：function show()var code=window.event.keyCode; /FF不兼容alert(code);最好用下面的(解决了兼容问题)：window.document.onkeyup=function(e) /keypress只能获取数字、字母键、escvar ee= e | window.event;alert(ee.keyCode);form(表单对象)例：username:password:function sub()/表单对象var frm=document.frm;/改属性和样式frm.action=two.php;frm.method=get;/提交frm.submit(); /表单特有的（可以做自动提交）表单的属性名不要起这个名字setTimeout(sub(),30*60*1000);与Form对象有关的:focus()焦点例：blur()失去焦点submit()提交事件change(); /改变事件 (值被改变就触发)historyhistory.go(-1); 后退一步history.back(); 后退location(用来确定位置)如：几秒钟跳转到其他页面用于的页面跳转的1.header(Location:index.php)（PHP）2. (HTML)（这个要记）3.setTimeout(function()window.location=demo.html; /(这个要记)/或 location.reload(true); /刷新页面 （这个要记）/或 window.location.replace(demo.html); (没有后退按钮出现)/或 window.navigate(demo.html);,3000); (JS)screen（获取屏幕的宽度、高度、可用宽度、可用高度）screen.属性.窗体对象(window)：自然属性openeropen方法打开的窗口的源窗口closed判断窗口是否关闭，返回boolenstatus状态栏临时信息（调试程序时经常用）对象(窗体子对象)属性 如：window.document.方法：setInterval(); 如setInterval(show(),1000); 每隔一秒执行一次setTimeout(); /一次性定时,返回一个定时对象clearTimeout(); /清除定时对象，清除一条（主要用于页面跳转、选项卡）clearInterval();alert();confirm();close()与盒子位置有关的=滚动的文字、图片(还可以用标签)div.scrollTopdiv.offsetTopdocument.body(还可以是其他标签).offsetWidth; /网页可见区域的宽度（也就是的标签自身可见的宽度）document.body.offsetHeightdocument.body.scrollWidth（滚动区域的宽度）document.body.scrollTop; /网页被卷去的高度document.body.scrollHeight; /scrollHeight=scrollTop+offsetHeightdocument.body.scrollLeft;例：浮动的广告（始终固定在一个位置）#onewidth:100px;height:1