留言板

获取form表单内容

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>获取表单元素</title>
    <style>
      .login {
        width: auto;
        height: 150px;
        border: 1px dashed red;
        background-color: rgb(132, 193, 193);
      }
      form input {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        outline: 0;
        border: 1px solid rgba(219, 195, 12, 0.4);
        background-color: rgba(255, 255, 255, 0.2);
        width: 250px;
        border-radius: 3px;
        padding: 10px 15px;
        margin: 0 auto 10px auto;
        /* display: block; */
        text-align: center;
        font-size: 18px;
        color: rgb(17, 93, 233);
        transition-duration: 0.25s;
        font-weight: 300;
      }
    </style>
  </head>
  <body>
    <form action="login.php" method="post" id="login">
      <fieldset class="login" align="center">
        <legend>请登录</legend>
        <label for="email">邮箱：</label>
        <input
          type="email"
          name="email"
          id="email"
          value="admin@php.cn"
          autofocus
        />
        <br />
        <label for="password">密码：</label>
        <input type="password" name="password" id="password" value="123456" />
        <br />
        <button>提交</button>
      </fieldset>
    </form>
    <script>
      //获取form元素  第一种方法用querySelector
      //   const form = document.querySelector("#login");
      //   //   console.log(form);
      //   let email1 = form.querySelector("#email");
      //   console.log(email.value);
      //   //获取form元素  第二种方法用forms
      //   const form1 = document.forms;
      //   console.log(form1[0][1]);
      //   console.log(form1.login.email.value);
      //   对于forms来说, 索引与id同义;
      //   可以直接使用input的name属性来匹配表单控件元素;
      //   控件可以用name来引用, 如果没有name, 就用id;
      let email = document.forms.login.email.value;
      let password = document.forms.login.password.value;
      let user = {
        email,
        password,
      };
      console.log(JSON.stringify(user, null, 2));
    </script>
  </body>
</html>

遍历及元素选中

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>遍历dom树</title>
  </head>
  <body>
    <ul class="list">
      <li class="item">item1</li>
      <li class="item">item2</li>
      <li class="item">item3</li>
      <li class="item">item4</li>
      <li class="item">item5</li>
    </ul>
    <script>
      //子元素用children
      let list = document.querySelector(".list");
      console.log(list.children);
      //类数组转换成这数组
      //1.用Array.from()
      console.log(Array.isArray(Array.from(list.children)));
      // 2.用...rest
      console.log(Array.isArray([...list.children]));
      //遍历
      //1 传统方式获取第一个元素
      document.querySelector(".list>.item:first-of-type").style.color = "white";
      //或者
      list.children[0].style.background = "coral";
      //2用特定语法
      // 获取第一个元素用firstElementChild
      list.firstElementChild.style.background = "blue";
      // 获取最后一个元素用lastElementChild
      list.lastElementChild.style.background = "coral";
      // 获取第一个元素的下一个兄弟元素用nextElementSibling
      list.firstElementChild.nextElementSibling.style.background = "green";
      // 获取一个元素的上一个兄弟元素用previousElementSibling
      list.lastElementChild.previousElementSibling.style.background = "red";
      //获取父节点
      list.firstElementChild.parentNode.style.border = "2px solid";
    </script>
  </body>
</html>

模拟留言

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>留言板</title>
  </head>
  <body>
    <input
      type="text"
      onkeydown="addMsg(this)"
      placeholder="请输入留言"
      autofocus
    />
    <ul class="list"></ul>
    <script>
      function addMsg(e) {
        //1获取输入框容器
        if (event.key === "Enter") {
          //   console.log(e);
          const ul = document.querySelector(".list");
          // 2判断输入内容是否为空，
          if (e.value.trim().length === 0) {
            alert("留言不能为空");
            e.focus();
            return false;
          }
          const li = document.createElement("li");
          //3不为空则添加到ul里，且添加一个删除按钮
          li.innerHTML =
            e.value + "<button onclick='del(this.parentNode)'>删除</button>";
          if (ul.firstElementChild !== null) {
            ul.firstElementChild.before(li);
          } else {
            ul.append(li);
          }
          //   4.将输入框清空
          e.value = null;
          // 5，输入框焦点重置
          e.focus();
        }
      }
      function del(e) {
        return confirm("是否删除") ? e.remove() : false;
      }
    </script>
  </body>
</html>

批改老师：

PHPz

批改状态：合格

老师批语：

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

vscode的安装和html语法标签

2022-03-20 10:26:41