💔JavaScript学习笔记-(叁)

• 对象
  • Date
  • Json
  • AJAX
• 面向对象
  • 原型
  • 类和继承
• BOM 对象
  • window
  • Navigator
  • screen
  • location
  • document
• DOM 对象‼
  • 获得节点
  • 更新节点
  • 删除节点
  • 插入节点
  • 排列节点
• 操作表单
  • 获得表单信息
  • 提交表单

对象

• 几种标准对象

console.log(typeof 123); // number
console.log(typeof "123"); // string
console.log(typeof true); // boolean
console.log(typeof NaN); // number
console.log(typeof []); // object
console.log(typeof {}); // object
console.log(typeof Math.max); // function
console.log(typeof undefined); // undefined

---

Date

var time = new Date();

// 输出
console.log(time); //  Wed Jan 20 2021 21:21:32 GMT+0800 (中国标准时间)
console.log(time.getFullYear()); // 2021
console.log(time.getMonth()); // 0  (注意这个月份是0~11,不是1~12)
console.log(time.getDate()); // 20
console.log(time.getHours()); // 21
console.log(time.getMinutes()); // 19
console.log(time.getSeconds()); // 4

/**
 * 1611148746727
 * 返回的是自1970年开始计时,到现在为止的毫秒数
 * 这就产生了2038问题,因为到那时候这个计数单位就溢出了,成为无效的负数
 */
console.log(time.getTime());

//记录时间,通过时间戳转换.
var log_time = new Date(1611148746727);
console.log(log_time); //  Wed Jan 20 2021 21:19:06 GMT+0800 (中国标准时间)

// 转换格式
console.log(log_time.toLocaleString()); //  2021/1/20下午9:19:06
console.log(log_time.toUTCString()); //  Wed, 20 Jan 2021 13:19:06 GMT

---

Json

• 目前网络数据传输最主要格式.

  

• Json 的使用

  var Weidows = {
    name: "Weidows",
    age: 21,
    gender: "男",
    work: "student",
  };
  
  /**
   * 转换为Json格式
   *  {"name":"Weidows","age":21,"gender":"男","work":"student"}
   */
  var JsonWeidows = JSON.stringify(Weidows);
  console.log(JsonWeidows);
  
  /**
   * 解析Json
   *  { name: 'Weidows', age: 21, gender: '男', work: 'student' }
   */
  var Weidows_2 = JSON.parse(JsonWeidows);
  console.log(Weidows_2);

---

AJAX

