你的位置:首页 > Java教程

[Java教程]JavaScript 操作页面元素


 

1 事件的三要素

  事件源:有监听的HTML标签,能响应时间的HTML标签,就是事件源。
  事件名:用户的特定行为,比如onclick(单击)
  事件的响应:就是一个个function

  事件的响应,就是function,那么编程就是编写事件的响应。响应中,最重要的就是想清楚被操作的对象。


下面给大家看一个小例子:单击第一个红色盒子,第二个会变为蓝色。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>JS入门</title>
<style>
div{
width: 100px;
height: 100px;

margin: 100px;
}
</style>
<script>
function bianse(){
document.getElementById("box2").style.backgroundColor ="blue"
}
</script>
</head>
<body>
<div onclick="bianse()"></div>
<div id="box2"></div>
</body>
</html>

  通过这个例子,可以看出页面上的两个盒子,点击第一个盒子让第二个盒子变蓝,第一个盒子就是事件源,第二个盒子就是被操作的对象。
其中:
  getElementById→通过Id来找到此元素。


    现在要让盒子2变蓝,所以要让JavaScript得到盒子2这个元素,得到元素的办法,就需要通过ID来得到它。
注意:
document.getElementById("")
    这种命名法称为驼峰命名法,长的一个单词,是由多个单词组成的,第一个单词的首字母是小写,之后的每一个
单词的首字母都是大写。


     综上,点击一个盒子让另外一个盒子变色,点击谁,谁的身上就有onclick;你要操作谁,谁就必须要有id,
通过书写document.getElementByld("")得到它。

2 语句按行执行。

     上述的例子,让我们了解了,事件的三元素以及驼峰命名法。我们可以点击第一个盒子让第二个盒子变蓝。那么,除了让第二个盒子变蓝,它会不会实现让盒子二的高宽产生变化甚至让盒子自身产生变化呢。

 


<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>JS入门</title>
<style>
div{
width: 100px;
height: 100px;

margin: 100px;
}
</style>
<script>
function bianse(){
document.getElementById("box2").style.backgroundColor ="blue";
document.getElementById("box2").style.width="300px";
document.getElementById("box1").style.backgroundColor ="green"

}
</script>
</head>
<body>
<div id="box1" onclick="bianse()"></div>
<div id="box2"></div>
</body>
</html>

    可以看到,我们不仅可以对盒子二进行多样式改变,盒子一的属性也会变化。这里,这些语句的执行就是按行执行,
    找准事件源,用户点击哪个盒子,会有事情发生,这个盒子就是事件源,它身上就有onclick属性。
     找准谁是被操作的对象,被操作的对象可能不止一个,并且事件源自己也有可能就是被操作的对象。被操作
的对象身上一定要有Id,这样才能让 document.getElementById("")通过ID来得到这个元素。