il y a 1 an · ddfe055168
--- a/src/main/java/com/sf/day33/01-BOM
+++ b/src/main/java/com/sf/day33/01-BOM
@@ -0,0 +1,68 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="en">
			
 
				+<head>
			
 
				+    <meta charset="UTF-8">
			
 
				+    <title>Title</title>
			
 
				+</head>
			
 
				+<body>
			
 
				+<button onclick="alert(123)">按钮</button>
			
 
				+<img src="" alt="">
			
 
				+</body>
			
 
				+<script>
			
 
				+    /**
			
 
				+     * BOM 对象: JS 为了更方便操作浏览器, 他把浏览器各个部分封装成了对象
			
 
				+     * History: 历史对象
			
 
				+     * location: 地址栏对象
			
 
				+     * Navigator : 浏览器对象
			
 
				+     * Screen: 屏幕对象
			
 
				+     * window :  一个浏览器标签窗口
			
 
				+     *
			
 
				+     * window 当中他是提供了获取其他BOM 对象属性
			
 
				+     * 比如我想要获取locationBOM 对象
			
 
				+     * window.location   由于window 是全局对象你可以简写 location
			
 
				+     *
			
 
				+     */
			
 
				+    console.log(window)
			
 
				+    console.log(window.location)
			
 
				+    console.log(location)
			
 
				+
			
 
				+    // window 当中常见的方法
			
 
				+    // var flag=  confirm("是否要删除呀?")
			
 
				+    // console.log(flag)
			
 
				+
			
 
				+
			
 
				+    // setInterval 定时器
			
 
				+    /**
			
 
				+     * var 定时器 = setInterval(function(){} , 毫秒值 1000)
			
 
				+     * 如果你了1000 , 表示每隔1s 中去执行function 的函数的内容
			
 
				+     *
			
 
				+     * clearInterval(定时器): 取消定时器
			
 
				+     *
			
 
				+     * 由于这两个函数都是window  的函数那么window 可以省略不写
			
 
				+     */
			
 
				+    // 需求: 当count 到5 的时候我们要停止定时器
			
 
				+    // var count = 0
			
 
				+    // var timers = setInterval(function () {
			
 
				+    //     console.log(123123)
			
 
				+    //     count++
			
 
				+    //     if(count == 5){
			
 
				+    //         clearInterval(timers)
			
 
				+    //     }
			
 
				+    // },1000)
			
 
				+
			
 
				+
			
 
				+    /**
			
 
				+     * setTimeout(function 函数,3000)
			
 
				+     * 
			
 
				+     * 延时当中代码, 不会立马执行而是在指定的时间之后去执行
			
 
				+     */
			
 
				+
			
 
				+
			
 
				+    setTimeout(function () {
			
 
				+        console.log(123123)
			
 
				+    },3000)
			
 
				+
			
 
				+
			
 
				+
			
 
				+</script>
			
 
				+</html>
			
--- a/src/main/java/com/sf/day33/02-BOM
+++ b/src/main/java/com/sf/day33/02-BOM
@@ -0,0 +1,54 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="en">
			
 
				+<head>
			
 
				+    <meta charset="UTF-8">
			
 
				+    <title>Title</title>
			
 
				+</head>
			
 
				+<body>
			
 
				+<div id="div"></div>
			
 
				+<hr>
			
 
				+<form action="">
			
 
				+    id: <input type="text" id="id"> <br><br>
			
 
				+    name: <input type="text" id="name"> <br><br>
			
 
				+    age: <input type="text" id="age"> <br><br>
			
 
				+    email: <input type="text" id="email"> <br><br>
			
 
				+    <input type="button" value="添加" onclick="fun()">
			
 
				+</form>
			
 
				+</body>
			
 
				+<script>
			
 
				+    //需求:
			
 
				+    // 界面当中有一个按钮: 点击按钮是否要添加,如果点击确定就进行添加
			
 
				+    //  最上面
			
 
				+    //   1     zhangsan    10   123@qq.com
			
 
				+    //   1     lisi    20   123@qq.com
			
 
				+    //  --------------------------------
			
 
				+    //   姓名:  xx
			
 
				+    //  年龄: xx
			
 
				+    //...   添加
			
 
				+    var arr = [{id:1,name: "zhangsan",age:10,email:"!23@qq.com"}]
			
 
				+
			
 
				+    var str = arr[0].id  +" " + arr[0].name +"  " +arr[0].age +"  " +arr[0].email
			
 
				+    // 把str 内容设置div 标签中
			
 
				+    document.getElementById("div").innerText = str
			
 
				+
			
 
				+    function fun() {
			
 
				+        var flag = confirm("确定要添加吗")
			
 
				+        if(flag){
			
 
				+            var id = document.getElementById("id").value
			
 
				+            var name = document.getElementById("name").value
			
 
				+            var email = document.getElementById("email").value
			
 
				+            var age = document.getElementById("age").value
			
 
				+            // 把内容要添加到数组中
			
 
				+            arr.push({id:id,name:name,email:email,age:age})
			
 
				+
			
 
				+            // 拼接字符串, 然后把内容重新放到str 当中
			
 
				+            // 遍历数组
			
 
				+            var st = ""
			
 
				+            arr.forEach(function (item,index) {
			
 
				+                st +=  arr[index].id  +" " + arr[index].name +"  " +arr[index].age +"  " +arr[index].email + "<br>"
			
 
				+            })
			
 
				+            document.getElementById("div").innerHTML = st;
			
 
				+        }
			
 
				+    }
			
 
				+</script>
			
 
				+</html>
			
--- a/src/main/java/com/sf/day33/03-BOM
+++ b/src/main/java/com/sf/day33/03-BOM
@@ -0,0 +1,27 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="en">
			
 
				+<head>
			
 
				+    <meta charset="UTF-8">
			
 
				+    <title>Title</title>
			
 
				+</head>
			
 
				+<body>
			
 
				+<button onclick="fun()">生日礼物</button>
			
 
				+</body>
			
 
				+<script>
			
 
				+    // 需求2 : 界面当中有一个按钮 生日礼物
			
 
				+    //         点击确定: 弹框出新框中显示送你一个屁
			
 
				+    //         在新弹出框中: 点击确定在弹出一个框你获得了一个屁
			
 
				+    //         在新弹出框中: 点击取消在弹出一个框恭喜你失去了一个屁 -> 在点取消在弹出来你又失去一个屁
			
 
				+    function fun() {
			
 
				+        var f = confirm("上当了 送你一个屁")
			
 
				+        if(f){
			
 
				+            confirm("恭喜你获得了一个屁")
			
 
				+        }else{
			
 
				+           var f1 =  confirm("很遗憾你失去了一个屁")
			
 
				+            if(!f1){
			
 
				+                confirm("你真的想失去这个屁吗")
			
 
				+            }
			
 
				+        }
			
 
				+    }
			
 
				+</script>
			
 
				+</html>
			
