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>

10、JS中如何输出空格

 document.write("&nbsp;&nbsp;"+"1"+"&nbsp;&nbsp;&nbsp;&nbsp;"+"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、事件

  1. 鼠标单击事件( onclick )
  2. 鼠标经过事件(onmouSEOver)
  3. 鼠标移开事件(onmouSEOut)
  4. 光标聚焦事件(onfocus)
  5. 失焦事件(onblur)
  6. 内容选中事件(onselect)
  7. 文本框内容改变事件(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;
原创声明
本站部分文章基于互联网的整理,我们会把真正“有用/优质”的文章整理提供给各位开发者。本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
本文链接:http://www.jiecseo.com/news/show_66668.html
javascript复习总结