js基本操作(基础快速入门篇)

来源：互联网发布：个人出书知乎编辑：程序博客网时间：2024/05/20 02:28

js操作浏览器窗口window (2015/3/29 23:05:26)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script>
varcount10;
functionupdate(){//一般在title中定义函数，在后面使用
if(count>0)
status=count--;
}
functioncloseW(){
w.close();//w是全局变量，html文件内都可以访问
}
</script>
</head>
<body onload="setInterval('closeW()',1000);">
<script>
if(confirm("继续？")){
alert(继续);
} else{
alert("Bye");
}
varname=prompt("your name:");
alert(name);
w=window.open("smallwin.html","smallwin","width=400,height=300,status=12125,resizable=yes");//后面的关于窗口属性参数可以不需要
w.moveTo(0,0);//w.location()可以得到窗口的网址
</script>
<p onMouseOver="status='wangyi';" onmouseout="status='out';"> 段落</p>
</body>
</html>

js操作document元素 (2015/3/29 23:04:36)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<body onload="setInterval('show()',200)">
<img name="mama" height="200" src="1.png"/>
<script>
//document.mama.src="2.png";
varimages=new Array(2);
varindex=1;
for(var i=0;i<2;i++){
images[i]=new Image();//document中的元素也是对象
images[i].src=i+".png";
}
functionshow(){
document.mama.src=images[index].src;
index=(index+1)%2;
}
</script>
</body>
</html>

js 操作document (2015/3/29 23:03:45)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<body>
<img name="mama" src="mama.jpg" />
<p id="p1" name="dancing">段落</p>
<script>
alert(document.images[0].src +""+document.mama);
alert(document.getElememntByName("dancing"));
</script>
<script>
for(x indocument.mama)
{
document.write(x+"<br/>");
}
alert(document.mama.height);
</script>
document中的成员
anchors[]
forms[]
images[]
cookie
title
bgColor
fgColor
linkColor
alinkColor
vLinkColor
</body>
</html>

js函数 (2015/3/29 23:02:54)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<body>
<script>
functionRect(w,h){//用来创建对象
this.width=w;this.height=h;//this代表当前对象
this.area=function(){
returnthis.width*this.height;
}
}
varr=new Rect(2,3);//新建对象
alert(r.area());//调用对象内部的方法
//prototype原型属性这个自己搜索了解
</script>
</body>
</html>

js基础 (2015/3/29 23:01:40)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<body>
<script>
document.write("<h1>helloworld</h1>");//document代表html文件对象
varhello;//定义变量
hello="hello";//变量初始化
varage=20;//Javascript变量没有类型，但是值却可以有类型
varot=true;
document.write(hello+"<br/>");
document.write(hello+age+"="+12/2+"<br/>");//+可以连接两个字符串或者变量
document.write(age>12+"<br/>");
document.write(hello>"eello"+"<br/>")//依次比较字符串中的各个字母
//判断
if(age>18){
alert("成年了");
}
vart=1;
switch(t){
case1:
alert("你好");break;
case2:
alert("good");break;
}
//循环
while(t<3){
alert(t);
t++;
}
//定义函数
varu=42;
varv=24;
functionfun_test(a,b){//可见定义函数时候并不需指点参数的类型
returna+b;
}
document.write("u+v="+fun_test(u,v)+"<br/>");
//函数变量
varf=new Function("x","y","return x*y");//等价于function f(x,y){returnx*y};这样可以动态定义函数
functionprintln(s)
{
document.write(s+"<br/>");
}
functionadd(a,b)
{
returna+b;
}
functioncal(f,a,b){
returnf(a,b);//这里f是一个函数变量
}
document.write(cal(add,5,6)+"<br/>");//将函数名传入另个函数，将其作为参数
//变量的作用空间：定义在函数外的变量在整个html文件中都有效；而定义在函数中的变量只在函数内有效
//数组,javascript的数组是可以自动增加的
varcolors=new Array();//或者var marks=new Array(size);var marks=newArray(d1,d2..);var d=[1,2,3,6];
colors=["red","black","grean"];
println("colors: "+colors[0]+""+colors[1]+""+colors.length);
colors.length=2;//将数组长度缩小可以删除数组中的某些元素
println("colors[2]: "+colors[2]);
println(colors.toString());
println(colors.join("||"));
colors.push("gray","blue");//数组做堆栈
colors.pop();
//排序
colors.sort();//排序
colors.sort(compare);//调用函数进行排序
functioncompare(value1,value2){
if(value1<value2){
return1;
}
elseif(value1<value2){
return-1;
}else{
return0;
}
}
colors.reverse();
varcolors2=colors.contact("yello",["black","brown:"])//数组连接
varcolors3=colors.slice(1,2);//取出数组当中的元素 1 到3
colors.splice(0,2);//删除从0开始，删除两个
//splice(开始位置，删除个数，插入元素)；
colors.splice(1,0,"red","green");//删除0个，在1处插入两个
//对象
varo =new Object();//创建对象 varciclr={x:0,y:0,radius:2} varciclr={x:0,y:0,radius:2};//这里使用大括号而不是方括号，数组才用方括号
o.name="luoshengfeng";
o.age=20;
o.salary=10000;
for(var x in o)//遍历对象中的所有属性for(var inObject)
{
println(x);//访问得到对象的属性名称
println(o[x]);//得到对象属性的值
}
</script>
</body>
</html>

来自为知笔记(Wiz)

0 0