--- a/src/main/java/com/sf/day33/04-BOM
+++ b/src/main/java/com/sf/day33/04-BOM
@@ -0,0 +1,58 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="en">
			
 
				+<head>
			
 
				+    <meta charset="UTF-8">
			
 
				+    <title>Title</title>
			
 
				+</head>
			
 
				+<body>
			
 
				+<div id="div"></div>
			
 
				+<h1 id="h1"></h1>
			
 
				+获奖人: <span id="sp"> </span> <br>
			
 
				+<h1 id="time"></h1>
			
 
				+<button onclick="fun()">抽奖</button>
			
 
				+
			
 
				+</body>
			
 
				+<script>
			
 
				+    function getRandomInt(min, max) {
			
 
				+        min = Math.ceil(min);
			
 
				+        max = Math.floor(max);
			
 
				+        return Math.floor(Math.random() * (max - min + 1)) + min;
			
 
				+    }
			
 
				+
			
 
				+    // 使用方法:
			
 
				+    var randomInteger = getRandomInt(1,5);
			
 
				+    console.log(randomInteger)
			
 
				+
			
 
				+    //需求: 抽奖需求
			
 
				+    // 在网页当中要显示 抽奖人有 [张三, lisi , 王五 , 赵六 , 王八]
			
 
				+    // 抽奖按钮: 点击抽奖按钮 在网页中看到倒计时 , 倒计时5秒钟, 当到0的时候显示出来抽奖结果是那个人
			
 
				+    // 自己找如何去创建一个随机数
			
 
				+    var arr = ["张三","lisi","王五","赵六","王八"]
			
 
				+    var st = "";
			
 
				+    arr.forEach(function (item,index) {
			
 
				+        st += item + "  "
			
 
				+    })
			
 
				+    //把拼完以后内容设置div 里面
			
 
				+    document.getElementById("div").innerText = "抽奖人:" + st;
			
 
				+
			
 
				+    function fun() {
			
 
				+        // 让我们时间进行从5 减少到0
			
 
				+        var a = 5;
			
 
				+        var timer = setInterval(function () {
			
 
				+            // 把剪完以后设置到界面中
			
 
				+            document.getElementById("time").innerText=a
			
 
				+
			
 
				+            a--;
			
 
				+            // 如果值到0 我们要停止定时器
			
 
				+            if(a == -1){
			
 
				+                clearInterval(timer)
			
 
				+                // 随机上我们数组当中获取一个数据
			
 
				+                var random = getRandomInt(0,arr.length-1);
			
 
				+                // 根据我们这个随机数上数组中获取数据
			
 
				+                document.getElementById("sp").innerText = arr[random]
			
 
				+            }
			
 
				+
			
 
				+        },1000)
			
 
				+    }
			
 
				+</script>
			
 
				+</html>
			
--- a/src/main/java/com/sf/day33/05-BOM
+++ b/src/main/java/com/sf/day33/05-BOM
@@ -0,0 +1,18 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="en">
			
 
				+<head>
			
 
				+    <meta charset="UTF-8">
			
 
				+    <title>Title</title>
			
 
				+</head>
			
 
				+<body>
			
 
				+<img  id="img" src="img/92321886gy1hs473d900bj20xc1cln6y.jpg" height="1006" width="690"/>
			
 
				+</body>
			
 
				+<script>
			
 
				+    // 如何做到在5秒以后把路径更换成凤姐
			
 
				+    // 要利用演示器, 元时期可以让我们代码在一段时间以后去执行
			
 
				+    setTimeout(function () {
			
 
				+        // 如何去修改img 的src 属性
			
 
				+        document.getElementById("img").src = "img/QQ20240816-111152.png"
			
 
				+    },5000)
			
 
				+</script>
			
 
				+</html>
			
--- a/src/main/java/com/sf/day33/06-location.html
+++ b/src/main/java/com/sf/day33/06-location.html
@@ -0,0 +1,47 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="en">
			
 
				+<head>
			
 
				+    <meta charset="UTF-8">
			
 
				+    <title>Title</title>
			
 
				+</head>
			
 
				+<body>
			
 
				+<!--<button onclick="fun()">按钮</button>-->
			
 
				+<form action="">
			
 
				+    账号 : <input type="text" id="username"> <br><br>
			
 
				+    密码 : <input type="password" id="password"> <br><br>
			
 
				+    <input type="button" value="登录" onclick="fun()">
			
 
				+</form>
			
 
				+</body>
			
 
				+<script>
			
 
				+    /**
			
 
				+     * location : 在浏览器当中是地址栏区域, 主要是负责做地址跳转
			
 
				+     *
			
 
				+     * 如何获取location BOM 对象:  window.location 获取到location 对象
			
 
				+     *
			
 
				+     * location 的常见属性:  href属性 可以帮助我们去做界面跳转
			
 
				+     */
			
 
				+    // function fun(){
			
 
				+    //     location.href = "http://www.taobao.com"
			
 
				+    // }
			
 
				+
			
 
				+    // 做一个登录界面 ,可以输入账号和密码
			
 
				+    // 如果用户输入账号和密码为空 弹出来框提醒用户账号密码不能为空
			
 
				+    // 对比用户输入账号如果为admin, 密码为123 表示登录成功跳转list.html 界面当中
			
 
				+    // 如果对比失败, 弹框账号密码错误
			
 
				+    function fun() {
			
 
				+        var username =document.getElementById("username").value
			
 
				+        var password =document.getElementById("password").value
			
 
				+        if(!(username && password)){
			
 
				+            alert("账号密码不能为空")
			
 
				+            return
			
 
				+        }
			
 
				+
			
 
				+        if("admin" == username && "123"==password){
			
 
				+            // 我这种写法叫做相对路径, 在当前的目录当中去寻找list.html
			
 
				+            location.href = "list.html"
			
 
				+        }else{
			
 
				+            alert("账号密码错误")
			
 
				+        }
			
 
				+    }
			
 
				+</script>
			
 
				+</html>
			
