Javascript教程(重要).doc

Javascript教程，javascript入门,学习笔记,Javascript Tutorials(源自网络）目 录1.基本控件的使用2.让TextArea自动换行3.让TextArea支持Table键4.复制数据到剪贴板5.得到当前选中的文本6.客户端脚本的基本对象7.保护自己编写的HTML和脚本的方法8.IE地址栏前换成自己的图标9.可以在收藏夹中显示出你的图标10.关闭输入法11.直接查看源代码12.在Javascript中自定义一个对象（属性，方法）13.取得控件的绝对位置14.光标是停在文本框文字的最后15.判断上一页的来源16.最小化、最大化、关闭窗口17.检查一段字符串是否全由数字组成18.获得一个窗口的大小19.怎么判断是否是字符20.检测某个网站的链接速度21.各种样式的光标22.让TEXTAREA自适应文字的行数23.日期减去天数等于第二个日期24.选择了哪一个Radio25.获得本页url的request.servervariables()集合26.ENTER键可以让光标移到下一个输入框28.引用其他网页29.常用的正则表达式30.弹出来必须关闭才能继续运行的提示对话框31.取得查询字符串，然后就生成成对的数组32.另类的onload函数33.取得IE的版本34.提交表单到不同地方35.判断是否是整数36.链接css文件和js文件37.引用框架的内容38.打开没有最大化按钮的窗口39.在页面上显示一个有边框的Frame40.判断日期1是不是大于日期241.常用的Javascript内建类的方法42.如何在另一个窗体对原来窗体进行操作43.层的隐藏与显示44.禁止右键45.得到当前显示器的分辨率46.定时运行特定代码47.得到本页网址48.保存当前页面的内容49.用模式窗体，打开一个参数获取窗体50.Web打印文档1.基本控件的使用控件名.value控件名.value控件名i.checked .valuefor each ob in控件名 if ob.checked then window.alert ob.valuenext控件名.checked .value 单行 多行 多选添加选项ExpList.add(new Option(New Option,3);删除选项ExpList.remove(ExpList.selectedIndex); 设置当前选项位置ExpList.selectedIndex=ExpList.length-1;循环整个选项并判断是否被选择for(i=0;iExpList.options.length;i+) if(ExpList.optionsi.selected) /ExpList.optionsi.text; /ExpList.optionsi.value; 单个选项的值ExpList.optionsi.text; ExpList.optionsi.value;重新设计包含的htmlSomePlace1.innerHTML=任意html字符串让该空间的内容消失SomePlace1.style.display=none; 让该空间的内容显示SomePlace1.style.display=block;鼠标滑过出现提示title=Help控件名.value跟随事件Event（声明方式特殊）太过分了！吃饭不叫我document_onmousemove();function document_onmousemove() hello1.style.left=event.x+10; hello1.style.top=event.y+10;2.让TextArea自动换行 使用TextArea的Wrap属性 Wrap may be set to one of the following values: o OFF - Default, lines are not wrapped. o PHYSICAL - Wrap lines and place new line characters where the line wraps. o VIRTUAL - Wrap lines on the screen, but receive them as one line. ASP中手动换行用： replace(rs(A), VBCRLF) str=request.querystring(text1)str=Replace(str, Chr(32), )把空格换成 标志str=Replace(str, vbCrLf, )把回车换行符换成标志调出时再转过来就好了3.让TextArea支持Table键!-function testTab() var sel = document.selection.createRange(); var mytext= sel.text; var i,j,k; if (event.shiftKey & event.keyCode = 9) arr=mytext.split(String.fromCharCode(13,10) mytext= for(k=0;karr.length;k+) for (j=1; j=4;j+) if(arrk.substr(0,1)=u0020) arrk=arrk.slice(1) mytext += arrk + (k=(arr.length-1)? : String.fromCharCode(13,10); with(sel) sel.text = mytext; collapse(true) moveEnd(character,0) moveStart(character,(mytext.length ) * -1) select() window.event.cancelBubble = true; event.returnValue = false; return; if (event.keyCode = 9) arr=mytext.split(String.fromCharCode(13,10) mytext= for(j=0;j4.复制数据到剪贴板JM_cc(txt)window.clipboardData.setData(Text, txt);global.focus();document.execCommand(Paste);window.clipboardData.setData(Text, old);5.得到当前选中的文本var sel = document.selection.createRange(); var mytext= sel.text; /当前选中的文本var e = event.srcElement; /设置文本为选中var r =e.createTextRange();r.moveStart(character,e.value.length);r.collapse(true);r.select();6.客户端脚本的基本对象7.保护自己编写的HTML和脚本的方法 (1). oncontextmenu=window.event.returnValue=false 将彻底屏蔽鼠标右键 no 可用于Table (2). 取消选取、防止复制 (3). onpaste=return false 不准粘贴 (4). oncopy=return false; oncut=return false; 防止复制 (5). 防止被人frame (6). 永远都会带着框架 (7).网页将不能被另存为 8.IE地址栏前换成自己的图标 9.可以在收藏夹中显示出你的图标 10.关闭输入法 11.直接查看源代码12.在Javascript中定义一个对象（属性，方法）function pasta(grain, width, hasEgg) this.grain = grain; this.width = width; this.hasEgg = hasEgg; this.toString = pastaToString; function pastaToString() return Grain: + this.grain + n + Width: + this.width + n + Egg?: + Boolean(this.hasEgg); var P1=new pasta(3,3,false);13. 取得控件的绝对位置/Javascriptfunction getIE(e) var t=e.offsetTop; var l=e.offsetLeft; while(e=e.offsetParent) t+=e.offsetTop; l+=e.offsetLeft; alert(top=+t+nleft=+l);14. 光标是停在文本框文字的最后function cc() var e = event.srcElement; var r =e.createTextRange(); r.moveStart(character,e.value.length); r.collapse(true); r.select();15. 判断上一页的来源asp: request.servervariables(HTTP_REFERER)javascript: document.referrer16. 最小化、最大化、关闭窗口 本例适用于IE17. 检查一段字符串是否全由数字组成18. 获得一个窗口的大小document.body.clientWidth,document.body.clientHeight19. 怎么判断是否是字符if (/x00-xff/g.test(s) alert(含有汉字);else alert(全是字符);20. 检测某个网站的链接速度把如下代码加入区域中:tim=1setInterval(tim+,100)b=1var autourl=new Array()autourl1=autourl2=autourl3=autourl4=autourl5=function butt() document.write() for(var i=1;iautourl.length;i+) document.write( = =) document.write()butt()function auto(url) document.forms0url+b.value=url if(tim200) document.forms0txt+b.value=链接超时 else document.forms0txt+b.value=时间+tim/10+秒 b+function run() for(var i=1;iautourl.length;i+) document.write()run()21. 各种样式的光标auto ：标准光标default ：标准箭头hand ：手形光标wait ：等待光标text ：I形光标vertical-text ：水平I形光标no-drop ：不可拖动光标not-allowed ：无效光标help ：?帮助光标all-scroll ：三角方向标move ：移动标crosshair ：十字标e-resizen-resizenw-resizew-resizes-resizese-resizesw-resize22.让TEXTAREA自适应文字的行数23. 日期减去天数等于第二个日期function cc(dd,dadd)/可以加上错误处理 var a = new Date(dd) a = a.valueOf() a = a - dadd * 24 * 60 * 60 * 1000 a = new Date(a) alert(a.getFullYear() + 年 + (a.getMonth() + 1) + 月 + a.getDate() + 日)cc(12/23/2002,2)24. 选择了哪一个Radiofunction checkme() for each ob in radio1 if ob.checked then window.alert ob.value nextend functionStyleBarcode25.获得本页url的request.servervariables()集合Response.Write VariablesValuefor each ob in Request.ServerVariables Response.Write &ob&Request.ServerVariables(ob)&nextResponse.Write 26.ENTER键可以让光标移到下一个输入框28.引用其他网页29.常用的正则表达式匹配中文字符的正则表达式： u4e00-u9fa5匹配双字节字符(包括汉字在内)：x00-xff匹配空行的正则表达式：ns| *r匹配HTML标记的正则表达式：/.*|/ 匹配首尾空格的正则表达式：(s*)|(s*$)匹配Email地址的正则表达式：w+(-+.w+)*w+(-.w+)*.w+(-.w+)*匹配网址URL的正则表达式：http:/(w-+.)+w-+(/w- ./?%&=*)?(1)应用：计算字符串的长度（一个双字节字符长度计2，ASCII字符计1） Stotype.len=function()return this.replace(x00-xff/g,aa).length;(2)应用：javascript中没有像vbscript那样的trim函数，我们就可以利用这个表达式来实现 Stotype.trim = function() return this.replace(/(s*)|(s*$)/g, ); (3)应用：利用正则表达式分解和转换IP地址 function IP2V(ip) /IP地址转换成对应数值 re=/(d+).(d+).(d+).(d+)/g /匹配IP地址的正则表达式 if(re.test(ip) return RegExp.$1*Math.pow(255,3)+RegExp.$2*Math.pow(255,2)+RegExp.$3*255+RegExp.$4*1 else throw new Error(Not a valid IP address!) (4)应用：从URL地址中提取文件名的javascript程序 s=/page1.htm; s=s.replace(/(.*/)0,(.+).*/ig,$2) ; /Page1.htm(5)应用：利用正则表达式限制网页表单里的文本框输入内容 用正则表达式限制只能输入中文：onkeyup=value=value.replace(/u4E00-u9FA5/g,) onbeforepaste=clipboardData.setData(text,clipboardData.getData(text).replace(/u4E00-u9FA5/g,) 用正则表达式限制只能输入全角字符： onkeyup=value=value.replace(/uFF00-uFFFF/g,) onbeforepaste=clipboardData.setData(text,clipboardData.getData(text).replace(/uFF00-uFFFF/g,) 用正则表达式限制只能输入数字：onkeyup=value=value.replace(/d/g,) onbeforepaste=clipboardData.setData(text,clipboardData.getData(text).replace(/d/g,) 用正则表达式限制只能输入数字和英文：onkeyup=value=value.replace(/W/g,) onbeforepaste=clipboardData.setData(text,clipboardData.getData(text).replace(/d/g,) 30.弹出来提示对话框window.showModalDialog(url); 31.取得查询字符串，然后就生成成对的数组var argstr = window.top.location.search.substring(1,window.top.location.search.length);var args = argstr.split(&); 32.另类的onload函数try Start();catch (exception) 33.取得IE的版本var ieVer = parseFloat(navigator.appVersion.substring(navigator.appVersion.indexOf(MSIE )+5, navigator.appVersion.length)var isIE6 = ieVer = 6.034.提交表单/ aimForm 为表单名 aimPage为提交到的页/提交表单到新建的网页function SubmitFormToNewPage(aimForm,aimPage) aimForm.method=POST; aimForm.target=_blank; aimForm.action=aimPage; aimForm.submit();/在本地提交表单function SubmitFormToLocalPage(aimForm,aimPage) aimForm.method=POST; aimForm.target=_self; aimForm.action=aimPage; aimForm.submit();35.判断是否是整数function IsNum(s) /整数 if(s=null|s=undefined|s.length1) return false; if(isNaN(parseInt(s) return false; else if(parseInt(s)+).length!=s.length) return false; else return true;function IsNumber(JudgeNum) /判断大于0的数 var JudgeStr=JudgeNum.toString(); for (var i=0;iJudgeStr.length;i+) var oneChar=JudgeStr.charAt(i); if (oneChar9) return false; return true;36.链接css文件和js文件37.引用框架的内容window.top.framesmainFrame.location.href=s;在IFRAME标签中引用框架的内容parent.framesmainFrame.location.href在窗口中引用IFrame中的内容window.top.framesmainFrame.confFrame.location.href38.打开没有最大化按钮的窗口window.open(,width=250,height=220,scrollbars=no,resizable=no,center=yes);39.在页面上显示一个有边框的Frame标题 具体内容40.判断日期1是不是大于日期2function IsDate1AfterThanDate2(year1,month1,day1,year2,month2,day2) var iFrom=Date.parse(month1+-+day1+-+year1); var iTo=Date.parse(month2+-+day2+-+year2); if(iFromiTo) return true; else return false;function IsDate(year,month,day) if( (!IsNumber(year)|(year.length!=4) return false; if( (!IsNumber(month)|(month12)|(month31)|(day1) ) return false; var myDate=new Date(); myDate.setFullYear(year,month-1,day); if (isNaN(myDate.getFullYear() return false; else if( (myDate.getFullYear()!=year)|(myDate.getDate()!=day)|(myDate.getMonth()!=(month-1).toString() ) return false; return true; function IsNumber(JudgeNum) var JudgeStr=JudgeNum.toString(); for (var i=0;iJudgeStr.length;i+) var oneChar=JudgeStr.charAt(i); if (oneChar9) return false; return true;41.常用的Javascript内建类的方法 对象方法或属性意义例子Arraylength表示数组大小，也可以通过该属性动态调整数组大小。设置可以不调整它直接扩大数组。var theMonths = new Array(12);theMonths0 = Jan;theMonths1 = Feb;theMonths2 = Mar;theMonths20 = 12;concat把两个数组合并a = new Array(1,2,3);b = new Array(4,5,6);a = a. concat(b)join把数组变为字符串 a = new Array(0,1,2,3,4); b = a.join(-);DateDate.parse(dateVal)将日期转为数字，用于比较两个日期的大小。dateVal格式为month+day+yeariFrom=Date.parse(“10-1-2004”);setFullYear (year,month-1,day)用于判断3个字符串合起来是不是日期或者判断该天是不是存在。这里month从0开始，故和实际值差1myDate.setFullYear(year,month-1,day);if (isNaN(myDate.getFullYear() return false;else if( (myDate.getFullYear()!=year)| (myDate.getDate()!=day)| (myDate.getMonth()!=(month-1) ) return false; Date()获得当前时间d = new Date(); Global （全局类，引用方法可以不要带Global.）isNaN当从字符到日期转换失败，或者从字符到数字转换失败，都返回NaN。用isNaN可以判断返回值是不是NaNparseInt将字符串转换为整数，转换失败返回NaN或者尽量转换。所以用它来判断是不是数字，还要加上判断转化后长度是不是一样parseInt(abc) / 返回 NaN。parseInt(12abc) / 返回 12。parseInt(12) / 返回 12parseFloat转为实数String主要函数和Java或者C一样replace替代某个字符。如果仅替代一个和C一样，如果要替代全部某字符，就得用到了匹配串 re=/#/g; str=str.replace(re,); 把#用代替split将某个字符串按指定间隔符分割var s = The rain in Spain;ss = s.split( ); /ss是一个数组42.如何在另一个窗体对原来窗体进行操作 在打开的新窗体，用window.opener来访问原来窗体的对象。例如 alert(window.opener.hiddens.value); 可以对层进行重写Html代码，例如 window.opener.divS