• 2022-08-24 第二小组 张明旭 前端学习记录

    目录

    重点归纳

    知识点

     JavaScript脚本语言，解释性

    JS的解释器：不同浏览器有不同的JS解释器，但解释结果一样

    拓展知识点：ES

    JS的位置

    JS常用的变量

    ES6声明变量语法

    Array()

      函数 （Java中的方法）

    对象

    判断

    循环

            常用工具对象

    全局变量

    常用类型的方法

    String：

    Math：

    Date：

    JS真正自己的东西

    DOM编程：Document Object Model

     事件

    用js代码加标签

    删除按钮标签

    删除一个列表中的元素

    重点归纳

    JavaScript

    知识点

     JavaScript脚本语言，解释性

    主要给HTML网页增加动态功能

    通常的JS是运行在浏览器环境下的，是由浏览器解释执行的，可以控制页面

    JS分两种模型：

                DOM：文档对象模型，document

                BOM：浏览器对象模型，window

    nodejs:运行在计算机环境下,不能操作BOM、DOM，但是它可以操作文件，能操作数据库，实际上是一种后端技术.

    JS的解释器：不同浏览器有不同的JS解释器，但解释结果一样

    Chrome解释器叫V8

    node解释器也叫V8

    苹果解释器：JavaScriptCore

    拓展知识点：ES

    EcmaScript （ES）：实际上是一种规范、语法

    JavaScript （JS）：是具体的实现，能干活的

    ES5 ES6（2022正在流行） ES7 ......语法

    JS基本上是Web前端核心！！！

              了解前端一定学好JS

                JS使用

                JS底层

                JS解析过程

                JS优化

    JS的位置

    JS只要放在html文件中就好使，在浏览器中写都行，只要有浏览器就能运行

    但一般写在body标签的最后部分

    因为页面的加载顺序是从上到下的

    JS是用来控制页面的显示方式的，需要等待页面加载完成，再执行JS

    推荐外部引入的方式：

    document.write("我是外面引入的js")
    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.     <title>Documenttitle>
    9. head>
    10.  
    11. <body>
    12.      <h1>我是H1h1>
    13.     <script src="./js/my.js">
    14.         // 向body打印输出
    15.         document.write("123")
    16.     script>
    17. body>
    18.  
    19. html>

    JS常用的变量

     自动类型推断  弱类型

            1.数字类型 number

            2.字符串类型 string

            3.布尔类型 boolean

            4.null 空。定义了，为空

            5.undefined 没有定义

            6.NaN 非数字

            7.数组

            8.对象

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8. head>
    9. <body>
    10.       <script>
    11.         var v1 = 10;
    12.         var v2 = 1.5;
    13.         var v3 = "你好";
    14.         var v4 = '我好';
    15.         var v5 = true;
    16.         var v6 = null;
    17.         // v7未定义
    18.         // document.write(v7)
    19.         // 数组
    20.         var v7 = [1,2,3,4,5];
    21.         // 对象
    22.         var v8 = {
    23.             "username" : "admin",
    24.             "password" : "123456",
    25.             "id" : 1001
    26.         };
    27.         document.write(v8.username);
    28.       script>
    29. body>
    30. html>

    ES6声明变量语法

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8. head>
    9. <body>
    10.      <script>
    11.         // 声明变量可以覆盖
    12.         // var num = 1;
    13.         // var num = 2;
    14.         // document.write(num)
    15.  
    16.         // 新的声明变量的关键字：let不能重新声明
    17.         // let num = 1;
    18.         // num = 2;
    19.         // document.write(num);
    20.  
    21.         // 声明常量的关键字，const，不能重新赋值、声明
    22.         const num = 1;
    23.         // num = 2;
    24.         document.write(num);
    25.      script>
    26. body>
    27. html>

    Array()

      Array()是一个函数，返回值就是一个空数组

    JS里没有“方法”这个概念，叫做函数

    JS里的方法不是java里的方法，JS里的函数相当于java里的方法

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8. head>
    9. <body>
    10.      <script>
    11.         // let arr = new Array();
    12.         // Array(),在JS中函数可以当类用
    13.  
    14.         // 可以理解为JS里的数组就是java中的集合
    15.         let arr = [1,2,3,4,5]
    16.  
    17.         // JS中数组没有下标越界，中间跳过的值为undefined
    18.         arr[100] = 10;
    19.  
    20.         // 数组中可以写标签：例：换行
    21.         document.write(arr + "
      "      );
    22.         document.write(arr.length);
    23.      script>
    24. body>
    25. html>

    函数 （Java中的方法）

            可有参数列表，参数可以有多个

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8. head>
    9. <body>
    10.      <script>
    11.         function plus(a,b) {
    12.             let a = 1;
    13.             let b = 2;
    14.             // console.log(a + b);
    15.  
    16.             // 返回值
    17.             // return的作用:可以终止方法的执行
    18.             return a + b; 
    19.             console.log(123);
    20.         }
    21.  
    22.         // 调用函数
    23.         console.log(plus(100,2,3,4,1,2));
    24.      script>
    25. body>
    26. html>

    对象

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8. head>
    9. <body>
    10.      <script>
    11.  
    12.         // Array()返回一个空数组
    13.         // Object()返回一个空对象
    14.         // let obj = new Object();
    15.  
    16.         // 相当于定义一个类
    17.         function User(name){
    18.             this.name = name;
    19.         } 
    20.  
    21.  
    22.         // 创建了一个user对象
    23.         // 之前定义的this.name就是对象的属性
    24.         // 现在的user对象中有一个name属性，值为张三
    25.         let user = new User("张三");
    26.         console.log(user.name);
    27.  
    28.         let obj = Object();
    29.         // JS对象的属性
    30.         obj.name = "李四";
    31.         obj.age = 30;
    32.  
    33.  
    34.         // JS对象的方法
    35.         obj.eat = function (){
    36.             console.log("我正在吃东西！");
    37.         }
    38.  
    39.  
    40.         // 对象调方法
    41.         obj.eat();
    42.  
    43.         // json串
    44.         let teacher = {
    45.             name : "王五",
    46.             age : 35,
    47.             drank: function() {
    48.                 console.log("我正在喝酒！！");
    49.             }
    50.         }
    51.         teacher.drank();
    52.         console.log(teacher.name);
    53.      script>
    54. body>
    55. html>

    判断

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8. head>
    9. <body>
    10.      <script>
    11.  
    12.         /* 
    13.         在JS中，if的条件
    14.         规定：0、null、undefined为false，非0、null、undefined为true   
    15.         */
    16.         let a = 1;
    17.         if(a = 2){
    18.             console.log(a);
    19.             console.log("哈哈哈");
    20.         }else{
    21.             console.log("嘿嘿嘿");
    22.         }
    23.      script>
    24. body>
    25. html>

    循环

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8. head>
    9. <body>
    10.      <script>
    11.  
    12.         let arr = [1,2,3,4,5]
    13.         for(let i = 0;i < arr.length;i++){
    14.             console.log(arr[i]);
    15.         }
    16.         for(i in arr){
    17.             console.log(arr[i]);
    18.         }
    19.  
    20.         let student = {
    21.             name : "小明",
    22.             age : 10
    23.         }
    24.  
    25.  
    26.         // 遍历对象
    27.         // console.log(studen[0]);
    28.         for(attr in student){
    29.             console.log(attr);
    30.             console.log(student[attr]);
    31.         }
    32.  
    33.  
    34.      script>
    35. body>
    36. html>

    常用工具对象

    Array()

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8. head>
    9. <body>
    10.      <script>
    11.         let arr1 = [1,2,3,4];
    12.         let arr2 = [9,8,7,6];
    13.  
    14.         // 拼接数组
    15.         console.log(arr1.concat(arr2));
    16.  
    17.         // 新增
    18.         arr1.push(10);
    19.  
    20.         // 删除最后一个
    21.         arr1.pop();
    22.  
    23.         // 删除第一个元素
    24.         arr1.shift();
    25.         console.log(arr1);
    26.      script>
    27. body>
    28. html>

    全局变量

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8. head>
    9. <body>
    10.      <script>
    11.         let name = "你好";
    12.  
    13.         // 对字符串进行编码
    14.         document.write(escape(name));
    15.  
    16.         let js = "alert('哈哈哈')";
    17.  
    18.  
    19.         // 如果字符串是js代码，解析成代码运行
    20.         document.write(eval(js));
    21.  
    22.  
    23.         // isNaN是不是一个数字
    24.         document.write(isNaN("哈哈"));
    25.  
    26.  
    27.         // parseInt:转成整数
    28.         // parseFloat:转成小数
    29.  
    30.  
    31.         // 能除
    32.         document.write(10/3)
    33.  
    34.  
    35.         // Number()转成数字
    36.         document.write(Number(11111));
    37.  
    38.  
    39.         // 转成字符串
    40.         document.write(String(123))
    41.      script>
    42. body>
    43. html>

    常用类型的方法

    String：

    1. charAt

    2. indexOf

    3. lastIndexOf

    4. replace

    5. concat

    6. match

    7. substring

    8. substr

    9. toUpperCase

    10. toLowerCase

    Math：

    1. random

    2. ceil

    3. floor

    4. round

    Date：

    1. getDate(日)

    2. getDay（星期）

    3. getMonth

    4. getYear

    5. getHours

    6. getMinutes

    JS真正自己的东西

    DOM编程：Document Object Model

    • 文档本身就是一个文档对象document

    • 所有的HTML元素都是元素节点

    • 所有的HTML属性都是属性节点

    • 元素的文本就数文本节点

    • 注释节点（一般不用）

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8.     <style>
    9.         .div1{
    10.             color: aqua;
    11.         }
    12.     style>
    13. head>
    14. <body>
    15.  
    16.     //    根据ID属性获取元素节点
    17.     //    通过ID获取到的节点是唯一一个节点
    18.     let div = document.getElementById("div1");
    19.  
    20.  
    21.     //    根据标签名获取节点
    22.     //    通过标签获取到的节点是一堆节点
    23.     document.getElementsByTagName("div");
    24.     console.log(div[0]);
    25.  
    26.  
    27.     //    根据class样式样式获取元素节点
    28.     //    通过class样式获取到的节点是一堆节点
    29.     let div1 = document.getElementsByClassName("div1");
    30.     console.log(div[0]);
    31.  
    32.  
    33.     // 新方式
    34.     // querySelector找到和传入的选择器匹配的第一个元素节点
    35.     // 返回值是一个元素节点
    36.     let div2 = document.querySelector("div");
    37.     console.log(div);
    38.  
    39.  
    40.     // querySelectorAll找到和传入的选择器匹配的所有元素节点
    41.     // 返回值是一堆元素节点
    42.     let divs = document.querySelectorAll("div");
    43.     console.log(divs[0]);
    44.  
    45.  
    46.  
    47.      let div = document.querySelector("div")
    48.  
    49.      // innerHTML可以获取HTML标签
    50.      console.log(div.innerHTML);
    51.  
    52.  
    53.      // innerText可以获取到文本
    54.      console.log(div.innerText);
    55.  
    56.  
    57.      //改变元素的内容
    58.      let div2 = document.querySelector(".div2");
    59.      div2.innerHTML = "<h1>我是div2里面的h1h1>"
    60.      div2.innerText = "<h1>我是div2里面的h1h1>"
    61.      script>
    62. body>
    63. html>

     事件

    事件就是我们和HTML标签元素发生交互时产生的行为

     onclick：单击事件

    ondblclicl:双击事件

    onblur:失去焦点

    onfocus:得到焦点

    onchange:改变事件

    onload:加载事件（加载的时候干什么）

    onmousemove:鼠标跟随事件(跟随鼠标的特效)

    当设置了对应的事件之后会执行目标函数

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>事件title>
    8. head>
    9. <body onload="load()">
    10.     <input type="text" onblur="valid()" onfocus="get()">
    11.  
    12.     
    13.     <button type="button" onclick="jump('你好')">按钮button>
    14.     <select onchange="change()">
    15.         <option value="">吉林省option>
    16.         <option value="">辽宁省option>
    17.     select>
    18.     <script>
    19.  
    20.         // 点击按钮就弹出一个弹窗
    21.         function jump(){
    22.             alert("按钮被点击了")
    23.  
    24.         }
    25.         function valid(){
    26.             console.log("失去了焦点。。。");
    27.  
    28.         }
    29.         function get(){
    30.             console.log("获得了焦点。。。");
    31.  
    32.         }
    33.         function change(){
    34.             console.log("发生了改变");
    35.         }
    36.         function load(){
    37.             console.log("已经加载完毕");
    38.         }
    39.  
    40.         
    41.     script>
    42.  
    43. body>
    44. html>

    用js代码加标签

    将一个按钮的点击事件设置成添加一个标签。

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8.     <style>
    9.         .mydiv{
    10.             width: 200px;
    11.             height: 200px;
    12.             background-color: green;
    13.         }
    14.     style>
    15. head>
    16. <body>
    17.  
    18.     <button onclick="fun()">点我button>
    19.  
    20.     <div id="container">div>
    21.  
    22.     <script>
    23.  
    24.         function fun() {
    25.  
    26.         // 新建一个元素节点
    27.         let myDiv = document.createElement("div");
    28.  
    29.         //给新加的div加样式 
    30.         myDiv.setAttribute("class","mydiv");
    31.  
    32.         // 开发中规范，找一个值，有id就用id
    33.         let container = document.querySelector("#container");
    34.  
    35.         // 把新建的元素节点加入到指定位置
    36.         // innerHTML或innerText赋值只能赋字符串
    37.         // container.innerHTML = myDiv;
    38.         container.append(myDiv);
    39.         }
    40.     script>
    41. body>
    42. html>

    删除按钮标签

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8. head>
    9. <body>
    10.  
    11.     <button>按钮1button>
    12.  
    13.     <button onclick="del(this)">按钮2(删除自己)button>
    14.  
    15.     <script>
    16.  
    17.         function del(Obj){
    18.             // 找到要删除的元素
    19.             // let btn = document.querySelector("button");
    20.             /* 元素.remove方法直接删除，
    21.                 有多个按钮时，这种方法默认删除第一个
    22.             */
    23.             // btn.remove;
    24.  
    25.             //删除自己，需传参
    26.             Obj.remove();
    27.         }
    28.  
    29.     script>
    30. body>
    31. html>

    删除一个列表中的元素

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8. head>
    9. <body>
    10.  
    11.     <ul>
    12.         <li>1li>
    13.         <li>2li>
    14.         <li>3li>
    15.         <li>4li>
    16.     ul>
    17.  
    18.     <button onclick="nothing()">清空列表按钮button>
    19.  
    20.     <button onclick="delone()">删除一行列表button>
    21.  
    22.     <script>
    23.  
    24.         function delone(){
    25.             let ul = document.querySelector("ul");
    26.             let lis = document.querySelectorAll("li");
    27.             ul.removeChild(lis[0]);
    28.         }
    29.  
    30.         function nothing(){
    31.             // 清空ul列表
    32.             let ul = document.querySelector("ul");
    33.             ul.innerHTML = "";
    34.         }
    35.  
    36.     script>
    37. body>
    38. html>
  • 相关阅读:
    A-level化学知识点（二）：一般原则——General Properties
    给rust的cargo环境或gnome构建器安装rust-analyzer
    Postgresql更改字段默认值、设置字段默认值、删除字段默认值
    salesforce零基础学习（一百一十七）salesforce部署方式及适用场景
    2023 uniapp( vue3 + TS )使用canvas生成海报并保存，taro/微信小程序也适用
    IC入行第一步：怎样选择岗位和公司?
    SWIFT中最常见的内存泄漏陷阱
    redis详解
    Web前端开发面试题汇总
    Android焦点机制结合WMS
  • 原文地址：https://blog.csdn.net/weixin_71777094/article/details/126513689