--- a/src/main/java/com/sf/day33/07-DOM
+++ b/src/main/java/com/sf/day33/07-DOM
@@ -0,0 +1,12 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="en">
			
 
				+<head>
			
 
				+    <meta charset="UTF-8">
			
 
				+    <title>Title</title>
			
 
				+</head>
			
 
				+<body>
			
 
				+<!--html 标签标准属性: id class = 为了定位到这个html元素   title  style-->
			
 
				+<h1>四福科技</h1>
			
 
				+<a href="htt://sss">x</a>
			
 
				+</body>
			
 
				+</html>
			
--- a/src/main/java/com/sf/day33/08-获取界面当中DOM
+++ b/src/main/java/com/sf/day33/08-获取界面当中DOM
@@ -0,0 +1,52 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="en">
			
 
				+<head>
			
 
				+    <meta charset="UTF-8">
			
 
				+    <title>Title</title>
			
 
				+</head>
			
 
				+<body>
			
 
				+<div id="div1">123</div>
			
 
				+<div id="div2">456</div>
			
 
				+<p>我是p </p>
			
 
				+<h1>我是h1</h1>
			
 
				+<div>234234234</div>
			
 
				+<div name="sss">123</div>
			
 
				+
			
 
				+
			
 
				+<p class="clz">123</p>
			
 
				+<p class="clz">12123123</p>
			
 
				+</body>
			
 
				+<script>
			
 
				+    // 需求: 想要获取界面当中id = div2 元素
			
 
				+    var div2 = document.getElementById("div2")
			
 
				+    // console.log(div2)
			
 
				+
			
 
				+    var div1 = document.getElementById("div1")
			
 
				+    // console.log(div1)
			
 
				+
			
 
				+    // 需求: 要获取界面当中所有的div 标签
			
 
				+    var divs = document.getElementsByTagName("div")
			
 
				+    console.log(divs)
			
 
				+    console.log(typeof divs)
			
 
				+    // for(var i=0; i<divs.length;i++){
			
 
				+    //     var item = divs[i];
			
 
				+    //     item.style.backgroundColor = "red"
			
 
				+    // }
			
 
				+    // 额外需求: 想要把界面当中所有的div 背景颜色变成红色
			
 
				+    var div1s = document.getElementsByName("sss")
			
 
				+    console.log(div1s)
			
 
				+
			
 
				+    /**
			
 
				+     * 需求: 让class 的值为clz 的p 标签字体颜色变成绿色
			
 
				+     * 1 获取class 值为clz 的元素
			
 
				+     * 2 设置字体颜色
			
 
				+     */
			
 
				+
			
 
				+    var arr1 = document.getElementsByClassName("clz")
			
 
				+    for(var i=0; i<arr1.length;i++){
			
 
				+        var item = arr1[i];
			
 
				+        item.style.color = "green"
			
 
				+    }
			
 
				+
			
 
				+</script>
			
 
				+</html>
			
