js学习总结.doc

JS基础1.slice（）与substring（）12.indexOf（）与lastIndexOf（）13.reverse（）与sort（）24.join（），split（）25.mpt（）提示用户输入28. oWin.close()关闭新建窗口，Window.close（）关闭自身窗口，oWin.opener关闭父窗口29.window.history.back（），window.history.forward（）；210. document对象的常用属性211. location对象的常用属性212. Navigator对象属性和方法213. screen对象的属性314. node的常用属性和方法315. getElementById（）获取某个指定的元素;416. getElementsByTagName（）返回一个包含某个相同标签名的元素的NodeList417. 设置节点属性418. 创建和添加节点419. 删除节点620. 替换节点621. 在特定节点前插入节点622.在特定节点之后插入节点723.innerHTML获得某个标记之间的所有内容824.className属性825.IE中的监听方法：926.标准DOM的监听方法：927. 事件常用的属性：928. 鼠标事件1029. Button1030. 键盘事件1031. Html事件1032. 屏蔽鼠标右键1133. 表格常用的DOM操作1134. Form表单对象的属性和方法1235. 访问表单中的元素1236. 设置鼠标经过时自动选择文本1237. 设置下拉菜单1338. 错误处理131.slice（）与substring（）2.indexOf（）与lastIndexOf（）3.reverse（）与sort（）4.join（），split（）5.mpt（）提示用户输入8. oWin.close()关闭新建窗口，Window.close（）关闭自身窗口，oWin.opener关闭父窗口9.window.history.back（），window.history.forward（）；window.history.go（num）其中num为-1时为window.history.back（）效果，为1时为window.history.forward（）效果10. document对象的常用属性Anchors页面中所有锚的集合（由表示）Applets页面中所有applet的集合Embeds页面中所有嵌入式对象的集合（由标记表示）Forms页面中所有表单的集合Images页面中所有图片的集合Links页面中所有超链接的集合（由表示）例：var myLinks=document.links; For(var i=0; imyLinks.Length;i+) myLinksi.target=_blank;/document.URL=“”FF不通用，常使用location.href=“”,不希望用户通过“后退”返回原来的页面可以用location.replace（“”）11. location对象的常用属性Hash如果URL包含书签#则返回该符号后的内容Host服务器的名称Href当前载入的完整URLPathname URL中主机名后的部分Port URL中请求的端口号Protocol URL使用的协议Search 执行GET请求的URL中问号后的部分此外location的reload（）方法还可以重新加载页面，方法的默认值为false。reload（true）表示从服务器上重载，reload（false）从浏览器中的缓存中重载12. Navigator对象属性和方法appCodeName浏览器代码名的字符串表示（例如“Mozilla”）appName官方浏览器名的字符串表示appVersion浏览器版本信息的字符串表示javaEnabled（）布尔值，是否启用了JavaPlatform运行浏览器的计算机平台的字符串表示Plugins安装在浏览器中的插件的组数taintEnabled（）布尔值，是否启用了数据感染userAgent用户代理头字符串的字符串表示（最常用）例：检测浏览器和操作系统var sUserAgent = navigator.userAgent;/检测Opera、KHTMLvar isOpera = sUserAgent.indexOf(Opera) -1;var isKHTML = sUserAgent.indexOf(KHTML) -1 | sUserAgent.indexOf(Konqueror) -1 | sUserAgent.indexOf(AppleWebKit) -1;/检测IE、Mozillavar isIE = sUserAgent.indexOf(compatible) -1 & sUserAgent.indexOf(MSIE) -1 & !isOpera;var isMoz = sUserAgent.indexOf(Gecko) -1 & !isKHTML;/检测操作系统var isWin = (navigator.platform = Win32) | (navigator.platform = Windows);var isMac = (navigator.platform = Mac68K) | (navigator.platform = MacPPC) | (navigator.platform = Macintosh);var isUnix = (navigator.platform = X11) & !isWin & !isMac;if(isOpera) document.write(Opera );if(isKHTML) document.write(KHTML );if(isIE) document.write(IE );if(isMoz) document.write(Mozilla );if(isWin) document.write(Windows);if(isMac) document.write(Mac);if(isUnix) document.write(Unix);13. screen对象的属性availHeight窗口可以使用的屏幕高度，其中包括操作系统元素，如Windows工具栏所需要的空间，单位是像数availWidth窗口可以使用的屏幕宽度colorDepth用户表示颜色的位数Height屏幕的高度Width屏幕的宽度例： window.moveTo(0,0);/左上角位置为（0，10）即离屏幕左侧0px，上侧距离10px；/window.resizeTo(screen.availWidth,screen.availHeight);/调整窗口大小为浏览器可视区域宽度高度window.resizeTo(screen.width,screen.height);/调整窗口大小为屏幕区域宽度高度14. node的常用属性和方法nodeName 返回类型为string的节点名称（tagName同）nodeValue返回类型为string的节点的值nodeType返回类型为Number节点类型：元素节点的值为1，属性节点的值为2，文本节点的值为3firstChild指向childNodes列表中的第一个节点lastChild执行childNodes列表中最后一个节点childNodes所有子节点的列表，方法item（i）可以访问第i+1个节点parentNode指向节点的副节点，如果已是根节点则返回nullpreviousSibling指向前一个兄弟节点，如果该节点已经是最后一个节点，则返回nullnextSibling指向后一个兄弟节点，如果该节点已经是第一个节点，则返回nullhasChildNodes（）当childNodes包含一个或多个节点时返回trueAttributes包含一个元素特性的Attr对象，仅用于元素节点appendChild（node）将node节点添加到childNodes的末尾removeChild（node)从childNodes中删除node节点replaceChild（newnode，oldnode）将childNodes中的oldnode节点替换成newnode节点insertBefore(newnode,refnode)在childNodes中的refnode节点之前插入newnode节点例：getElementsByTagName()function searchDOM()/放在函数内，页面加载完成后才用的onload加载var oLi = document.getElementsByTagName(li);/输出长度、标签名称以及某项的文本节点值alert(oLi.length + +oLi0.tagName + + oLi3.childNodes0.nodeValue);var oUl = document.getElementsByTagName(ul);var oLi2 = oUl1.getElementsByTagName(li);alert(oLi2.length + +oLi20.tagName + + oLi21.childNodes0.nodeValue);客户端语言HTMLJavaScriptCSS 服务器端语言ASP.NETJSPPHP 15. getElementById（）获取某个指定的元素;16. getElementsByTagName（）返回一个包含某个相同标签名的元素的NodeList17. 设置节点属性getAttribute（“title”）获取属性值；setAtrribute（“title”，“11”）设置节点的属性18. 创建和添加节点createElement()创建元素节点createTextNode()创建文本节点createDocumentFragment()创建文档碎片节点例1：创建新节点function createP()var oP = document.createElement(p);var oText = document.createTextNode(这是一段感人的故事);oP.appendChild(oText);document.body.appendChild(oP);事先写一行文字在这里，测试appendChild()方法的添加位置例2：文档碎片function insertPs()var aColors = red,green,blue,magenta,yellow,chocolate,black,aquamarine,lime,fuchsia,brass,azure,brown,bronze,deeppink,aliceblue,gray,copper,coral,feldspar,orange,orchid,pink,plum,quartz,purple;var oFragment = document.createDocumentFragment();/创建文档碎片for(var i=0;iaColors.length;i+)var oP = document.createElement(p);var oText = document.createTextNode(aColorsi);oP.appendChild(oText);oFragment.appendChild(oP);/将节点先添加到碎片中document.body.appendChild(oFragment);/最后一次性添加到页面19. 删除节点例：删除节点function deleteP()var oP = document.getElementsByTagName(p)0;oP.parentNode.removeChild(oP);/删除节点这行文字你看不到20. 替换节点 例：替换节点function replaceP()var oOldP = document.getElementsByTagName(p)0;var oNewP = document.createElement(p);/新建节点var oText = document.createTextNode(这是一个感人肺腑的故事);oNewP.appendChild(oText);oOldP.parentNode.replaceChild(oNewP,oOldP);/替换节点这行文字被替换了21. 在特定节点前插入节点例：插入节点function insertP()var oOldP = document.getElementsByTagName(p)0;var oNewP = document.createElement(p);/新建节点var oText = document.createTextNode(这是一个感人肺腑的故事);oNewP.appendChild(oText);oOldP.parentNode.insertBefore(oNewP,oOldP);/插入节点插入到这行文字之前22.在特定节点之后插入节点例：insertAfter()方法function insertAfter(newElement, targetElement)var oParent = targetElement.parentNode;/首先找到目标元素的父元素if(oParent.lastChild = targetElement)/如果目标元素已经是最后一个子元素了oParent.appendChild(newElement);/则直接用appendChild()加到子元素列表的最后else/否则用insertBefore()插入到目标元素的下一个兄弟元素之前oParent.insertBefore(newElement,targetElement.nextSibling);function insertP()var oOldP = document.getElementById(myTarget);var oNewP = document.createElement(p);/新建节点var oText = document.createTextNode(这是一个感人肺腑的故事);oNewP.appendChild(oText);insertAfter(oNewP,oOldP);/插入节点插入到这行文字之后也就是插入到这行文字之前，但这行没有id，也可能不存在23.innerHTML获得某个标记之间的所有内容例：innerHTMLfunction myDOMInnerHTML()var myDiv = document.getElementById(myTest);alert(myDiv.innerHTML);/直接显示innerHTML的内容/修改innerHTML，可直接添加代码myDiv.innerHTML = ;图库这是一行用于测试的文字24.className属性parentNodefunction myDOMInspector()var myItem = document.getElementById(myDearFood);var parentElm = myItem.parentNode;while(parentElm.className != colorful & parentElm != document.body)parentElm = parentElm.parentNode;/一路往上找 parentElm.className=css1;/修改css样式 parentElm.className+=css2;/追加css样式相当于class=css1 css2alert(parentElm.tagName); 糖醋排骨圆笼粉蒸肉泡菜鱼板栗烧鸡麻婆豆腐25.IE中的监听方法：object.attachEvent(onclick,fuc);添加监听函数object.detachEvent(onclick,fuc);删除监听函数26.标准DOM的监听方法：object.addEventListener(onclick,fuc,false);添加监听函数,false表示为冒泡型事件object.removeEventListener(onclick,fuc,false);删除监听函数,false表示为冒泡型事件27. 事件常用的属性：oP.onclick=function(oEvent)if(window.event) oEvent=window.event;事件常用的属性和方法IE标准DOM类型可读/可写说明altKeyaltKeyBooleanR/W按下Alt键则为True，否则为falsebuttonbuttonIntegerR/W鼠标事件，值对应按下的鼠标键cancelBubblecancelBubbleBooleanIE R/WDOM RIE中设置为true可取消事件向上冒泡DOM 设置为true为只读stopPropagation()FunctionN/A可以调用该方法来阻止事件向上冒泡clientXclientXIntegerIE R/WDOM R鼠标指针在客户端区域的坐标，不包括工具栏、滚动条等clientYclientYctrlKeyctrlKeyBooleanIE R/WDOM R按下Ctrl键则为true，否则为falsefromElementrelatedTargetElementIE R/WDOM R鼠标指针所离开的元素toElementrelatedTargetElementIE R/WDOM R鼠标指针正在进入的元素charCodeIntegerR按下按键的Unicode值keyCodekeyCodeIntegerR/WIE中keypress事件表示按下按键的Unicode值，keydown/keyup事件为按键的数字代号DOM中keypress时为0，其余为按下按键的数字代号detailIntegerR鼠标按键被单击的次数returnValueBooleanR/W设置为false时可取消事件的默认行为preventDefault()FunctionN/A可以调用该方法来阻止事件的默认行为screenXscreenXIntegerIE R/WDOM R鼠标指针相对于整个计算机屏幕的坐标值screenYscreenYshiftKeyshiftKeyBooleanIE R/WDOM R按下Shift键则为true，否则为falsesrcElementtargetElementIE R/WDOM R引起事件的元素/对象typetypeStringIE R/WDOM R事件的名称28. 鼠标事件Click 单击鼠标左键时触发Dbclick 双击鼠标左键时触发（IE和FF对此响应事件顺序不同，应尽量避免使用双击事件）Mousedown 单击任意一个鼠标按键时触发Mouseout 鼠标指针在某个元素上，移出该元素边界时触发Mouseover 鼠标指针移到另一个元素上时触发Mouseup 松开鼠标任意一个按键时触发Mousemove 鼠标指针在某个元素上移动时持续触发29. Buttonbutton属性及不同浏览器中的键值button的值IEFF0未按下按键左键1左键中键（滑轮）2右键右键3同时按下左、右键不支持组合键，未按下任何键时button值为undefined，4中键（滑轮）5同时按下左、中键6同时按下右、中键7同时按下左、右、中键30. 键盘事件Keydown 按下键盘上某个按键时触发，一直按住某键则会持续触发Keypress 按下某个键盘并产生字符时触发，即忽略Shift，Alt，Ctrl等功能键Keyup 释放某个按键时触发31. Html事件Load 页面完全加载后在window对象上触发，图片加载完成后在其上触发Unload 页面完全卸载后在window对象上触发，图片卸载完成后在其上触发Error 脚本出错时在window对象上触发，图片无法载入时在其上触发Select 选择了文本框中的一个或多个字符时触发Change 文本框失去焦点时，并且在它获取焦点后内容发生过改变时触发Submit 单击“提交”按钮时在表单form上触发Focus 任何元素或窗口获取焦点时触发Blur 任何元素或窗口失去焦点时触发32. 屏蔽鼠标右键鼠标右键会触发contextmenu事件屏蔽鼠标右键function block(oEvent)if(window.event)oEvent = window.event;oEvent.returnValue = false;/IE取消默认事件elseoEvent.preventDefault();/FF取消默认事件document.oncontextmenu = block;屏蔽鼠标右键33. 表格常用的DOM操作修改单元格内容oTable.rowsi.cellsj.innerHTML=属性/方法说明针对元素caption指向元素（如果存在）tBodies指向元素的集合tFoot指向元素（如果存在）tHead指向元素（如果存在）rows表格中所有行的集合deleteRow(position)删除指定位置上的行insertRow(position)在rows集合中的指定位置插入一个新行creatCaption()创建元素并将其放入表格中deleteCaption()删除元素针对元素rows中所有行的集合deleteRows(position)删除指定位置上的行insertRows(position)在rows集合中的指定位置插入一个新行针对元素cells中所有单元格的集合deleteCell(position)删除指定位置上的单元格insertCell(position)在cells集合中的指定位置插入一个新的单元格34. Form表单对象的属性和方法Action表单所要提交到的URL地址Elements数组，表单中所有表单域的集合Enctype表单想服务器发送数据时，数据应该使用的编码方法，某人为application/x-www-form-urlencoded，如果要上传文件，则应该使用multiparty/form-dataLength表单域的数量Method浏览器发送GET请求或者POST请求Name表单的名称，即标记中的name属性Submit()提交表单到指定页面，相当于单击submit按钮Reset()重置表单中的各项到初始值，相当于单击reset按钮35. 访问表单中的元素1.设置for为input的name，鼠标移到label上时光标会自动跳到input中2. 表单中的元素都在elements集合中 Var oForm=document.formsmyForm1;/获取表单 Var oTextName=oForm.elements0;/获取第一个元素 Var oTextPasswd=oForm.elementspasswd;/获取name属性为passwd的元素Var oTextComments=oFments;/获取name属性为comments的元素3. 表单中元素的共同属性和方法 Checked对应单选按钮和复选框而言，选中则为true，通过name属性进行分组 defaultChecked对于单选按钮和复选框而言，如果初始值是选中的则为true Value除了下拉菜单以外，所有元素的value属性值 defaultValue对于文本框和多行文本框而言，初始设定为value值 Form指向元素所在的 Name 元素的name属性 Type元素的类型 Blur()使焦点离开某个元素 Focus()聚焦到某个元素上 Click()模拟用户单击该元素 Select()对应文本框，多行文本框而言，选中并高亮显示其中的文本36. 设置鼠标经过时自动选择文本Onmouseover=this.focus();Onfocus=this.select();37. 设置下拉菜单Length表示选项option的个数Selected布尔值，表示选项option是否被选中SelectedInd