JavaScript文档

 开始学习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() - 与在浏览器中点击按钮向前相同

对window的操作

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);

confirm and setTimeout

基本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/  

本人正在努力学习中，希望在未来能为大家分享更多更深的知识；