--- a/src/main/java/com/sf/day33/09-DOM
+++ b/src/main/java/com/sf/day33/09-DOM
@@ -0,0 +1,33 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="en">
			
 
				+<head>
			
 
				+    <meta charset="UTF-8">
			
 
				+    <title>Title</title>
			
 
				+</head>
			
 
				+<body>
			
 
				+<div id="div1">123123</div>
			
 
				+<div id="div2" style="background-color:red;">234234234</div>
			
 
				+<input type="text" id="username" value="1">
			
 
				+<button onclick="fun()">修改</button>
			
 
				+</body>
			
 
				+
			
 
				+<script>
			
 
				+    // 需求要获取div1 的内容
			
 
				+    console.log(document.getElementById("div1").innerText)
			
 
				+    // 需求2 给id = div2 的内容修改成456456
			
 
				+    // function fun() {
			
 
				+    //     document.getElementById("div2").innerText = 456456
			
 
				+    // }
			
 
				+    // 需求3 给id = div2 的修改成具备h1标题效果的内容
			
 
				+    // 在JS 中对于dom 元素内容操作有两个属性一个innerText 一个是inserthtml
			
 
				+    // 如果设置内容都是文本内容 没有html 效果你用那一个都可以, 但是如果你设置效果要有html 作用使用innerHtml
			
 
				+    // function fun() {
			
 
				+    //     document.getElementById("div2").innerHTML = "<h1>456456</h1>"
			
 
				+    // }
			
 
				+    // 需求4 获取id=username 的value
			
 
				+    console.log(document.getElementById("username").value)
			
 
				+    // 需求5 给id = username input去设置内容
			
 
				+    document.getElementById("username").value = "123123"
			
 
				+
			
 
				+</script>
			
 
				+</html>
			
--- a/src/main/java/com/sf/day33/10-DOM
+++ b/src/main/java/com/sf/day33/10-DOM
@@ -0,0 +1,45 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="en">
			
 
				+<head>
			
 
				+    <meta charset="UTF-8">
			
 
				+    <title>Title</title>
			
 
				+</head>
			
 
				+<body>
			
 
				+    <div>上面兄弟</div>
			
 
				+    <div id="parent">
			
 
				+        <div>
			
 
				+            <div>123</div>
			
 
				+        </div>
			
 
				+        <div>123</div>
			
 
				+    </div>
			
 
				+    <div>下面的兄弟</div>
			
 
				+    <div id="div">我是要添加的元素</div>
			
 
				+
			
 
				+    <button onclick="del()">删除</button>
			
 
				+    <button onclick="fun()">添加</button>
			
 
				+</body>
			
 
				+<script>
			
 
				+    // 获取id = parent 的第一个子元素  firstChild
			
 
				+    var div = document.getElementById("parent")
			
 
				+    // console.log(div.firstChild)        // 获取第一个子节点元素
			
 
				+    // console.log(div.firstElementChild) // 获取第一html 标签子元素
			
 
				+    // console.log(div.lastChild)         // 获取最后一个子元素
			
 
				+    // console.log(div.lastElementChild)  // 获取最后一个html 标签子元素
			
 
				+    // console.log(div.childNodes)        // 获取所有的子元素
			
 
				+    // console.log(div.previousElementSibling)  // 获取上一个相邻兄弟元素
			
 
				+    // console.log(div.nextElementSibling)      // 获取下一个相邻兄弟元素
			
 
				+    // console.log(div.parentElement)           // 获取当前节点父元素
			
 
				+    // 判断div 是否包含子节点
			
 
				+    console.log(div.hasChildNodes())
			
 
				+    // 需求: 现在要id=div 元素要添加 id = parent的内部作为子节点
			
 
				+    function fun(){
			
 
				+        div.appendChild(document.getElementById("div"))
			
 
				+    }
			
 
				+
			
 
				+    // 需求: 当点击删除按钮时候, 要把id = parent 的标签删除掉
			
 
				+    function del() {
			
 
				+        div.remove()
			
 
				+    }
			
 
				+
			
 
				+</script>
			
 
				+</html>
			
