javascript复习总结

前端开发作者： 2024-08-22 12:35:01

1.如何插入javascript JavaScript代码写在<script></script>之间。 2.引用JS外部文件 3、js在页面中的位置放在<head>

1.如何插入javascript

2.引用JS外部文件

<script src="script.js"></script>

3、js在页面中的位置

4、javascript语句和符号

“;”分号要在英文状态下输入，同样，JS中的代码和符号都要在英文状态下输入。
虽然分号“;”也可以不写，记得在语句末尾写上分号。

5、注释

6、变量

var 变量名

var mychar;
mychar="javascript";
var mynum = 6;

var mychar;
mychar="javascript";
mychar="hello";

7、判断语句

8、函数

function 函数名()
{
     函数代码;
}

function add2(){
   var sum = 3 + 2;
   alert(sum);
}
add2();

9、输出内容

<script type="text/javascript">
  document.write("I love JavaScript！"); //内容用""括起来，""里的内容直接输出。
</script>

<script type="text/javascript">
  var mystr="hello world!";
  document.write(mystr);  //直接写变量名，输出变量存储的内容。
</script>

<script type="text/javascript">
  var mystr="hello";
  document.write(mystr+"I love JavaScript"); //多项内容之间用+号连接
</script>

<script type="text/javascript">
  var mystr="hello";
document.write(mystr+"<br>");//输出hello后，输出一个换行符
  document.write("JavaScript");
</script>

document.write("  "+"1"+"    "+"23");

结果: 1 23

document.write("<span style='white-space:pre;'>"+" 1 2 3 "+"</span>");

结果: 1 2 3

11、alert对话框

alert(字符串或变量);

<script type="text/javascript">
   var mynum = 30;
   alert("hello!");
   alert(mynum);
</script>

12、JavaScript-提问（prompt 消息对话框）

var myname=prompt("请输入你的姓名:");
if(myname!=null)
  {   alert("你好"+myname); }
else
  {  alert("你好 my friend.");  }

13、打开新窗口（window.open）

14、关闭窗口（window.close）

15、确认（confirm 消息对话框）

16、dom结构

17、通过id获取元素放在

18、innerHTML使用

Object.innerHTML
解释：获取对象文本节点，可作为变量并赋值修改

19、改变元素属性及样式

Object.style.property=new style;

20、显示和隐藏（display属性）

Object.style.display = value

21、变量

正确:           
    mysum            
    _mychar         
    $numa1

错误:
  6num  //开头不能用数字
  %sum //开头不能用除(_ $)外特殊符号,如(%  + /等)
  sum+num //开头中间不能使用除(_ $)外特殊符号，如(%  + /等)

声明变量语法: var 变量名;

var mynum ; //声明一个变量mynum

var num1,mun2 ; //声明一个变量num1

22、自加一，自减一 ( ++和- -)

23、逻辑操作符

24、数组

数组的表达方式：

第一步：创建数组var myarr=new Array(); 
第二步：给数组赋值
        myarr[1]=" 张三";
        myarr[2]=" 李四";
var array=['11','22']

myarray.length; //获得数组myarray的长度

25、二位数组

var myarr=new Array();  //先声明一维 
for(var i=0;i<2;i++){   //一维长度为2
   myarr[i]=new Array();  //再声明二维 
   for(var j=0;j<3;j++){   //二维长度为3
   myarr[i][j]=i+j;   // 赋值，每个数组元素的值为i+j
   }
 }

26、if语句

if(条件)
{ 条件成立时执行代码}

if(条件)
{ 条件成立时执行的代码}
else
{条件不成立时执行的代码}

27、多种选择（switch语句）

28、for循环

29、while/do...while循环

30、定义函数

31、有参数的函数

32、返回值函数

33、事件

鼠标单击事件( onclick ）
鼠标经过事件（onmouSEOver）
鼠标移开事件（onmouSEOut）
光标聚焦事件（onfocus）
失焦事件（onblur）
内容选中事件（onselect）
文本框内容改变事件（onchange）

34、加载事件（onload）

35、卸载事件（onunload）

36、date对象

var Udate=new Date();

var d = new Date(2012,10,1);  //2012年10月1日
var d = new Date('Oct 1,2012'); //2012年10月1日

37、返回/设置年份方法

38、String字符串

39、返回指定位置的字符

stringObject.charAt(index)

40、返回指定的字符串首次出现的位置

stringObject.indexOf(substring,startpos)

41、字符串分割split()

语法：

stringObject.split(separator,limit)

limit返回数组的长度最大值

参数说明:

42、提取字符串substring()

43、提取指定数目的字符substr()

44、Math对象

45、向上取整ceil()

46、向下取整floor()

Math.floor(x)

47、四舍五入round()

Math.round(x)

48、随机数 random()

random() 方法可返回介于 0 ~ 1（大于或等于 0 但小于 1 )之间的一个随机数。

Math.random();

49、Array 数组对象

var  数组名= new Array();

var 数组名 =new Array(n);

var  数组名 = [<元素1>,<元素2>,<元素3>...];

var myArray = [2,8,6];

数组名[下标] = 值;

50、数组连接concat()

