第一次学习JavaScript

最新推荐文章于 2024-11-07 13:38:59 发布

iteye_6091

最新推荐文章于 2024-11-07 13:38:59 发布

阅读量100

点赞数

文章标签： javascript ViewUI

精通JavaScript开发

第一课

JS 核心动态的事件功能交互

[size=large]实例1 [color=darkred]鼠标提示框[/color][/size]

先定义一个复选框和div
将div隐藏
鼠标移入input div显示
鼠标移出input div隐藏

[color=darkred]几个事件举例[/color]

1、onclick
<input type="button" value="按钮" οnclick="alert("内容");" />

2、οnmοuseοver="事件"
鼠标移入时触发

3、οnmοuseοut="事件"
鼠标移出时触发

代码：
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8"> [color=green]//解决了文字乱码的问题，谢谢学霸！[/color]
<style>
#div1 {width:200px; height:100px; background: #ccc; border:1px solid #999; display:none; } [color=green]//定义一个div的属性[/color]</style>
<body>
<input type="checkbox" οnmοusemοve="document.getElementById('div1').style.display='block';" οnmοuseοut="div1.style.display='none';" /> [color=green]//解决兼容性问题的应用以及事件的实现[/color]<div id="div1">
这是提示哦
</div>
</body>
</html>

解决兼容性问题
document.getElementById('div1')

get element by id
获取元素用 ID
（通过ID获取元素）

[color=darkred]初时函数[/color]
以方块的变化为例

[size=large]实例2 [color=darkred]方块的变化[/color][/size]

方法 function
<script>
function toGreen()
{
函数内的属性
}
function toRed()
{
函数内的属性
}
</script>

代码：
<!DOCTYPE html>
<html lang="en">
<style>
#div1 {width:100px; height:100px; background:red; }
</style>
<script type="text/javascript">
function toGreen()
{
document.getElementById('div1').style.width='200px';
document.getElementById('div1').style.height='200px';
document.getElementById('div1').style.background='green';
}
function toRed()
{
document.getElementById('div1').style.width='100px';
document.getElementById('div1').style.height='100px';
document.getElementById('div1').style.background='red';
}
</script>
<body>
<div id="div1" οnmοuseοver="toGreen()" οnmοuseοut="toRed()">
</div>

That's all!!
虽然没有学多少，但是对于暑假的我来说，好不容易打起精神看一点视频还是值得表扬的事！！
感受：我一直喜欢接受新鲜的东西，这次的学习很有趣，没有想到那些奇奇怪怪的效果通过几行代码就可以搞定了，嘻嘻，感觉当个程序员还不赖！ :arrow: :arrow: :arrow: