2-5JavaScript\第7节 DOM和事件的简单学习_掌握]avascript操作dom(2)掌握]avascript操作事件(3)掌握jquery编程-CSDN博客

本文链接：https://blog.csdn.net/qq_42788016/article/details/105309272

1. JavaScript：
	1. ECMAScript：
	2. BOM：
	3. DOM：
		1. 事件

02_DOM简单学习

DOM简单学习：为了满足案例要求

* 功能：控制html文档的内容
* 获取页面标签(元素)对象：Element
	* document.getElementById("id值"):通过元素的id获取元素对象

* 操作Element对象：
	1. 修改属性值：
		1. 明确获取的对象是哪一个？
		2. 查看API文档，找其中有哪些属性可以设置
	2. 修改标签体内容：
		* 属性：innerHTML
		1. 获取元素对象
		2. 使用innerHTML属性修改标签体内容

如何用图片？
1.先在IDEA上，创建img文件夹。
2.将图片放入。
3.在body里面使用。img标签。这一个要写在前面，图片要先加载。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <img id="light" src="img/off.gif">
    <h1 id="title">悔创阿里杰克马</h1>

<script>
    //通过id获取元素对象
    var light = document.getElementById("light");
    alert("我要换图片了。。。");
    light.src = "img/on.gif";
    
  	//1.获取h1标签对象
    var title = document.getElementById("title");
    alert("我要换内容了。。。");
    //2.修改内容
    title.innerHTML = "不识妻美刘强东";
</script>
</body>
</html>

03_事件简单学习
* 功能： 某些组件被执行了某些操作后，触发某些代码的执行。
	* 造句：  xxx被xxx,我就xxx
		* 我方水晶被摧毁后，我就责备对友。
		* 敌方水晶被摧毁后，我就夸奖自己。

* 如何绑定事件
	1. 直接在html标签上，指定事件的属性(操作)，属性值就是js代码
		1. 事件：onclick--- 单击事件

	2. 通过js获取元素对象，指定事件属性，设置一个函数

	* 代码：
		<body>
			<img id="light" src="img/off.gif"  onclick="fun();">
			<img id="light2" src="img/off.gif">
			
			<script>
			    function fun(){
			        alert('我被点了');
			        alert('我又被点了');
			    }
			
			    function fun2(){
			        alert('咋老点我？');
			    }
			
			    //1.获取light2对象
			    var light2 = document.getElementById("light2");
			    //2.绑定事件
			    light2.onclick = fun2;
			</script>
		</body>

04_案例1_电灯开关
html代码在写的时候，看不到错误。如何找到错误代码？
打开浏览器，然后F12，console控制台会有提示错误。
* 案例1：电灯开关
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>电灯开关</title>
</head>
<body>

<img id="light" src="img/off.gif">

<script>
    /*
        分析：
            1.获取图片对象
            2.绑定单击事件
            3.每次点击切换图片
                * 规则：
                    * 如果灯是开的 on,切换图片为 off
                    * 如果灯是关的 off,切换图片为 on
                * 使用标记flag来完成
     */
    //1.获取图片对象
    var light = document.getElementById("light");
    var flag = false;//代表灯是灭的。 off图片

    //2.绑定单击事件
    light.onclick = function(){
        if(flag){//判断如果灯是开的，则灭掉
            light.src = "img/off.gif";
            flag = false;
        }else{
            //如果灯是灭的，则打开
            light.src = "img/on.gif";
            flag = true;
        }
	    }
	    
</script>
</body>
</html>