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

最新推荐文章于 2022-05-14 09:55:27 发布

TinyTechFlux

最新推荐文章于 2022-05-14 09:55:27 发布

阅读量501

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/u010510134/article/details/50923021

版权

javascript 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//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>
var count10;
function update(){//一般在title中定义函数，在后面使用
if(count>0)
status=count--;
}
function closeW(){
w.close();//w是全局变量，html文件内都可以访问
}
</script>
</head>
<body onload="setInterval('closeW()',1000);">
<script>
if(confirm("继续？")){
alert(继续);
} else{
alert("Bye");
}
var name= 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.0 Transitional//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";
var images=new Array(2);
var index=1;
for(var i=0;i<2;i++){
images[i]=new Image();//document中的元素也是对象
images[i].src=i+".png";
}
function show(){
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.0 Transitional//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 in document.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.0 Transitional//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>
function Rect(w,h){//用来创建对象
this.width=w;this.height=h;//this代表当前对象
this.area=function(){
return this.width*this.height;
}
}
var r=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.0 Transitional//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>hello world</h1>");//document代表html文件对象
var hello;//定义变量
hello="hello";//变量初始化
var age=20;//Javascript变量没有类型，但是值却可以有类型
var ot=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("成年了");
}
var t=1;
switch(t){
case 1:
alert("你好");break;
case 2:
alert("good");break;
}
//循环
while(t<3){
alert(t);
t++;
}
//定义函数
var u=42;
var v=24;
function fun_test(a,b){//可见定义函数时候并不需指点参数的类型
return a+b;
}
document.write("u+v= "+fun_test(u,v)+"<br/>");
//函数变量
var f=new Function("x","y","return x*y");//等价于function f(x,y){return x*y};这样可以动态定义函数
function println(s)
{
document.write(s+"<br/>");
}
function add(a,b)
{
return a+b;
}
function cal(f,a,b){
return f(a,b);//这里f 是一个函数变量
}
document.write(cal(add,5,6)+"<br/>");//将函数名传入另个函数，将其作为参数
//变量的作用空间：定义在函数外的变量在整个html文件中都有效；而定义在函数中的变量只在函数内有效
//数组,javascript的数组是可以自动增加的
var colors=new Array();//或者var marks=new Array(size);var marks=new Array(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);//调用函数进行排序
function compare(value1,value2){
if(value1<value2){
return 1;
}
else if(value1<value2){
return -1;
}else{
return 0;
}
}
colors.reverse();
var colors2=colors.contact("yello",["black","brown:"])//数组连接
var colors3=colors.slice(1,2);//取出数组当中的元素 1 到 3
colors.splice(0,2);//删除从0开始，删除两个
//splice(开始位置，删除个数，插入元素)；
colors.splice(1,0,"red","green");//删除0个，在1处插入两个
//对象
var o =new Object();//创建对象 var ciclr={x:0,y:0,radius:2} var ciclr={x:0,y:0,radius:2};//这里使用大括号而不是方括号，数组才用方括号
o.name="luoshengfeng";
o.age=20;
o.salary=10000;
for(var x in o)//遍历对象中的所有属性for(var in Object)
{
println(x);//访问得到对象的属性名称
println(o[x]);//得到对象属性的值
}
</script>
</body>
</html>