Javascript教程，javascript入门,javascript学习笔记(经典实例)

目 录 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.选择了哪一个Radio 25.获得本页url的request.servervariables("")集合 26.ENTER键可以让光标移到下一个输入框 28.引用其他网页 29.常用的正则表达式 30.弹出来必须关闭才能继续运行的提示对话框 31.取得查询字符串，然后就生成成对的数组 32.另类的onload函数 33.取得IE的版本 34.提交表单到不同地方 35.判断是否是整数 36.链接css文件和js文件 37.引用框架的内容 38.打开没有最大化按钮的窗口 39.在页面上显示一个有边框的Frame 40.判断日期1是不是大于日期2 41.常用的Javascript内建类的方法 42.如何在另一个窗体对原来窗体进行操作 43.层的隐藏与显示 44.禁止右键 45.得到当前显示器的分辨率 46.定时运行特定代码 47.得到本页网址 48.保存当前页面的内容 49.用模式窗体，打开一个参数获取窗体 50.Web打印文档

1.基本控件的使用 　 控件名.value 控件名.value 控件名[i].checked    .value  for each ob in控件名    if ob.checked then       window.alert ob.value next 控件名.checked    .value Select 1Select 3Select 2Select 1Select 2Select 3Select 4Select 1Select 2Select 3Select 4      单行         多行         多选 添加选项 ExpList.add(new Option("New Option","3")); 删除选项 ExpList.remove(ExpList.selectedIndex); 设置当前选项位置 ExpList.selectedIndex=ExpList.length-1; 循环整个选项 并判断是否被选择 for(i=0;i  if(ExpList.options[i].selected){      //ExpList.options[i].text;      //ExpList.options[i].value;   } } 单个选项的值 ExpList.options[i].text; ExpList.options[i].value; 重新设计包含的html SomePlace1.innerHTML="任意html字符串" 让该空间的内容消失 SomePlace1.style.display="none"; 让该空间的内容显示 SomePlace1.style.display="block"; 鼠标滑过出现提示 title="Help" 控件名.value 跟随事件Event（声明方式特殊） 太过分了！吃饭不叫我 <返回> 2.让TextArea自动换行   使用TextArea的Wrap属性 Wrap may be set to one of the following values: OFF - Default, lines are not wrapped. PHYSICAL - Wrap lines and place new line characters where the line wraps. 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键 <返回> 4.复制数据到剪贴板  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.客户端脚本的基本对象 　 navigator screen window history location frames[]; Frame document anchors[]; links[]; Link applets[] embeds[] forms[]; Form Button Checkbox elements[]; Element Hidden Password Radio Reset Select options[]; Option Submit Text Textarea images[]; Image more >>> 浏览器对象 屏幕对象 窗口对象 　历史对象 　地址对象 　框架对象 　文档对象 　　连接对象 　　Java小程序对象 　　插件对象 　　表单对象 　　　按钮对象 　　　复选框对象 　　　表单元素对象 　　　隐藏对象 　　　密码输入区对象 　　　单选域对象 　　　重置按钮对象 　　　选择区（下拉菜单、列表）对象 　　　　选择项对象 　　　提交按钮对象 　　　文本框对象 　　　多行文本输入区对象 　　图片对象 <返回> 7.保护自己编写的HTML和脚本的方法   (1). οncοntextmenu="window.event.returnValue=false" 将彻底屏蔽鼠标右键     no 可用于Table   (2). 取消选取、防止复制   (3). οnpaste="return false" 不准粘贴   (4). οncοpy="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. 取得控件的绝对位置 //Javascript <返回> 14. 光标是停在文本框文字的最后 <返回> 15. 判断上一页的来源 asp:   request.servervariables("HTTP_REFERER") javascript:   document.referrer <返回> 16. 最小化、最大化、关闭窗口 本例适用于IE <返回> 17. 检查一段字符串是否全由数字组成 <返回> 18. 获得一个窗口的大小 document.body.clientWidth,document.body.clientHeight <返回> 19. 怎么判断是否是字符 if (/[^\x00-\xff]/g.test(s))   alert("含有汉字"); else   alert("全是字符"); <返回> 20. 检测某个网站的链接速度 把如下代码加入区域中: <返回> 21. 各种样式的光标 auto ：标准光标 default ：标准箭头 hand ：手形光标 wait ：等待光标 text ：I形光标 vertical-text ：水平I形光标 no-drop ：不可拖动光标 not-allowed ：无效光标 help ：?帮助光标 all-scroll ：三角方向标 move ：移动标 crosshair ：十字标 e-resize n-resize nw-resize w-resize s-resize se-resize sw-resize <返回> 22.让TEXTAREA自适应文字的行数 <返回> 23. 日期减去天数等于第二个日期 <返回> 24. 选择了哪一个Radio Style Barcode <返回> 25.获得本页url的request.servervariables("")集合 Response.Write "" for each ob in Request.ServerVariables    Response.Write "" next Response.Write " Variables Value "&ob&" "&Request.ServerVariables(ob)&" " <返回> 26.ENTER键可以让光标移到下一个输入框 <返回> 28.引用其他网页 <返回> 29.常用的正则表达式 匹配中文字符的正则表达式： [\u4e00-\u9fa5] 匹配双字节字符(包括汉字在内)：[^\x00-\xff] 匹配空行的正则表达式：\n[\s| ]*\r 匹配HTML标记的正则表达式：/<(.*)>.*<\/\1>|<(.*) \/>/ 匹配首尾空格的正则表达式：(^\s*)|(\s*$) 匹配Email地址的正则表达式：\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)* 匹配网址URL的正则表达式：http://([\w-]+\.)+[\w-]+(/[\w- ./?%&=]*)? (1)应用：计算字符串的长度（一个双字节字符长度计2，ASCII字符计1）             String.prototype.len=function(){return this.replace([^\x00-\xff]/g,"aa").length;} (2)应用：javascript中没有像vbscript那样的trim函数，我们就可以利用这个表达式来实现    String.prototype.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="http://www.9499.net/page1.htm";    s=s.replace(/(.*\/){0,}([^\.]+).*/ig,"$2") ; //Page1.htm (5)应用：利用正则表达式限制网页表单里的文本框输入内容    用正则表达式限制只能输入中文：οnkeyup="value=value.replace(/[^\u4E00-\u9FA5]/g,'')" onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\u4E00-\u9FA5]/g,''))"    用正则表达式限制只能输入全角字符： οnkeyup="value=value.replace(/[^\uFF00-\uFFFF]/g,'')" onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\uFF00-\uFFFF]/g,''))"    用正则表达式限制只能输入数字：οnkeyup="value=value.replace(/[^\d]/g,'') "onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))"    用正则表达式限制只能输入数字和英文：οnkeyup="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函数 <返回> 33.取得IE的版本 var ieVer = parseFloat(navigator.appVersion.substring(navigator.appVersion.indexOf("MSIE ")+5, navigator.appVersion.length)) var isIE6 = ieVer >= 6.0 <返回> 34.提交表单 // 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.length<1)       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;i      var oneChar=JudgeStr.charAt(i);       if (oneChar<"0" || oneChar >"9"){          return false;       }    }    return true; } <返回> 36.链接css文件和js文件 <返回> 37.引用框架的内容 window.top.frames["mainFrame"].location.href=s; 在IFRAME标签中引用框架的内容 parent.frames["mainFrame"].location.href 在窗口中引用IFrame中的内容 window.top.frames["mainFrame"].confFrame.location.href <返回> 38.打开没有最大化按钮的窗口 window.open("http://www.google.com","","width=250,height=220,scrollbars=no,resizable=no,center=yes"); <返回> 39.在页面上显示一个有边框的Frame 标题 具体内容 <返回> 40.判断日期1是不是大于日期2 function IsDate1AfterThanDate2(year1,month1,day1,year2,month2,day2){    var iFrom=Date.parse(month1+"-"+day1+"-"+year1);    var iTo=Date.parse(month2+"-"+day2+"-"+year2);    if(iFrom>iTo)       return true;    else       return false; } function IsDate(year,month,day){    if( (!IsNumber(year))||(year.length!=4))       return false;    if( (!IsNumber(month))||(month>12)||(month<1) )       return false;    if( (!IsNumber(day))||(day>31)||(day<1) )       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;i      var oneChar=JudgeStr.charAt(i);       if (oneChar<"0" || oneChar >"9"){          return false;       }    }    return true; } <返回> 41.常用的Javascript内建类的方法 　 对象 方法或属性 意义 例子 Array length 表示数组大小，也可以通过该属性动态调整数组大小。设置可以不调整它直接扩大数组。 var theMonths = new Array(12); theMonths[0] = "Jan"; theMonths[1] = "Feb"; theMonths[2] = "Mar"; theMonths[20] = "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("-"); Date Date.parse(dateVal) 将日期转为数字，用于比较两个日期的大小。dateVal格式为month+day+year iFrom=Date.parse(“10-1-2004”); setFullYear (year,month-1,day) 用于判断3个字符串合起来是不是日期或者判断该天是不是存在。这里month从0开始，故和实际值差1 myDate.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可以判断返回值是不是NaN   parseInt 将字符串转换为整数，转换失败返回NaN或者尽量转换。所以用它来判断是不是数字，还要加上判断转化后长度是不是一样 parseInt("abc")     // 返回 NaN。 parseInt("12abc")   // 返回 12。 parseInt("12")   // 返回 12 parseFloat 转为实数   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.divStatus.innerHTML="Proctored";   <返回> 43.层的隐藏与显示    只要设置层的style的display属性即可。 比如 隐藏的层    如果要显示它可以通过脚本来控制。例如divTest.style.display = "";  或者  window.document.getElementById("MyDiv").style.display = ""; <返回> 44.禁止右键 <返回> 45.得到当前显示器的分辨率 window.srceen.width 得到屏幕的宽度 window.srceen.height 得到屏幕的高度 <返回> 46.定时运行特定代码 setTimeout(Code,Timeout);   是从现在算起多少微秒后运行该代码（只运行一次） setInterval(Code,Timeout);  是每隔多少微秒运行一次代码 Code是一段字符串，里边是js代码，Timeout是时间间隔，单位是微秒 <返回> 47.得到本页网址 var Url = window.location.href; <返回> 48.保存当前页面的内容 document.execCommand("SaveAs","","C:\\index.htm"); <返回> 49.用模式窗体，打开一个参数获取窗体 主窗体中用    var returnvalue=window.showModalDialog('../webPri/GetDate.asp',frmApplyPriItem,"status=no; help=no; dialogWidth=320px; dialogHeight=120px;"); 子窗体中用    window.returnValue="OK";    window.dialogArguments.FormObject.value <返回> 50.Web打印文档 第1页 　 　 　 　 这样的报表 对一般的要求就够了。 　 第2页 看到分页了吧 　 　 这样的报表 对一般的要求就够了。 　 在基于框架的网页打印时，用如下函数可以打印某个框架内的网页

转载于:https://www.cnblogs.com/xujiaci/archive/2007/09/06/884506.html