1.js两个div模块构成点击事件,悬浮上去,另外一个隐藏和消失
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>相关模块动态js</title>
<style type="text/css">
div{
width:200px;
height:200px;
background: #FF0000;
margin:10px;
}
</style>
</head>
<body>
<div id="box">
</div>
<div id="box1"></div>
<script type="text/javascript">
/* 1.获取元素对象2.添加点击事件3.添加效果*/
var box=document.getElementById("box");
var box1=document.getElementById("box1");
box.onmouseover=function(){
//产生动态效果
box1.style.background="blue";
box1.style.display="none";
}
box.onmouseout=function(){
box1.style.display="block";
}
</script>
</body>
</html>
——————————————————————————————————————————————————————————————————————————————————————
2.<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>通过按钮来控制一个div模块的显示和隐藏</title>
<style type="text/css">
div{
width:200px;
height:200px;
background: #FF0000;
margin:10px;
}
</style>
</head>
<body>
<button id="box">
显示/隐藏
</button>
<div id="box1"></div>
<script type="text/javascript">
/* 1.获取元素对象2.添加点击事件3.添加效果*/
var box=document.getElementById("box");
var box1=document.getElementById("box1");
box.onclick=function(){
if(box1.style.display=="none"){
box1.style.display="block";
}else{
box1.style.display="none";
}
}
//block是行内元素
</script>
</body>
</html>
_____________________________________________________________________________________________________-
3.获取获取多个标签console进行调试
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>获取获取多个标签console进行调试</title>
</head>
<body>
<div id="box"></div>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<script type="text/javascript">
//用id的方式获取元素,id名字是唯一的;
//通过标签名获取一组元素
var abox=document.getElementById("box");
var ap=document.getElementsByTagName("p");
console.log(abox);
console.log(ap);
</script>
</body>
</html>
___________________________________________________________________________________________________________
4.0304循环loop<
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>0304循环loop</title>
</head>
<body>
<script type="text/javascript">
//1.初始值;2循环条件4,迭代
for(var a=0;a<20;a++){
//3.循环体
console.log(a);
}
//执行过程:123/423/423/4……循环。
</script>
/* 注意:1、初始值不一定必须是零 2、判断条件可以随意 3、自增也可以自减 4、初始值的变量名 不是必须叫I 只不过大家都叫i*/
</body>
</html>
_______________________________________________________-----------------
5.方法定义和调用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>0304方法定义和调用</title>
</head>
<body>
<script type="text/javascript">
//方法定义时叫形参;方法调用时叫实参
function show(a){
alert(a);
}
show(1);
show("hello");
show(2);
show(3);
show(2>7);
</script>
</body>
</html>
——————————————————————————————————————————————————————————————————————————————————————————————————————————-
6.传参,
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>0304方法定义和调用</title>
</head>
<body>
<script type="text/javascript">
//方法定义时叫形参;方法调用时叫实参
function show(a){
alert(a);
}
show(1);
show("hello");
show(2);
show(3);
show(2>7);
function show2(a,b,c){
var d=a+b+c;
alert(d);
}
show2(1,2,4);
</script>
</body>
</html>
——————————————————————————————————————————————————————————————————————————————————————————————————————————————-
7.!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>if选择判断</title>
</head>
<body>
<script>
var a = 1;
// 如果 a的值是1 那么就弹出正确 否则就弹出错误
// if(判断条件){
// 条件为真的执行语句
// }else{
// 条件为假的执行语句
// }
// 单等号是赋值 双等号是判断
// 判断语句 选择结构
//有一天,一个程序员下班回家,他老婆给他打电话,说:“买两个馒头,如果碰见卖西瓜的,就买一个。”
//【这个笑话的解释是回家带馒头,如果碰到卖西瓜的,只需要买一个馒头,没碰到,只卖一个;妻子的理解是买两个西瓜,如果碰到卖西瓜的顺便买一个】
if(a==1){
alert("正确");
}else{
alert("错误");
}
</script>
</body>
</html>
————————————————————————————————————————————————————————————————————————————————————————————————————————————————————
8.
————————————————————————————————————————————————————————————————————————————————————————————————————————————————-
初始闭包概念
//闭包三个特性“
/*
函数嵌套函数;
函数内部可以引用函数外部的参数和变量;【反之不能】
参数和变量不会被垃圾回收机制回收。
闭包的好处
①保护函数内的变量安全 ,实现封装,防止变量流入其他环境发生命名冲突
②在内存中维持一个变量,可以做缓存(但使用多了同时也是一项缺点,消耗内存)
③匿名自执行函数可以减少内存消耗
坏处
①其中一点上面已经有体现了,就是被引用的私有变量不能被销毁,增大了内存消耗,造成内存泄漏,解决方法是可以在使用完变量后手动为它赋值为null;
②其次由于闭包涉及跨域访问,所以会导致性能损失,我们可以通过把跨作用域变量存储在局部变量中,然后直接访问局部变量,来减轻对执行速度的影响
Day01js相关事件消失隐藏/循环/方法定义和调用
最新推荐文章于 2022-05-29 17:01:48 发布