js函数全解析-经典大全!

Sheet1 JAVASCRIPTECMAScriptBOM浏览器对象DOM字符串数值布尔对象null对象undefined引用列 表 关于同志近三年现实表现材料材料类招标技术评分表图表与交易pdf视力表打印pdf用图表说话 pdf 完成数组对象变量typeof():获得变量类型相互转化数值----字符串类型变化内容不变布尔----字符串true---->"true"false--->"false"布尔----数值true---->NANfalse--->NAN遍历数组for(keyinarray){//循环体}字符串函数库1--indexof("char")---字符对应的下标，没找到就返回-12--lastIndexOf("char")----查找字符最后一次出现的位置3--substr(start,length)---字符截取4--substring(start,end)---两个参数都不能为负值的截取函数5--replace(查找，替换成什么)----查找参数一般是一个正则表达式6--split("分隔符")----返回是数组对象，分隔符可以用正则表达式7--toUpperCase()----转换成大写toLowerCase()----转换成小写正则表达式1--字符串对象的方法varstr="abc@163.com"document.write(str.match(/\w+@\w+(\.\w+)+/));2--正则表达式对象的方法$reg=RegExp(/\w+@\w+(\.\w+)+/);varre=$reg.test("abc@163.com");document.write(reg);数学函数库Nath.round(number)四舍五入Math.ceil(number)向上取整Math.floor(number)向下取整Math.max(number,number,....);Math.min(number,number,....);Math.random()随机小数Matho.sqrt(number)平方根Math.sqrt(number)平方根时间日期函数库vard=newDate();d.getFullYear()四位年;d.getYear()两位年d.getMonth()获得月;d.getDate()获得日d.getHours()获得时;d.getMinutes()获得分d.getSeconds()获得秒;d.getDay()获得星期获得时间日期字符串d.toLocaleString()d.toLocaleString();d.toLocaleTimeString();数组函数库arr.lenght()长度（属性）arr.push(value)尾部追加arr.unshift(value)头部追加arr.pop()尾部删除arr.shift()尾部删除arr.toString()将数组转化成字符串，“，”默认分隔符arr.join("分隔符")将字符串组成数组arr.reversse()数组反转arr.sort()数组排序A:window对象(浏览器窗口)1:方法 window.alert("内容");//提示对话框 window.confirm("内容");//确认对话框 window.setTimeout("函数名()",时间);//定时器 window.open("页面的地址");//打开一个新的浏览器窗口 window.open("地址","pop","width=值,height=值,left=值,top=值"); window.close();//关闭当前浏览器窗口2:属性 window.location="页面地址";//跳转页面 window.screenLeft;//获得当前窗口的左边距(只读) window.screenTop;//获得当前窗口的上边距(只读) window.screen.width;//获得屏幕的宽(只读) window.screen.height;//获得屏幕的高(只读) window.opener;//opener窗口（a1通过open(a2),则a1就是a2的opener打开者） window.parent;//父窗口(框架窗口中使用) window.history.back(-1)后退一页B-->location(浏览器的地址栏)-->location既是window对象的属性又是document对象的属性获取地址栏的内容(localhost:81/0816/test.html?a=1&b=2)：1:属性： host//域名 href//url全部内容 pathname//路径部分 port//端口 search//?号传值部分2:方法： location.reload(false|true)//页面刷新-->点击按钮去刷新页面 location.replace("url")//跳-设当前文档的URL，并history对象的地址列表中删除这个 URL==window.location="页面地址";//跳转页面C--->screen对象是window对象的属性1:属性 window.screen.availHeight//屏幕的可见区域高度 window.screen.availWidth//屏幕的可见区域宽度 window.screen.height//高度 window.screen.width//宽度 +------------------------------------------+ |用来获取屏幕的宽度 | |然后加载不容的样式文件| |使页面呈现不同的效果 | +------------------------------------------+2:扩展方法 window.moveTo(winx,winy);//移动整个网页的显示的位置------>仅仅IE可运行 window.resizeTo(width,height) //作用：改变窗口大小到设定的宽和-高----->仅仅IE可运行D-->document对象(当前整个html文档)1:方法 document.write("内容");//将文字信息输出到html文档上(先清屏再显示内容) document.getElementById("标签id");//通过标签id获得一个标签对象[****]--->所有标签都可看成为一个类 document.getElementsByName("标签name");//通过标签的name获得一组标签对象 document.getElementsByTagName("标签");//通过标签获得一组标签对象2:属性 document.title;//设置或获得当前html文档的标题 document.body;//设置或获得body标签的相关属性 document.form;//设置或获得form表单对象 document.URL//url地址==window.location属性的值，得到当前的url地址 document.images//得到页面中的所有img标签 document.links//得到页面中的所有a标签E-->body---->是document对象的属性1:document.body节点对象的属性： document.body.clientWidth//页面可见区域的宽 document.body.clientHeight//网页内容实际高度(FF)---IE、Opera认为offsetHeight=clientHeight+滚动条+边框 document.body.offsetWidth//整个页面的宽 document.body.offsetHeight//整个页面的高 document.body.scrollWidth//水平滚动条的宽 document.body.scrollHeight//竖直滚动条的滚动范围 document.body.scrollTop//竖直滚动条往下滚动了多少（页面往上走多少） document.body.scrollLeft//F--->小结： html标签有什么属性，对应的节点对象就有什么属性 varobj=document.getElementsByTagName("input"); obj[0].className="but";----------->对应class属性 obj[0].value="addedborder"------>对应value属性 obj[0].style="width:200px;"------>对应styel属性，但style又对应一个对象 obj[0].style.backgroundColor="#ffad00";//样式表---->所有属性名，必须采用小驼峰命名规则-----------------------------------------------------------------------------------------------------------------------------------------------------------G---->获得标签内容(双标签) 1:对象.innerHTML：获得标签内的html所有内容 2:对象.innerText：获得标签内的text所有内容应用1---->漂浮广告divid="piao"定义漂浮的内容样式：position:absolute;飘：left:100px;toprightbottom动：动态改变lefttop的值varob=document.getElementById("piao");ob.style.left//每一条样式语句都是style的属性ob.style.top应用2--->定时器1-->vart=setTimeout(函数名,间隔时间)//过多少毫秒启用一次函数函数名：名称"名称()"//每隔一秒往div(id=div1)中写入一些内容（i=0i++）-2-->vart=setInterval(函数名,间隔时间)//每间隔一定毫秒数，执行函数clearTimeout(t)clearInterval(t)应用3--->验证码刷新改变img的src属性，做到重新请求yanzhen.phpvarob=document.getElementsByTagName("img");ob[0].src="../0802/yanzhen.php?abc="+Math.random();应用4--->表单验证当输入内容不合法时，如何让表单不提交 a、提交时，自动检查所有的输入框内容，如果都合法，提交，否则不提交 事件：onsubmit="returnfalse|true" b、表单节点对象的方法：submit() c、提交按钮--->disabledDOM节点的基本操作属性也是对象1--DOM获得所有的子节点----属性：childNodes----类型：NOdeList-----所有子节点的列表，方法item(i)可以访问第i+1个节点 //NodeListObj[i]==NodeListObj.item(i) 属性：nodeName------类型：String-------节点名称，根据节点类型而定义 //火狐浏览器中会将各个节点之间的空白处也当成一个节点计算出来，就会出现空文本节点2--DOM获得节点的父节点 -----属性：parentNode----类型：Node---------指向节点的父节点，如果已经是根节点，则返回null 属性：nodeName==tagName3--DOM的兄弟关系 -----属性：previousSibling--类型：Node---------指向节点的前一个兄弟节点，如果已经是第一个节点，则返回null -----属性：nextSibling---类型：Node---------指向节点的后一个兄弟节点，如果已经是最后一个节点，则返回null //FF等浏览器中带有大量的空格最为空文本节点，所以如果要取得相邻的兄弟节点， 必须divObj.previouseSibling.previouseSibling---连写两个4--访问相邻的兄弟节点 -----属性：nodeType---------类型：Number-------元素节点nodeType为1属性节点nodeType为2文本节点nodeType为3 -----属性：lastChild--------类型：Node---------指向childNodes列表中的最后一个节点 -----属性：firstChild-------类型：Node---------指向childNodes列表中的第一个节点 -----方法：hasChildNodes()--类型：Boolean------当childNodes包含一个或者多个节点时，则返回一个true //使用nodeType去判断每次遍历到的nodeType都为1即都是元素节点的方式，可以保持火狐和 IE关于空节点问题造成的显示不同的问题5--用getAttribute()方法获得节点的属性 -----方法：getAttribute("属性名")---返回：null---------获得节点的相关属性6--用setAttribute()方法设置节点的属性 -----方法：setAttribute("属性名","属性值")---返回：null-----设置节点的特定属性7--DOM创建并添加新节点 -----方法：createElement("tagName")--返回：null----------创建一个元素节点，nodeType为1 -----方法：createTextNode("value")---返回：null----------创建一个文本节点，nodeType为3 -----方法：appendChild(node)----------返回类型：Node------将node节点添加到childNodes的末尾 //属性节点和文本节点是元素节点的子节点，所以用appendChild（node）给元素节点添加属性和文本节点8--DOM删除节点 ------方法：removeChild(node)----------返回类型：Node------从childNodes中删除node节点 //op.parentNode.removeChild(op);------>自己删除自己的方法9--DOM替换节点 -----方法：replacceChild(oNewP,oOldP)-返回类型：Node------从childNodes中将oldnode节点替换成newnode节点（对象，对象）10-在特定的节点前插入节点------方法：insertBefore(oNewP,oOldP)--返回类型：Node------在childNodes中的oOldP节点之前插入oNewP节点 /*自己写insertAfter()方法----->先得到目标节点的父节点，如果目标节点已经是最后一个节点了， 直接appendChild()插入节点如果不是则：insertBefore(oNewN,targetElement.nextSibing);- -->即插入在目标节点的下一个兄弟之前的位置，就是目标节点之后的节点 */11-利用文件碎片提高页面加载页面的执行效率 ------方法：document.createDocumentFragment();-------创建文件碎片 //先将节点先添加到碎片对象中，通过循环完成多个节点的添加，再一次性添加到页面中去 //op.appendChild(oText);oFragment.appendChild(oP);document.body.appendChile(OFragment);12-使用非标准的innerHTML属性 ------myDiv.innerHTML="<imgsrc="01.jg"title="lovers">";-----在div中加入一段HTML代码，也可以起到相同的作用 //innerHTML非W3cDOM标准的组成部分，对于插入大段HTML代码可以很快的完成要求，但是不会返回任何对刚才 插入内容进行处理的对象，如果需要处理，则还是需要标准的DOM方法13-用className属性修改节点的css类别和追加CSS类别 //网页结构------>HTML------->DOM节点网页表现------>CSS----->DOM的className网页行为-------->javascript -----oMy.className="myUL1";-----替换不添加 -----oMy.className+="myUL2";----追加，同时又两个类名，这是被允许的DOM表格操作1--针对<table>元素rows 表格中所有行的集合deleteRow(position) 删除指定位置上的行insertRow(position) 在row集合上的指定位置插入新行2--针对<tbody>元素rows <tbody>中所有行的集合deleteRows(position) 删除指定位置上的行insertRows(posotion) 在rows集合中的指定位置插入一个新行3--针对<tr>元素cells <tr>中所有单元格的集合deletecell(postion) 删除给定位置上的单元格insertcell(positon) 在cells集合的给定位置插入一个新的单元格4--遍历单元格oTable.rows[i].cells[j] 表示这个表格的第i行第j列oTable.rows[i].cells[j].innerHTML="aaaa"遍历到这个单元格之后去修改<scriptlanguage="javascript">window.onload=function(){ //1----表格中插入行 varoTr=document.getElementById("member").insertRow(2); //获得插入位置行的对象 varaText=newArray();//需要插入的行内容数组 aText[0]=document.createTextNode("fresheggs"); aText[1]=document.createTextNode("W610"); aText[2]=document.createTextNode("Nov5th"); aText[3]=document.createTextNode("Scorpio"); aText[4]=document.createTextNode("1038818"); for(vari=0;i<aText.length;i++){ //2---表格中的行中再插入列 varoTd=oTr.insertCell(i);//获得那行要插入的列的对象 //3----列中再去加入文本子节点 oTd.appendChild(aText[i]); }}</script>插入新行新列新内容<scriptlanguage="javascript">functionmyDelete(){ varoTable=document.getElementById("member"); //删除该行 this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode); //这是响应"delete"文本节点的方法--->this指向文本节点-->parentNode为Td,--->Tr}window.onload=function(){ varoTable=document.getElementById("member"); varoTd; //动态添加delete链接 for(vari=1;i<oTable.rows.length;i++){ oTd=oTable.rows[i].insertCell(5);//获得插入列位置的对象 oTd.innerHTML="<ahref='#'>delete</a>"; oTd.firstChild.onclick=myDelete; //添加删除事件 //某个节点的第一个儿子节点即是文本节点 }}</script>DOM表单控制1--form表单对象的属性和方法action 表单所要提交的URL地址elements 数组，表单中所有表单域的集合enctype 表单向服务器发送数据时，数据应使用的编 码方法，若上传：multipart/form-datalength 表单域的数量method 浏览器发送get或是post请求name 表单的名称submit() 提交表单到指定页面，相当于单机submit按钮reset() 重置表单中的各项到初始值，相当于reset按钮//<labelfor="male">男</label>---设置单击文字可以选中这一项//id值用于label绑定，name值用来将数据提交给服务器2--访问表单中的元素varoForm=document.forms['myForm1'];//获取表单varoTextName=oForm.elements[0];//获取表单中第一个元素varoTextPasswd=oForm.elements["passwd"];//获取name属性为password的元素varoTextContents=oForm.elements.comments;//获得name属性为comments的元素3--表单中元素中的共同属性和方法checked 对于单选按钮和复选框而言，选中则为truedefalutChecked 对于单选按钮和复选框而言，如果初始时时选中的则为truevalue 除了下拉菜单外，所有元素的value值defaultValue 对于文本框和多行文本框，初始设定的value值form 指向元素所在的<form>name 元素的name属性type 元素的类型blur() 使焦点离开这个元素focus() 聚焦到某个元素上click() 模拟用户单击该元素select() 对于文本框，多行文本框而言，选中并高亮显示其中的文本提交表单中的小点A--提交方法2中，按钮和具有按钮功能的图片<inputtype="submit"name="btnSubmit"id="btnSubmit"value="Submit"/><inputtype="image"name="picSubmit"id="picSubmit"scr="submit.jpg"/>B--检测表示是否提交的方法<inputmethod="post"name="myForm1"action="javascript:alert("Submitted");"/>C--无需按钮的提交方法--不会触发onsubmit()方法，故需要在之前完成表单验证1--varoForm=document.forms["myForm1"];oForm.submit();2--<inputtype="button"value="submit"onclick="document.forms['myForm'].submit();"/>设置文本框应用1：控制用户输入字符个数单行文本框：<inputtype="text"name="name"id="name"class="txt"value="姓名"maxlength="10">多行文本框<textareaname="comments"id="comments"cols="40"rows="4"maxlength="50"onkeypress="returnLessThan(this);"></textarea><scriptlanguage="javascript">functionLessThan(oTextArea){ //返回文本框字符个数是否符号要求的boolean值 returnoTextArea.value.length<oTextArea.getAttribute("maxlength");}</script>应用2：设置鼠标经过时自动选择文本//当鼠标经过用户名和密码文本框是能够自动聚焦到文本框，同时选中默认值便于用户直接删除自动聚焦onmouseover="this.focus()";自动全选默认值onmouseover="thisselect()";javascript实现上述功能functionmyFocus(){this.focus();}functionmySelect(){this.select();}window.onload=function(){varoForm=document.forms["myForm1"];oForm.name.onmouseover=myFocus;oForm.name.onfocus=mySelect;}设置单选按钮应用1：检测单选选中项和设置某项被选中<inputtype="button"value="检测选中对象"onclick="getChoice();"/><inputtype="button"value="设置为Conn"onclick="setCholice(0);"/>functiongetChoice(){varoForm=document.forms["myForm1"];varaChoices=oForm.camera;for(i=0;i<aChoices.length;i++){if(aChoices[i].checked)break; }abert("你选中的是："+aChoices[i].value);}functiongetChoice(iNum){varoForm=document.forms["myForm1"];oForm.camera[iNum].checked=true;}设置复选框应用1：全选，全不选，反选<inputtype="button"value="全选"onclick="changeBoxes(1);"/><inputtype="button"value="全不选"onclick="changeBoxes(0);"/><inputtype="buttton"value="反选"onclick="changeBoxes(-1);"/>functionchangeBoxes(action){varoForm=document.forms["myForm1"];varoCheckBox=oForm.hobby;//所有的checkBox项for(vari=0;i>oCheckBox.length;i++)if(action<0){oCheckBox[i].checked=!oCheckBox[i].checked;}//action为1是全选为0全不选else{oCheckBox[i].checked=action;}}设置下拉菜单1--下拉菜单的属性length 表示option的个数selected 布尔值，表示<option>是否被选中SlectedIndex 被选中的选项序号，无则返回-1;对于多选下拉菜单而言，返回被选中的第 一个序号，从0开始计数text 选项的文本value 选项的value值type 下拉菜单的类型，单选返回select-one,多选返回select-multipleoptions 获取选项的数组，oSelectBox.options[2]表示下拉菜单oSelectBox中的第三项应用1：访问单选下拉框的选中项<selectid="constellation"name="constellation"/>functioncheckSingle(){ varoForm=document.forms["myForm1"]; varoSelectBox=oForm.constellation; variChoice=oSelectBox.selectedIndex; //获取选中项 alert("您选中了"+oSelectBox.options[iChoice].text);//选型的文本 alert("您选中了"+oSelectBox.options[iChoice].value);//选项的value值}应用2：访问多选下拉框的选中项<selectid="constellation"name="constellation"multiple="multiple"style="height:180px;"><scriptlanguage="javascript">functioncheckMultiple(){varoForm=document.forms["myForm1"];varoSelectBox=oForm.constellation;varaChoices=newArray();//遍历整个下拉菜单for(vari=0;i<oSelectBox.options.length;i++)if(oSelectBox.options[i].selected)//如果被选中aChoices.push(oSelectBox.options[i].text);//压入到数组中alert("您选了："+aChoices.join());//输出结果}</script>//由于selectIndex属性只能得到被选中的第一个项的序号，故在多选择中没有用处，必须去判断每个项的//selected的属性，看如果是true的话，就表示是被选中的应用3：通用的下拉框访问选中项<selectid="constellation1"name="constellation1"><selectid="constellation2"name="constellation2"multiple="multiple"style="height:120px;"><scriptlanguage="javascript">functiongetSelectValue(Box){varoForm=document.forms["myForm1"];varoSelectBox=oForm.elements[Box];//根据参数相应的选择下拉菜单if(oSelectBox.type=="select-one"){//判断是单选还是多选variChoice=oSelectBox.selectedIndex;//获取选中项alert("单选，您选中了"+oSelectBox.options[iChoice].text);}else{varaChoices=newArray();//遍历整个下拉菜单for(vari=0;i<oSelectBox.options.length;i++)if(oSelectBox.options[i].selected)//如果被选中aChoices.push(oSelectBox.options[i].text);//压入到数组中alert("多选，您选了："+aChoices.join());//输出结果 }}</script><inputtype="button"onclick="getSelectValue('constellation1')"value="查看选项"/><inputtype="button"onclick="getSelectValue('constellation2')"value="查看选项"/>//选中下拉框的方法1---//varoForm=document.forms["myForm1"];//varoBox=oForm.elements[Box];//Box传入的下拉框的名字2---//varoForm=document.forms["myForm1"];//varoBox=oForm.constellation1;//constellation1就是form下的下拉框的name值应用4：添加下拉菜单的选项添加：functionAddOption(Box){ //添加选项 varoForm=document.forms["myForm1"]; varoBox=oForm.elements[Box]; varoOption=newOption("乒乓球","Pingpang"); oBox.options[oBox.options.length]=oOption; //长度刚好比坐标位置多一个，给下个位置一对象}替换：functionReplaceOption(Box,iNum){ //替换选项 varoForm=document.forms["myForm1"]; varoBox=oForm.elements[Box]; varoOption=newOption("乒乓球","Pingpang"); oBox.options[iNum]=oOption; //替换第iNum个选项}插入到某个特定位置：functionAddOption(Box,iNum){ varoForm=document.forms["myForm1"]; varoBox=oForm.elements[Box]; varoOption=newOption("乒乓球","Pingpang"); oBox.insertBefore(oOption,oBox.options[iNum]);}解决IE兼容性问题去插入到特定位置：functionAddOption(Box,iNum){ varoForm=document.forms["myForm1"]; varoBox=oForm.elements[Box]; varoOption=newOption("乒乓球","Pingpang"); //兼容IE7，先添加选项到最后，再移动 oBox.options[oBox.options.length]=oOption; oBox.insertBefore(oOption,oBox.options[iNum]);}//这种解决兼容性问题的方式叫hack---先插入再移动....insertBefore如果没有就创建并插到位置，有则移动删除下拉框中的某个项：functionRemoveOption(Box,iNum){ varoForm=document.forms["myForm1"]; varoBox=oForm.elements[Box]; oBox.options[iNum]=null; //删除选项}Sheet2 Sheet3