--- a/src/main/java/com/sf/day33/11-DOM
+++ b/src/main/java/com/sf/day33/11-DOM
@@ -0,0 +1,43 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="en">
			
 
				+<head>
			
 
				+    <meta charset="UTF-8">
			
 
				+    <title>Title</title>
			
 
				+</head>
			
 
				+<body>
			
 
				+<div id="parent">
			
 
				+    <div>第一行</div>
			
 
				+    <div>第二行</div>
			
 
				+    <div>第三行</div>
			
 
				+    <div>第四行</div>
			
 
				+    <div>第五行</div>
			
 
				+</div>
			
 
				+<script>
			
 
				+    /**
			
 
				+     * 需求:
			
 
				+     * div
			
 
				+     *    div
			
 
				+     *    div
			
 
				+     *    div
			
 
				+     *    div
			
 
				+     *    idv
			
 
				+     * /div
			
 
				+     * 要让id = parent 当中子元素为偶数的背景颜色变成红色 , 奇数的变成蓝色
			
 
				+     *
			
 
				+     */
			
 
				+    // 1 获取parent 元素
			
 
				+    var parent = document.getElementById("parent")
			
 
				+    // 2 获取parent的所有子元素
			
 
				+    var childs = parent.children
			
 
				+    for(var i = 0; i<childs.length;i++){
			
 
				+        var c = childs[i];
			
 
				+        if(i % 2 == 0 ){
			
 
				+            c.style.backgroundColor = "blue"
			
 
				+        }else{
			
 
				+            c.style.backgroundColor = "red"
			
 
				+        }
			
 
				+    }
			
 
				+    // 3 判断元素如果是技术颜色就是红色如果是偶数那颜色就变成蓝色
			
 
				+</script>
			
 
				+</body>
			
 
				+</html>
			
--- a/src/main/java/com/sf/day33/12-DOM
+++ b/src/main/java/com/sf/day33/12-DOM
@@ -0,0 +1,29 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="en">
			
 
				+<head>
			
 
				+    <meta charset="UTF-8">
			
 
				+    <title>Title</title>
			
 
				+</head>
			
 
				+<body>
			
 
				+<div>123</div>
			
 
				+<input id="input" abc="123" type="text" value="1">
			
 
				+</body>
			
 
				+<script>
			
 
				+    // var val = document.getElementById("input").value
			
 
				+    // console.log(val)
			
 
				+
			
 
				+    // 如果想要设置值
			
 
				+    // document.getElementById("input").value = "123123"
			
 
				+    // 这个是操作基本属性的方式
			
 
				+    /**
			
 
				+     * 标签中属性分成两类: 一个自定义属性一个是内置属性
			
 
				+     * 现在value 就属于内置属性,   abc 就属于自定义数据
			
 
				+     * 如果操作自定义属性 元素.setAttribute()    元素.getAttribute();
			
 
				+     */
			
 
				+    var input = document.getElementById("input")
			
 
				+    var abcVal = input.getAttribute("abc")
			
 
				+    console.log(abcVal)
			
 
				+
			
 
				+
			
 
				+</script>
			
 
				+</html>
			
