Day01js相关事件消失隐藏/循环/方法定义和调用

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;
                    
                    ②其次由于闭包涉及跨域访问,所以会导致性能损失,我们可以通过把跨作用域变量存储在局部变量中,然后直接访问局部变量,来减轻对执行速度的影响
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

m0_45442261

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值