JavaScript基础

事件三要素

1. 事件是有三部分组成事件源事件类型事件处理程序

（1）事件源：事件被触发的对象比如按钮对象

（2）事件类型：如何触发什么事件比如鼠标点击(onclick) 鼠标经过键盘按下

（3）事件处理程序：通过一个函数赋值的方式完成

<body>
        <button id="bth">报告</button>
        <script>
            var bth = document.getElementById("bth");
            bth.onclick = function(){
                alert("报告完成")
                
            }
        </script>
    </body>

执行事件步骤

点击div 控制台输出我被选中了

1.获取事件源

2.绑定事件注册事件

div.onclick

3.添加事件处理程序

<body>
		<div>iii</div>
		<script>
			var div = document.querySelector("div");
			div.onclick = function(){
				console.log("我被选中了");
			}
		</script>
	</body>

　常见的鼠标事件：

操作元素

JavaScript的DOM操作可以改变网页内容解构和样式，我们可以利用DOM操作元素来改变元素里的内容、属性等。注意以下都是属性！

我们点击按钮 div里的文字发生变化

1. 获取元素

2. 注册事件

我们元素也可以不用添加事件

<body>
        <button>显示系统时间</button>
        <div>时间：</div>
        <p>123</p>
        <script>
            var bth = document.querySelector("button");
            var div = document.querySelector("div");
            bth.onclick = function(){
                div.innerText = getDate();
                
            }
            var p = document.querySelector("p");
            p.innerText = getDate();
            function getDate(){
            var date = new Date();
            console.log(date.getFullYear());//返回当前日期的年 2020
            console.log(date.getMonth() + 1);//月份 返回当前月份小一个月 记得月份+1
            console.log(date.getDate());//返回的几号
            console.log(date.getDay());//周一返回的是 1 周六返回的是 6 但是周日返回的是 0
            console.log(date.getTime());//当前时间
            var year = date.getFullYear();
            var month = date.getMonth() + 1;
            var dates = date.getDate();
            var time = date.toLocaleTimeString();
            var arr = ['星期一','星期二','星期三','星期四','星期五','星期六'];
            var day = date.getDay();
            return '今天是：' + year + '年' + month + '月' + dates + '日' + arr[day] + '时间：' + time; 
            }
        </script>
    </body>

innerText ， innerHTML 都可以修改元素里的内容

innerText 跟innerHTML 的区别

1. innerText的使用方法

innerText 不识别HTML标签非标准可以去除空格和换行

2. innerHTML 的使用方法

innerHTML识别HTML标签 w3c标准（常用）保留空格跟换行

这两个属性是可读写的可以获取元素里的内容

<body>
        <p>
            我是
            <span>123</span>
        </p>
        <strong></strong>
        <h1></h1>
        <script>
            var text = document.querySelector("h1");
            text.innerText = "<strong>5555</strong>"; //不支持html标签 非标准
            var text = document.querySelector("strong");//w3c标准 可以识别html标签 （常用）
            text.innerHTML = "<strong>5555</strong>";
            var text = document.querySelector("p");
            console.log(text.innerText);
            console.log(text.innerHTML);
        </script>
    </body>

常用元素的属性操作

src href

修改属性里面的链接

<body>
        <button id="bth1">草地</button>
        <button id="bth2">森林</button>
        <img src="http://img.pconline.com.cn/images/upload/upc/tx/wallpaper/1208/15/c0/12924355_1344999165562.jpg"  width="500px" height="500px" title="55"/>
        <script>
            //修改元素属性 src
            //1. 获取元素
            var bth1 = document.getElementById("bth1");
            var bth2 = document.getElementById("bth2");
            var img = document.querySelector("img");
            //2. 注册事件 处理程序
            bth1.onclick = function(){
                img.src = "http://img.pconline.com.cn/images/upload/upc/tx/wallpaper/1208/15/c0/12924355_1344999165562.jpg";
                img.title = "草地222";
            }
            bth2.onclick = function(){
                img.src = "http://attach.bbs.miui.com/forum/201311/17/174124tp3sa6vvckc25oc8.jpg";
                img.title = "森林111";
            }
        </script>
    </body>

样式属性操作

关闭二维码实例：

修改div的元素display里面的block变成none

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>test</title>
        <style type="text/css">
            #div{  150px; height: 150px; background-color: aqua; margin: 150px 0 0 750px; display: block; border: 1px solid #000000;}
            .x{  20px; height: 30px; float: right; font-size: 20px; text-align: center; position: relative; top: -155px; left: 20px; user-select: none; border-top: 1px solid #000000;}
            .x:hover{ background-color: #00FFFF;}
        </style>
    </head>
    <body>
        
        <div id="div">
            <img src="https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=810988444,1648289218&fm=111&gp=0.jpg" width="150px" height="150px" />
            <b class="x">×</b>
        </div>
        <script>
            //1. 获取元素
            var bth = document.querySelector(".x")
            var div = document.querySelector("#div");
            //2. 注册事件 执行程序
            bth.onclick = function() {
                div.style.display = "none";
            }
        </script>
    </body>
</html>