• 三种请求方法:

  • 原生的 js 写法 xhr 异步请求

  • jQuery 封装好的方法$(#name).ajax(“”)

  • axios 请求

• 挂起,后期学.

---

面向对象

• 与 Java 中类-对象有些不同.

原型

• 通过原型创建对象

  var people = {
      name: "people",
      run: function () {
        console.log(this.name + "Running...");
      },
    },
    bird = {
      name: "bird",
      fly: function () {
        console.log(this.name + "Flying...");
      },
    },
    xiaoming = {
      name: "小明",
    };
  
  xiaoming.__proto__ = people;
  xiaoming.run(); //  小明Running...
  xiaoming.__proto__ = bird;
  xiaoming.fly(); //  小明Flying...
  
  // 给原型新增方法
  xiaoming.prototype.hello = function () {
    console.log("Hello.");
  };

• 太恶心了,所以 ES6 引入 class,参下.

---

类和继承

• 跟 Java 几乎一模一样了!

class Student {
  constructor(name) {
    this.name = name;
  }

  hello() {
    console.log("hello.");
  }
}

class XiaoStudent extends Student {
  constructor(name, grade) {
    super(name);
    this.grade = grade;
  }

  getGrade() {
    console.log(this.grade);
  }
}

var xiaoming = new Student("xiaoming"),
  xiaohong = new XiaoStudent("xiaohong", 1);

console.log(xiaoming); //  Student { name: 'xiaoming' }
console.log(xiaohong); //  XiaoStudent { name: 'xiaohong', grade: 1 }

• 原理上还是利用原型

  • 原型链结构
  

---

BOM 对象

• browser object model

window

• 这个对象代表浏览器窗口

  

---

Navigator

• Navigator 封装了浏览器的信息

• 可用来判断平台和浏览器信息,但是不建议使用,这个信息可被修改/伪造.

---

screen

• 屏幕信息

screen.width; // 1920
screen.height; // 1080

---

location

• location 代表当前页面的 URL 信息
• 重要,常用!

---

document

• document 代表当前的页面，HTML DOM 文档树

• 获取/更改标题

  document.title; // "【狂神说Java】JavaScript学习笔记_pan_h1995的博客-CSDN博客"
  
  document.title = "Weidows"; // "Weidows"

  ---

• 获取具体的文档树节点

  var app = document.getElementById("app");

  ---

• 获取 cookie

  
  • 劫持 cookie
    • 通过获取 cookie 就可以在另一台机器上在不输密码的情况下登录
    • 比如Bilibili-helper,获取一些 cookie 就可以伪造登录(确认安全情况下妥善利用)

  ---

• history

  • 前进 history.forward()
  • 后退 history.back()

---

DOM 对象‼

• document object model 浏览器网页就是一个 Dom 树形结构！

• 常用操作

  • 遍历 Dom 节点：得到 Dom 节点
  • 更新：更新 Dom 节点
  • 删除：删除一个 Dom 节点
  • 添加：添加一个新的节点

  ---

获得节点

• 要操作一个 Dom 节点，必须要先获得这个 Dom 节点.
• 之后尽量都使用 jQuery()

var h1 = document.getElementsByTagName("h1"),
  class_1 = document.getElementsByClassName("class-1"),
  app = document.getElementById("app");
var children = app.children;

---

更新节点

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body id="body">
    <div>123</div>

    <script>
      var body = document.getElementById("body");
      // 会覆盖掉所有文档树,比如上面的div被覆写
      body.innerHTML = "<em>这里是body标签.</em>";

      // 修改css样式
      body.style.color = "red";
      body.style.fontSize = "20px";
    </script>
  </body>
</html>

---

删除节点

• 需要先获取父节点,在通过父节点删除目标子节点.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <!-- 删除这个 -->
    <div id="here">123</div>

    <script>
      var self = document.getElementById("here");
      var father = self.parentElement;
      father.removeChild(self);

      // 动态删除,删除后子节点index会自动改变.
      console.log(father.children[0]); // <div>1</div>
      father.removeChild(father.children[0]);
      console.log(father.children[0]); // <div>2</div>
    </script>
  </body>
</html>

---

插入节点

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body id="body">
    <div>1</div>
    <div>2</div>
    <div>3</div>

    <script>
      // var body = document.getElementById("body");
      // ByTagName返回的是数组,这句等同于上面
      var body = document.getElementsByTagName("body")[0];

      //创建一个新的节点
      var newP = document.createElement("p"); //创建一个p标签
      newP.id = "newP";
      newP.innerText = "Hello World";
      body.appendChild(newP);

      //创建一个script标签
      var myScript = document.createElement("script");
      myScript.setAttribute("type", "text/javascript");

      //创建一个style标签
      var myStyle = document.createElement("style"); //创建了一个空style标签
      myStyle.setAttribute("type", "text/css");
      myStyle.innerHTML = "body{background-color:chartreuse;}"; //设置标签内容

      //多种方法注入
      // body.appendChild(myStyle);
      // body.style.backgroundColor = "chartreuse";
      // document.getElementByTagName("body")[0].appendChild(myStyle);
      document.body.appendChild(myStyle);
    </script>
  </body>
</html>

---

排列节点

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body id="body">
    <div id="div-1">1</div>
    <div id="div-2">2</div>

    <script>
      var div1 = document.getElementById("div-1");
      var div2 = document.getElementById("div-2");
      document.body.insertBefore(div2, div1);
      // 这样就把div2插到div1前面了.
    </script>
  </body>
</html>

• 除此之外还有.replace 等等,不再赘述,用时看文档就行.

---

操作表单

• 表单主要用来提交信息
  • 文本框----text
  • 下拉框----select
  • 单选框----radio
  • 多选框----checkbox
  • 隐藏域----hidden
  • 密码框----password

---

获得表单信息

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <form action="post">
      <p><span>用户名：</span><input type="text" id="username" /></p>
      <!--多选框的值就是定义好的value-->
      <p>
        <span>性别：</span>
        <input type="radio" name="sex" value="man" id="boy" />男
        <input type="radio" name="sex" value="woman" id="girl" />女
      </p>
    </form>

    <script>
      var input_text = document.getElementById("username");
      var boy_radio = document.getElementById("boy");
      var girl_radio = document.getElementById("girl");

      //获取输入框的值
      input_text.value;
      //修改输入框的值
      input_text.value = "Weidows";

      //对于单选框，多选框等等固定的值，boy_radio.value只能取到当前的值man/woman
      boy_radio.checked; //查看返回的结果，是否为true，如果为true，则被选中。
      girl_radio.checked = true; //赋值
    </script>
  </body>
</html>

• 效果

  

---

提交表单

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
    <!--MD5加密工具类-->
    <script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.js"></script>
  </head>
  <body>
    <!--
      表单绑定提交事件
      οnsubmit= 绑定一个提交检测的函数:true，false
      将这个结果返回给表单，使用onsubmit接收
    -->
    <form action="" method="post" onsubmit="return aaa()">
      <!--
        表单提交抓取的是带有name属性的input标签的value,不带的不会抓
      -->
      <p>
        <span>用户名：</span>
        <input type="text" id="username" name="username" required />
      </p>
      <p><span>密码：</span> <input type="password" id="password" /></p>
      <input type="hidden" id="md5-password" name="password" />

      <!--
        <button type="submit">提交</button> 与下面等效
        绑定事件 onclick 被点击
        <input type="submit" onclick="aaa()" />
      -->
      <input type="submit" />
    </form>

    <script>
      function aaa() {
        var username = document.getElementById("username");
        var pwd = document.getElementById("password");
        var md5pwd = document.getElementById("md5-password");

        /**
         * 这里可以校验判断或处理表单内容，true就是通过提交，false就是阻止提交
         * 上面username是用required来判空
         * password是用下面的if判空
         */
        if (pwd.value === "") {
          alert("请填写全.");
          return false;
        } else {
          md5pwd.value = md5(pwd.value); // 加密
          return true;
        }
      }
    </script>
  </body>
</html>

• 效果