标签:
开始学习javaScript的小伙伴们,或者是正用到javaScipt的小猿们,都可以将它作为资料参考,基本知识还是很全的以及简单应用;黄色标出的是关键的知识点及解说,可以以它为节点快速找到自己想要知识点;
1 document.write(“<p>dddd</p>”); 2 <button type=”button” onclick=”alert(‘dd’)”>dd</button> 3 x=document.getElementById(“dd”); 4 x.innerHTML=”dd”; 5 .src.match(“dd”) 匹配正则表达式 中含有dd 6 如果有dd则它的值是dd ,否则是 null 7 8 x.style.color=”#ffffff” 给样式赋值 9 if(x==""||isNaN(x)) 验证输入的x是否数字 10 <script src="myScript.js"></script> 引用脚本 11 true false 12 13 var cars=new Array(); 14 cars[0]="Audi"; 15 cars[1]="BMW"; 16 var cars=new Array("Audi","BMW","Volvo"); 数组 17 var person={firstname:"Bill", lastname:"Gates", id:5566}; 18 name=person.lastname; 19 name=person["lastname"]; 都可以 20 var x=message.toUpperCase(); 把文本转换为大写
函数:
1 function dd() 2 { 3 return ; 4 } 5 <button onclick="myFunction(‘Bob‘,‘Builder‘)">点击这里</button> 6 JavaScript 变量的生命期从它们被声明的时间开始。 7 局部变量会在函数运行以后被删除。 8 全局变量会在页面关闭后被删除。 9 === 全等(值和类型) x===5 为 true;x==="5" 为 false 10 11 var person={fname:"John",lname:"Doe",age:25}; 12 13 for (var x in person) 14 { 15 txt=txt + person[x]; 16 } 遍历对象 17 18 function myFunction() 19 { 20 try 21 { 22 var x=document.getElementById("demo").value; 23 if(x=="") throw "empty"; 24 if(isNaN(x)) throw "not a number"; 25 if(x>10) throw "too high"; 26 if(x<5) throw "too low"; 27 } 28 catch(err) 29 { 30 var y=document.getElementById("mess"); 31 y.innerHTML="Error: " + err + "."; 32 } 33 } 自定义错误消息 34 35 function validate_required(field,alerttxt) 36 { 37 with (field) 38 { 39 if (value==null||value=="") 40 {alert(alerttxt);return false} 41 else {return true} 42 } 43 } 验证 44 with (field) 45 { 46 apos=value.indexOf("@") 47 dotpos=value.lastIndexOf(".") 48 if (apos<1||dotpos-apos<2) 49 {alert(alerttxt);return false} 50 else {return true} 51 } 52 } 53 getElementsByTagName 通过类名 54 55 onmouseover-onmouseout 鼠标 移到 移出 56 57 <div id="div1"> 58 <p id="p1">这是一个段落。</p> 59 <p id="p2">这是另一个段落。</p> 60 </div> 61 62 <script> 63 var para=document.createElement("p"); 64 var node=document.createTextNode("这是新段落。"); 65 para.appendChild(node); 66 67 var element=document.getElementById("div1"); 68 element.appendChild(para); 69 </script> 70 71 <div id="div1"> 72 <p id="p1">这是一个段落。</p> 73 <p id="p2">这是另一个段落。</p> 74 </div> 75 76 <script> 77 var parent=document.getElementById("div1"); 78 var child=document.getElementById("p1"); 79 parent.removeChild(child); 80 </script> 对象增加 移出 内容 81 82 person=new Object(); 83 ? person.firstname="Bill" 84 person.lastname="Gates"; 创建对象 并赋值 85 86 function person(firstname,lastname,age,eyecolor) 87 { 88 this.firstname=firstname; 89 this.lastname=lastname; 90 this.age=age; 91 this.eyecolor=eyecolor; 92 } 93 94 myFather=new person("Bill","Gates",56,"blue"); 95 96 document.write(myFather.firstname + " is " + myFather.age + " years old."); 97 给 person创建对象 。对象有三个属性 ,分别取名
1 x.toUpperCase(); 大写 2 continue 3 4 var txt=""; 5 function message() 6 { 7 try 8 { 9 adddlert("Welcome guest!"); 10 } 11 catch(err) 12 { 13 txt="There was an error on this page.\n\n"; 14 txt+="Error description: " + err.message + "\n\n"; 15 txt+="Click OK to continue.\n\n"; 16 alert(txt); 17 } 18 } 19 </script> 抛出错误
字符串样式
1 var str="Hello world!" 2 document.write(str.indexOf("Hello") 定位 0 3 4 var txt="Hello World!" 5 6 document.write("<p>Big: " + txt.big() + "</p>") 7 document.write("<p>Small: " + txt.small() + "</p>") 8 9 document.write("<p>Bold: " + txt.bold() + "</p>") 10 document.write("<p>Italic: " + txt.italics() + "</p>") 11 12 document.write("<p>Blink: " + txt.blink() + " (does not work in IE)</p>") 13 document.write("<p>Fixed: " + txt.fixed() + "</p>") 14 document.write("<p>Strike: " + txt.strike() + "</p>") 15 16 document.write("<p>Fontcolor: " + txt.fontcolor("Red") + "</p>") 17 document.write("<p>Fontsize: " + txt.fontsize(16) + "</p>") 18 19 document.write("<p>Lowercase: " + txt.toLowerCase() + "</p>") 20 document.write("<p>Uppercase: " + txt.toUpperCase() + "</p>") 21 22 document.write("<p>Subscript: " + txt.sub() + "</p>") 23 document.write("<p>Superscript: " + txt.sup() + "</p>") 24 25 document.write("<p>Link: " + txt.link("http://www.w3school.com.cn") + "</p>") 字符串样式
JavaScript方法;
1 var str="Visit Microsoft!" 2 document.write(str.replace(/Microsoft/,"W3School")) 3 结果:Visit W3School! 4 5 document.write(Date()) 6 var d=new Date(); 7 document.write("从 1970/01/01 至今已过去 " + d.getTime() + " 毫秒"); 8 9 var d = new Date() 10 d.setFullYear(1992,10,3) 11 document.write(d) 设置时间 12 13 var d = new Date() 14 document.write (d.toUTCString()) 将当日的日期(根据 UTC)转换为字符串。 15 16 var d=new Date() 17 var weekday=new Array(7) 18 weekday[0]="星期日" 19 weekday[1]="星期一" 20 weekday[2]="星期二" 21 weekday[3]="星期三" 22 weekday[4]="星期四" 23 weekday[5]="星期五" 24 weekday[6]="星期六" 25 26 document.write("今天是" + weekday[d.getDay()]) 27 28 function startTime() 29 { 30 var today=new Date() 31 var h=today.getHours() 32 var m=today.getMinutes() 33 var s=today.getSeconds() 34 // add a zero in front of numbers<10 35 m=checkTime(m) 36 s=checkTime(s) 37 document.getElementById(‘txt‘).innerHTML=h+":"+m+":"+s 38 t=setTimeout(‘startTime()‘,500) 39 } 40 41 function checkTime(i) 42 { 43 if (i<10) 44 {i="0" + i} 45 return i 46 } 47 </script> 48 </head> 49 50 <body onload="startTime()"> 51 <div id="txt"></div> 网页上显示钟 52 53 var mycars = new Array() 54 mycars[0] = "Saab" 55 mycars[1] = "Volvo" 56 mycars[2] = "BMW" 57 58 for (i=0;i<mycars.length;i++)// for (i in Array) 59 { 60 document.write(mycars[i] + "<br />") 61 } 数组遍历 62 63 var arr = new Array(3) 64 arr[0] = "George" 65 arr[1] = "John" 66 arr[2] = "Thomas" 67 68 var arr2 = new Array(3) 69 arr2[0] = "James" 70 arr2[1] = "Adrew" 71 arr2[2] = "Martin" 72 73 document.write(arr.concat(arr2)) 合并输出各项值 74 75 var arr = new Array(3); 76 arr[0] = "George" 77 arr[1] = "John" 78 arr[2] = "Thomas" 79 80 document.write(arr.join()); 81 82 document.write("<br />"); 83 84 document.write(arr.join(".")); 85 86 结果: 87 George,John,Thomas 88 George.John.Thomas 89 90 var arr = new Array(6) 91 arr[0] = "George" 92 arr[1] = "John" 93 arr[2] = "Thomas" 94 document.write(arr + "<br />") 95 document.write(arr.sort()) 96 结果: 97 George,John,Thomas,James,Adrew,Martin 98 Adrew,George,James,John,Martin,Thomas 99 排序 按A.B.C 100 101 function sortNumber(a, b) 102 { 103 return a - b 104 } 105 106 var arr = new Array(6) 107 arr[0] = "10" 108 arr[1] = "5" 109 arr[2] = "40" 110 arr[3] = "25" 111 arr[4] = "1000" 112 arr[5] = "1" 113 114 document.write(arr + "<br />") 115 document.write(arr.sort(sortNumber)) 排序 按值 116 Math.min(7.25,7.30) 返回较大 或较小的数 .max(2,4) 117 document.write(Math.random()) 返回随机数
常数
1 圆周率 2 2 的平方根 3 1/2 的平方根 4 2 的自然对数 5 10 的自然对数 6 以 2 为底的 e 的对数 7 以 10 为底的 e 的对数 8 这是在 Javascript 中使用这些值的方法:(与上面的算数值一一对应) 9 Math.E 10 Math.PI 11 Math.SQRT2 12 Math.SQRT1_2 13 Math.LN2 14 Math.LN10 15 Math.LOG2E 16 Math.LOG10E 值
RegExp是正则表达式的缩写
1 test() 方法检索字符串中的指定值。返回值是 true 或 false。 2 例子: 3 var patt1=new RegExp("e"); 4 5 document.write(patt1.test("The best things in life are free")); 6 7 exec() 方法检索字符串中的指定值。返回值是被找到的值。如果没有发现匹配,则返回 null。 8 9 10 var patt1=new RegExp("e"); 11 12 document.write(patt1.exec("The best things in life are free")); 13 14 var patt1=new RegExp("e"); 15 16 document.write(patt1.test("The best things in life are free")); 17 18 patt1.compile("d"); 19 20 document.write(patt1.test("The best things in life are free")); 21 由于字符串中存在 "e",而没有 "d",以上代码的输出是: 22 truefalse
BOM Window操作
1 window.innerHeight - 浏览器窗口的内部高度 2 window.innerWidth - 浏览器窗口的内部宽度 3 4 window.open() - 打开新窗口 5 window.close() - 关闭当前窗口 6 window.moveTo() - 移动当前窗口 7 window.resizeTo() - 调整当前窗口的尺寸 8 9 screen.availWidth 属性返回访问者屏幕的宽度,以像素计,减去界面特性,比如窗口任务栏 10 screen.availHeight 11 12 location.hostname 返回 web 主机的域名 13 location.pathname 返回当前页面的路径和文件名 14 location.port 返回 web 主机的端口 (80 或 443) 15 location.protocol 返回所使用的 web 协议(http:// 或 https://) 16 location.href 属性返回当前页面的 URL。 17 18 <script> 19 function newDoc() 20 { 21 window.location.assign("http://www.w3school.com.cn") 22 } 23 </script> 24 </head> 25 <body> 26 27 <input type="button" value="加载新文档" onclick="newDoc()"> 28 29 history.back() - 与在浏览器点击后退按钮相同 30 history.forward() - 与在浏览器中点击按钮向前相同
confirm在弹出内输入内容,并控制时间弹出setTimeout
1 function show_confirm() 2 { 3 var r=confirm("Press a button!"); 4 if (r==true) 5 { 6 alert("You pressed OK!"); 7 } 8 else 9 { 10 alert("You pressed Cancel!"); 11 } 12 } 13 </script> 14 </head> 15 <body> 16 17 <input type="button" onclick="show_confirm()" value="Show a confirm box" /> 18 19 20 21 22 function disp_prompt() 23 { 24 var name=prompt("请输入您的名字","Bill Gates") 25 if (name!=null && name!="") 26 { 27 document.write("你好!" + name + " 今天过得怎么样?") 28 } 29 } 30 </script> 31 </head> 32 <body> 33 34 <input type="button" onclick="disp_prompt()" value="显示提示框" /> 输入 35 36 function timedMsg() 37 { 38 var t=setTimeout("alert(‘5 秒!‘)",5000) 39 } 5秒后显示 40 41 42 var c=0 43 var t 44 function timedCount() 45 { 46 document.getElementById(‘txt‘).value=c 47 c=c+1 48 t=setTimeout("timedCount()",1000) 49 } 50 </script> 51 </head> 52 53 <body> 54 55 <form> 56 <input type="button" value="开始计时!" onClick="timedCount()"> 57 <input type="text" id="txt"> 58 </form> 59 60 <p>请点击上面的按钮。输入框会从 0 开始一直进行计时。</p> 61 62 clearTimeout(t);
基本jQuery与JavaScript区别;
1 JavaScript 方式: 2 function myFunction() 3 { 4 var obj=document.getElementById("h01"); 5 obj.innerHTML="Hello jQuery"; 6 } 7 onload=myFunction; 8 等价的 jQuery 是不同的: 9 jQuery 方式: 10 function myFunction() 11 { 12 $("#h01").html("Hello jQuery"); 13 } 14 $(document).ready(myFunction);
前端学习网站推荐: http://www.w3school.com.cn/
本人正在努力学习中,希望在未来能为大家分享更多更深的知识;
标签:
原文地址:http://www.cnblogs.com/woloveprogram/p/4384325.html