JS学习（七）

来源：互联网发布：cn域名国外空间编辑：程序博客网时间：2024/05/21 17:22

DOM

/Dom 表示的是文档对象模型document object model/

1:作用:JS可以通过DOM来操作网页;

// 文档表示的是整个网页,元素节点表示的是标签,属性节点表示的元素的属性,文本节点是标签中的文字;

varb=document.getElementById("sn");//通过ID来获取对象

b.innerText="bojg";

<buttonid="sn">按钮</button>

<scripttype="text/javascript">

var b=document.getElementById("sn");//通过ID来获取对象

b.innerText="bojg";

</script>

2：事件：事件是用户与游览器的交互（一些行为例如）点击，双击，鼠标移动，关闭窗口

我们可以在事件中对应的属性中设置一些JS代码当事件触发时候运行。

事件可以查相应的文档。

<body>

<buttonondblclick="alert('别点我')">按钮</button> //按钮在被双击的时候执行代码

</body>

3:为对应事件绑定函数来响应事件

<body>

<buttonid="sm">按钮</button>

<scripttype="text/javascript">

//首先我们要获取标签对象；

varbut=document.getElementById("sm")//通过ID属性来获取对象；

//绑定事件

but.onclick=function(){

alert("别点我");

}

</script>

</body>

4：练习图片

<!DOCTYPEhtml>

<html>

<head>

<metacharset="UTF-8">

<styletype="text/css">

margin: 0;

padding:0 ;

}

.box1{

width: 450px;

background-color:#bfa;

padding:10px ;

text-align:center;

margin: 50pxauto;

}

</style>

<scripttype="text/javascript">

window.onload=function(){

varpre=document.getElementById("pre");

varnext=document.getElementById("next");

varimg=document.getElementsByTagName("img")[0];

var index=0;

varimge=["img/1.jpg" , "img/2.jpg", "img/3.jpg", "img/4.jpg"];

pre.onclick=function(){

index--;

if(index<0)

{

index=0;

}

img.src=imge[index];

};

next.onclick=function(){

index++;

if(index>imge.length-1)

{

index=imge.length-1;

}

img.src=imge[index];

}

};

</script>

</head>

<body>

<divclass="box1">

<imgsrc="img/1.jpg"/>

<p></p>

<buttonid="pre">上一张</button>

<buttonid="next">下一张</button>

</div>

</body>

</html>

阅读全文

0 0