--- a/src/main/java/com/sf/day33/13.JS对象-DOM-综合实战.html
+++ b/src/main/java/com/sf/day33/13.JS对象-DOM-综合实战.html
@@ -0,0 +1,59 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="en">
			
 
				+<head>
			
 
				+    <meta charset="UTF-8">
			
 
				+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
			
 
				+    <title>JS对象-DOM-获取元素对象</title>
			
 
				+</head>
			
 
				+<body>
			
 
				+    <img id="imgId" src="img/g0.jpeg" height="360px"> <br/><br/>
			
 
				+
			
 
				+    <div class="clz">四福科技教育</div>
			
 
				+    <a href="http://www.wolfcode.cn" class="clz">广州xx</a> <br/><br/>
			
 
				+
			
 
				+    <input  type="checkbox" name="hobby"> Java
			
 
				+    <input type="checkbox" name="hobby"> Python
			
 
				+
			
 
				+    <button onclick="fun()">更换</button>
			
 
				+    <button onclick="fun1()">哇塞</button>
			
 
				+
			
 
				+    <button onclick="allChecked()">全选</button>
			
 
				+    <button onclick="unall()">反选</button>
			
 
				+    <script>
			
 
				+        // 1 跟换美女
			
 
				+        function fun() {
			
 
				+            document.getElementById("imgId").src = "img/g1.jpeg"
			
 
				+        }
			
 
				+        // 2 在所有 class="clz" 的标签内容后面加：很哇塞
			
 
				+        function fun1() {
			
 
				+            var clzs = document.getElementsByClassName("clz")
			
 
				+            for(var i = 0;i<clzs.length ; i++){
			
 
				+                var item = clzs[i];
			
 
				+                item.innerHTML = item.innerHTML + "<font style='color:red'>很哇塞</font>"
			
 
				+            }
			
 
				+        }
			
 
				+        // 3 点击权限吧所有复选框修改成选中状态 , 点击反选修改成反选状态
			
 
				+        function allChecked() {
			
 
				+           console.log(123)
			
 
				+           var hobbys =  document.getElementsByName("hobby")
			
 
				+            console.log(hobbys)
			
 
				+            for (let i = 0; i < hobbys.length; i++) {
			
 
				+                // 修改复选框属性 , checked =  true
			
 
				+                hobbys[i].checked = true
			
 
				+            }
			
 
				+        }
			
 
				+
			
 
				+        function unall() {
			
 
				+            console.log(123)
			
 
				+            var hobbys =  document.getElementsByName("hobby")
			
 
				+            console.log(hobbys)
			
 
				+            for (let i = 0; i < hobbys.length; i++) {
			
 
				+                // 修改复选框属性 , checked =  true
			
 
				+                hobbys[i].checked = !hobbys[i].checked
			
 
				+            }
			
 
				+        }
			
 
				+
			
 
				+       
			
 
				+    </script>
			
 
				+</body>
			
 
				+</html>
			
--- a/src/main/java/com/sf/day33/14
+++ b/src/main/java/com/sf/day33/14
@@ -0,0 +1,47 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="en">
			
 
				+<head>
			
 
				+    <meta charset="UTF-8">
			
 
				+    <title>Title</title>
			
 
				+</head>
			
 
				+<body>
			
 
				+<!--<button id="btn">按钮</button>-->
			
 
				+姓名: <input type="text" id="input"><span id="msg"></span>
			
 
				+</body>
			
 
				+<script>
			
 
				+    // 获取元素.事件属性 = function 函数
			
 
				+    // 当事件触发的时候就会执行 function 函数
			
 
				+    // document.getElementById("btn").onclick = function () {
			
 
				+    //     console.log("123123123")
			
 
				+    // }
			
 
				+
			
 
				+    // 想要给input输入框绑定聚焦事件和失去焦点事件
			
 
				+    // document.getElementById("input").onfocus = function () {
			
 
				+    //     console.log("聚焦了")
			
 
				+    // }
			
 
				+
			
 
				+    document.getElementById("input").onblur = function () {
			
 
				+        // 需求: 在输入框当中去输入内容 ,
			
 
				+        var arr = ["张三","lisi","wangwu"]
			
 
				+        // var arr = ["张三","lisi","wangwu"]
			
 
				+        // 判断输入框输入的内容,是否在arr 中, 如果在arr中表示用户名已经存在了,
			
 
				+        // 获取输入框内容 , docuement.getElementById.value
			
 
				+        var val = document.getElementById("input").value
			
 
				+        var flag = false
			
 
				+        arr.forEach(function (item,index) {
			
 
				+            if(item == val){
			
 
				+                flag = true;
			
 
				+            }
			
 
				+        })
			
 
				+        // 在输入框后面显示用户名已存在红色字体
			
 
				+        var msg = document.getElementById("msg");
			
 
				+        if(flag){
			
 
				+            msg.innerHTML = "<font style='color:red'>用户名已存在</font>"
			
 
				+        }else{
			
 
				+            msg.innerHTML = "<font style='color:greenyellow'>用户名可用</font>"
			
 
				+        }
			
 
				+    }
			
 
				+
			
 
				+
			
 
				+</script>
			
 
				+</html>
			