<script type="text/javascript">
  var mya1= new Array("hello!")
  var mya2= new Array("I","love");
  var mya3= new Array("JavaScript","!"var mya4=mya1.concat(mya2,mya3);
  document.write(mya4);
</script>

51、指定分隔符连接数组元素join()

arrayObject.join(分隔符)

注意：返回一个字符串，该字符串把数组中的各个元素串起来，用<分隔符>置于元素与元素之间。这个方法不影响数组原本的内容。

52、颠倒数组元素顺序reverse()

arrayObject.reverse()

53、选定元素slice()

arrayObject.slice(start,end)

54、数组排序sort()

arrayObject.sort(方法函数)

myArray.sort(sortMethod);

<script type="text/javascript">
  var myarr1 = new Array("Hello","John","love","JavaScript"); 
  var myarr2 = new Array("80","16","50","6","100","1");
  document.write(myarr1.sort()+"<br>");
  document.write(myarr2.sort());
</script>

Hello,JavaScript,John,love
1,100,16,50,6,80

<script type="text/javascript">
  function sortNum(a,b) {
  return a - b;
 //升序，如降序，把“a - b”该成“b - a”
}
 var myarr = new Array("80","1");
  document.write(myarr + "<br>");
  document.write(myarr.sort(sortNum));
</script>

80,1
1,80,100

55、JavaScript 计时器

56、计时器setInterval()

setInterval(代码,交互时间);

setInterval("clock()",1000)
或
setInterval(clock,1000)

57、计时器setTimeout()

setTimeout(代码,延迟时间);

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
  setTimeout("alert('Hello!')",3000 );
</script>
</head>
<body>
</body>
</html>

58、取消计时器clearTimeout()

clearTimeout(id_of_setTimeout)

59、History 对象

window.history.[属性|方法]

<script type="text/javascript">
  var HL = window.history.length;
  document.write(HL);
</script>

60、返回浏览历史中的其他页面

window.history.go(number);

window.history.go(-2);

window.history.go(3);

location.[属性|方法]

62、Navigator对象

<script type="text/javascript">
   var browser=navigator.appName;
   var b_version=navigator.appVersion;
   document.write("Browser name"+browser);
   document.write("<br>");
   document.write("Browser version"+b_version);
</script>

63、userAgent

navigator.userAgent

function validB(){ 
  var u_agent = navigator.userAgent; 
  var B_name="Failed to identify the browser"; 
  if(u_agent.indexOf("Firefox")>-1){ 
      B_name="Firefox"; 
  }else if(u_agent.indexOf("Chrome")>-1){ 
      B_name="Chrome"; 
  }else if(u_agent.indexOf("MSIE")>-1&&u_agent.indexOf("Trident")>-1){ 
      B_name="IE(8-10)";  
  }
    document.write("B_name:"+B_name+"<br>");
    document.write("u_agent:"+u_agent+"<br>"); 
}

64、screen对象

window.screen.属性

65、屏幕分辨率的高和宽

<script type="text/javascript">
  document.write( "屏幕宽度："+screen.width+"px<br />" );
  document.write( "屏幕高度："+screen.height+"px<br />" );
</script>

66、屏幕可用高和宽度

<script type="text/javascript">
document.write("可用宽度：" + screen.availWidth);
document.write("可用高度：" + screen.availHeight);
</script>

67、getElementsByName()方法

document.getElementsByName(name)

68、getElementsByTagName()方法

document.getElementsByTagName(Tagname)

69、getElementsByTagName()方法

document.getElementsByTagName(Tagname)

70、区别getElementByID,getElementsByName,getElementsByTagName

<input type="checkbox" name="hobby" id="hobby1">  音乐

71、getAttribute()方法

elementNode.getAttribute(name)

72、setAttribute()方法

elementNode.setAttribute(name,value)

73、节点属性

74、访问子节点childNodes

elementNode.childNodes

75、访问子节点的第一和最后项

node.firstChild

node.lastChild

76、访问父节点parentNode

elementNode.parentNode

<div id="text">
  <p id="con"> parentNode 获取指点节点的父节点</p>
</div> 
<script type="text/javascript">
  var mynode= document.getElementById("con");
  document.write(mynode.parentNode.nodeName);
</script>

parentNode 获取指点节点的父节点
DIV

elementNode.parentNode.parentNode

<div id="text">  
  <p>
    parentNode      
    <span id="con"> 获取指点节点的父节点</span>
  </p>
</div> 
<script type="text/javascript">
  var mynode= document.getElementById("con");
  document.write(mynode.parentNode.parentNode.nodeName);
</script>

parentNode获取指点节点的父节点
DIV

77、访问兄弟节点

nodeObject.nextSibling

nodeObject.previousSibling

78、插入节点appendChild()

appendChild(newnode)

79、插入节点insertBefore()

80、删除节点removeChild()

nodeObject.removeChild(node)

node.replaceChild (newnode,oldnew )

82、创建元素节点createElement

document.createElement(tagName)

83、创建文本节点createTextNode

document.createTextNode(data)

84、浏览器窗口可视区域大小

var w= document.documentElement.clientWidth
      || document.body.clientWidth;
var h= document.documentElement.clientHeight
      || document.body.clientHeight;

85、网页尺寸scrollHeight

var w=document.documentElement.scrollWidth
   || document.body.scrollWidth;
var h=document.documentElement.scrollHeight
   || document.body.scrollHeight;

86、网页尺寸offsetHeight

var w= document.documentElement.offsetWidth
    || document.body.offsetWidth;
var h= document.documentElement.offsetHeight
    || document.body.offsetHeight;