JS学习第一课
Html 和 Css 相当于盖大楼的一个框架,静态的布局,想要加效果修改样式靠JS,JS起到交互,实现功能的作用。
编写JS的流程:
1.首先要有布局:HTML + CSS
2.属性:确定修改哪些属性(我想实现什么效果、功能)
3.事件:确定用户做哪些操作(什么样的操作会实现2的效果)
4.编写JS:在事件中,用JS来修改页面元素的样式
我的理解:事件实际就是操作,可能来自于用户,也可能不来自于用户。
第一个js效果:鼠标提示框(想要实现的效果:鼠标移上去时显示div,移走时消失)
效果实现原理:当事件发生,改变div样式中的display属性(鼠标移上去是显示display:block,移走display:none)
事件:onmouseover,onmouseout
特效实现原理概括:响应用户操作,对页面元素(标签)进行某种修改。
代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>mouse</title> <style> #div1 {width: 100px; height: 200px;background: red;border: 1px solid #999; display:none;} </style> </head> <body> <input type = "checkbox" onmouseover = "div1.style.display ='block';" onmouseout="div1.style.display = 'none'"/> <div id = "div1">为了您的安全请勿。。</div> </body> </html>
这里牵扯兼容性问题可能不能直接用div1,要写成 document.getElementById(‘div1’).style.[…..]
此处注意任何标签都可以加id,且任何标签的属性都可以修改,html里属性怎么写js里就怎么写,唯一的例外是调用css中class时要写成className
例如:css中 .box{background:red}
调用时 oDiv.className = ‘box’
函数
上面的例子看到,直接在事件内些js会很乱,所以引用函数,即function()、把js从标签中放到函数里类似于css里的class
小例子:两个div, 鼠标移到div上会变大变色,移走回到原来的样式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>mouse</title> <style> #div1 {width: 100px; height: 200px;background:red;} </style> <script> function toGreen() { //定义函数直接在事件中调用 var oDiv = document.getElementById('div1'); //利用变量来简化代码 oDiv.style.width = '200px'; oDiv.style.height = '300px'; oDiv.style.background = 'green'; } function toRed() { oDiv.style.width = '100px'; oDiv.style.height = '200px'; oDiv.style.background ='red'; } </script> </head> <body> <div id = "div1" onmouseover = "toGreen()" onmouseout="toRed()"></div> </body> </html>
if语句实现功能
自己练习题目:鼠标点击一个button后会显示div,再点击一下div消失 (利用if语句)
<html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #div1 {width:100px;height:200px;background:grey;display:none} </style> <script> function showHide(){ var oDiv = document.getElementById('div1'); if (oDiv.style.display == 'block') { oDiv.style.display = 'none'; } else { oDiv.style.display = 'block'; } } </script> </head> <body> <input type = "button" value = "更多" onclick ="showHide()"/> <div id = "div1" ></div> </body> </html>