--- a/src/main/java/com/sf/day33/15-
+++ b/src/main/java/com/sf/day33/15-
@@ -0,0 +1,82 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="en">
			
 
				+<head>
			
 
				+    <meta charset="UTF-8">
			
 
				+    <title>Title</title>
			
 
				+    <style>
			
 
				+        div{
			
 
				+            width: 100px;
			
 
				+            height: 100px;
			
 
				+            background-color: red;
			
 
				+        }
			
 
				+    </style>
			
 
				+</head>
			
 
				+<body>
			
 
				+<div id="div"></div>
			
 
				+<table border="1" cellspacing="0" cellpadding="0" width="100%">
			
 
				+    <tr>
			
 
				+        <th>id</th>
			
 
				+        <th>name</th>
			
 
				+        <th>age</th>
			
 
				+        <th>email</th>
			
 
				+    </tr>
			
 
				+    <tr>
			
 
				+        <th>1</th>
			
 
				+        <th>zhangsan</th>
			
 
				+        <th>10</th>
			
 
				+        <th>123@qq.com</th>
			
 
				+    </tr>
			
 
				+
			
 
				+    <tr>
			
 
				+        <th>2</th>
			
 
				+        <th>lisi</th>
			
 
				+        <th>20</th>
			
 
				+        <th>12233@qq.com</th>
			
 
				+    </tr>
			
 
				+    <tr>
			
 
				+        <th>3</th>
			
 
				+        <th>wangwu</th>
			
 
				+        <th>30</th>
			
 
				+        <th>234@qq.com</th>
			
 
				+    </tr>
			
 
				+<!--    <tr>-->
			
 
				+<!--        <th>4</th>-->
			
 
				+<!--        <th>zhaoliu</th>-->
			
 
				+<!--        <th>30</th>-->
			
 
				+<!--        <th>222@qq.com</th>-->
			
 
				+<!--    </tr>-->
			
 
				+</table>
			
 
				+</body>
			
 
				+<script>
			
 
				+    // 需求当鼠标移入的时候把颜色变成黄色 , 当鼠标移出的时候把颜色变成红色
			
 
				+    //绑定鼠标移入事件和鼠标移出事件
			
 
				+    // var div = document.getElementById("div")
			
 
				+    // div.onmouseenter = function () {
			
 
				+    //     div.style.backgroundColor = "yellow"
			
 
				+    // }
			
 
				+    //
			
 
				+    // div.onmouseleave = function () {
			
 
				+    //     div.style.backgroundColor = "red"
			
 
				+    // }
			
 
				+
			
 
				+    // table 表格有4个行内容
			
 
				+    //  id    name       age  email
			
 
				+    //  1      zhangsan  10   123@qq.com
			
 
				+    //  2       lisi     9    123@qq.com
			
 
				+    // 当鼠标移动到某一行, 那这行背景颜色就变成蓝色 移出的时候颜色消失
			
 
				+
			
 
				+    var trs = document.getElementsByTagName("tr")
			
 
				+    console.log(trs)
			
 
				+    for (let i = 0; i < trs.length; i++) {
			
 
				+        let tr = trs[i];
			
 
				+        // 绑定鼠标移入事件
			
 
				+        tr.onmouseenter = function () {
			
 
				+            tr.style.backgroundColor = "blue"
			
 
				+        }
			
 
				+        // 鼠标移出事件
			
 
				+        tr.onmouseleave = function () {
			
 
				+            tr.style.backgroundColor = ""
			
 
				+        }
			
 
				+    }
			
 
				+</script>
			
 
				+</html>