2021-04-27 JS 高级01

最新推荐文章于 2023-03-24 22:47:09 发布

子非鱼emma

最新推荐文章于 2023-03-24 22:47:09 发布

阅读量93

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/qq_38998319/article/details/116209118

版权

js 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

1.复习数据类型

<!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></body>
<script>
  /* 
    值类型:
        数字/字符串/布尔/null/undefined
      
        类型转换"
            把其他类型转成数字
                Number()
                ParseInt()
                ParseFloat()
                +'1'
                -'1'
                '1' - 0 

            把其他类型转成布尔
                Boolean()
                !!
                if(flag===false){

                }
                if(!flag)

            其他类型转换成字符串

                String()
                .toString()
                " "+
    引用类型:
        对象:
            万物皆对象
                数组
                函数
                伪数组
                元素
            内置对象(Math/Date/Array/Object)
            基本包装类型 String/Number/Boolean
            自定义: new Object()
     */

  console.log(+"1"); //+是数学里面的正负号的 正号
  console.log(-"1"); //+是数学里面的正负号的 负号
  console.log("1" - 0); //+是数学里面的正负号的 负号

  // var a;
  // console.log(a.toString());
  /*  var box = document.getElementById("box");
  box.onclick = function () {
    console.log(123);
  }; */

  // 基本类型中 undefined和null的区别?
  /*  undefined--未定义 当前没有 以后也没有,通常要给它赋值 会赋值为值类型
  undefined 在页面上只会有一个 */
  // var a = undefined;
  // var b = undefined;
  // null--空 --当前没有 以后会有 通常以后会赋值一个对象给该变量 null不会占用内存空间

  undefined == null //会进行类型的隐式转换=>false == false
  undefined === null //比较其实都是比较在栈里面的值

  // typeof --检测数据类型
  // typeof 数据
  // typeof(数据)
</script>

</html>

2.值类型和引用类型

<!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></body>
  <script>
    /* 
    值类型和引用类型的不同
    1.存储的位置不一样 
    值---栈  ----使用频率高 栈空间的内存是有顺序的 大小是固定的

    引用: ---堆--- 使用频率没有值类型高,堆空间的内存是无序的 大小是动态分配的
    */
    var obj = { name: "王德发" };
    obj.age = 12;
    obj.gender = "男";
    console.log(obj);
    // delete这格关键字 用于删除对象的属性
    delete obj.gender;
    console.log(obj);

    // 值传递和引用传递: 变量赋值其实是:把栈里面的的值复制一份的过程
    var a = 20;
    var b = a;
    // a = 30;
    // console.log(b);
    //值传递修改a或者b的值 两者互不影响

    //引用传递
    var o1 = {};
    var o2 = o1;
    //引用传递修改o1或者o2其实是修改的同一个对象
 

    // function fn(a,b){
    //     a++; //21
    //     b++; //21
    //     console.log(a);
    //     console.log(b);
    // }
    // fn(a,b);

    function f2(o){
        o.name = '李狗蛋';
    }
    f2(o2);
    console.log(o1);
    console.log(o2);
  </script>
</html>

3.复习逻辑运算

<!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>
    
</body>
<script>
    /* 
    作用:
        运算逻辑 连接条件表达式,得到逻辑结果(true,false)
        && || !

        &&
        两边都为true的时候 得到才是true
        
        ||
        一边为true,得到结果就是true

        ! 取反 if(flag===false)   => if(!flag)


    短路机制:

    代码1 && 代码2

    代码1 || 代码2
    
    短路运算事实上也是逻辑运算 根据逻辑运算的执行过程分析即可


    优先级 

    ! > && > ||

    (a||b) && c === c && a || b

    a|| b && c
     */
</script>
</html>

4.对象

<!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 id="box"></div>
  </body>
  <script>
    /* 
    三个角度来学习方法
    1:是什么
    2:有什么用
    3.怎么用
    
    对象 
        本质: 无序数据的集合
            数据
                属性
                方法
    
    有什么用:
        1.存储一些复杂结构的数据
        2.封装方法
    
    如何使用:
        1.找对象
            1.1 有些是人家已经提供给我们的(内置对象/BOM对象/DOM对象/Jq对象)
            1.2  还有一些自己创建的 
                var obj ={}
                var obj = new Object()
        
        2.使用对象的属性和方法:
             2.1如果使用人家的对象,直接用过 键 去访问
                键---属性名 --- 本质就是个字符串

                对象.属性名
                对象[属性名]

                对象.方法名([参数])
                对象['方法名'](参数)

            2.2 {name : ''}  obj.name = ''

    
     */
    var obj = {
      name: "任君爽",
    };
    obj.sayHi = function () {
      console.log("哈哈哈哈哈");
      console.log(this.name);
    };
    console.log(obj);
    obj.sayHi();

    // 拓展:函数事实上也是一种数据类型
    var num = 123;
    var fn = function aa() {};
    console.log(typeof num);
    console.log(typeof fn);
    // 语法糖---------能够简单快速实现效果的语法

    // 对象的  in  关键字
    var obj = { name: "包拯" };
    // 想要知道某个对象身上是否支持这个属性或者方法
    // obj.age = 20;
    // console.log('age' in obj);

    /*   兼容注册事件 
    addEventListener attachEvent
    判断当前的浏览器是否支持该方法 如果支持就使用 要不支持就是用另外一个 */
    var box = document.getElementById("box");
  /*   if (box.addEventListener) {
      //当前浏览器支持
      console.log(123);
    } else if (box.attachEvent) {
      console.log(456);
    } */

    if('addEventListener' in box){
        console.log(123);
    }

    // in通常还配合 for in  遍历对象的可遍历的属性 
  </script>
</html>

5.调试篇

<!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>
    <button id="btn">按钮</button>
  </body>
  <script>
    // 代码调错的步骤
    /* 
    1.如果自己的代码运行没有效果或者不是自己想要的效果,千万别直接回头查看代码.先打开控制台 console  
    如果说有报错 ---解决报错
    要是没有报错 ->跳转到第二步

    2.需要断点调试
      Sources
        哪里不对点哪里

    3.根据你自己想要以及展示的效果(推理)
     */

    /* debugger  当代码执行到这一行的时候就会停止*/
    //  console.log(456);
    //  console.log(456);
    //  debugger
    //  console.log(456);
    function fn() {
      console.log(123);
      console.log(123);
      console.log(123);
      console.log(123);
      console.log(123);
      console.log(123);
    }

    document.getElementById("btn").onclick = function () {
      console.log("兽人永不为奴");
      console.log("兽人永不为奴");
      console.log("兽人永不为奴");
      console.log("兽人永不为奴");
     
      console.log("兽人永不为奴");
      console.log("兽人永不为奴");
      fn(); 
      console.log("兽人永不为奴");
      console.log("兽人永不为奴");
      console.log("兽人永不为奴");
      console.log("兽人永不为奴");
      console.log("兽人永不为奴");
      console.log("兽人永不为奴");
    };
  </script>
</html>

6.封装

<!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>
    
</body>
<script>
    /* 
        封装:
            -函数封装
                把一串代码,放到一个函数,可以重复使用
            
            对象的封装
                面向对象的思想

        面向对象的思想
            --吃烤鸭
            面向过程化
            1.买一只小鸭
            2.买饲料
            3.养大
            4.杀鸭
            5.褪毛
            6.收拾鸭子的尸体
            7.买个烤箱
            8.把鸭子放里面
            9,等待鸭子被烤熟
            10.配菜+吃鸭子

            关注过程,任何的步骤都需要自己仔仔细细的处理

            面向对象化
            拿钱去市场买一个烤鸭

            注重结果,找对象 指挥对象去做事情


            怎么做:
                1.找 对的 对象
                    --系统自带的
                    --自定义的
                2.调用对象的属性和方法实现效果
     */
</script>
</html>

7.面向对象

<!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>
    
</body>
<script>
    /* 
    面向对象:
        1.找到对的对象
        2.调用里面的属性和方法
    
    特征:
        封装 -封- 密封起来 不让外部知道里面实现的过程
        继承 -继承-  子类具有父类的特征(属性) 和方法 代码重用
        多态 -具有表现为多种形态的能力-
     */
</script>
</html>

8.dom操作

<!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></body>
  <script>
    // 面向过程化代码 实现添加样式的div  难以维护
    // 1.动态创建多个div
    for (var i = 0; i < 3; i++) {
      var div = document.createElement("div");
      // 2.修改宽度,高度,背景颜色
      div.style.width = "200px";
      div.style.height = "200px";
      div.style.backgroundColor = "tomato";

      // xxx.style.xxx = 'xxx'
      // 3.追加到页面
      document.body.appendChild(div);
    }
  </script>
</html>

9.函数封装DOM

<!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></body>
  <script>
    // 1.先封装一个可以生辰个指定元素的函数
    function create(tag) {
      return document.createElement(tag);
    }

    // 2.封装一个可以修改css样式的方法
    function css(element, name, value) {
      element.style[name] = value;
    }

    for (var i = 0; i < 3; i++) {
      var div = create("div"); //
      css(div, "width", "100px");
      css(div, "height", "100px");
      css(div, "backgroundColor", "pink");
      document.body.appendChild(div);
    }
  </script>
</html>

10.dom封装2

<!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></body>
  <script>
    // 1.先封装一个可以生辰个指定元素的函数
    function create(tag) {
      return document.createElement(tag);
    }

    // 2.封装一个可以修改css样式的方法 参数1 元素 参数2 对象
    function css(element, options) {
      for (var key in options) {
        //console.log(key + "-----------" + options[key]); //属性

        element.style[key] = options[key];
      }
    }

    for (var i = 0; i < 3; i++) {
      var div = create("div"); //
      css(div, {
        width: "100px",
        height: "100px",
        backgroundColor: "tomato",
      });
      document.body.appendChild(div);
  
    }
  </script>
</html>

11.面向对象封装体验

<!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></body>
  <script>
    //初体验 使用对象封装的好处 : 隔绝别人的代码污染
    // 声明一个叫 $ 的对象
    var $ = {
      create: function (tag) {
        return document.createElement(tag);
      },
      css: function (element, options) {
        for (var key in options) {
          element.style[key] = options[key];
        }
      },
      append: function (parent, child) {
        parent.appendChild(child);
      },
    };

    for (var i = 0; i < 3; i++) {
      var div = $.create("div");
      $.css(div, {
        width: "150px",
        height: "150px",
        background: "green",
      });
      $.append(document.body,div)
    }
  </script>
</html>

12.构造函数

<!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></body>
  <script>
    /* 
    
    构造函数:
            是什么? 本质就是一个函数
            干嘛用的? 用来批量创建对象的 --封装代码的
            怎么用?
            function 对象名(属性){
                this.属性名 = 值
                this.方法名 = function(){

                }
            }
    
     */

    //  创建两个人对象
    // 面向对象的代码书写的时候 要考虑有哪些属性和方法
    // 一个叫王德发
    // 一个叫翠花

    // var wtf = {
    //   name: "王德发",
    //   age: 20,
    //   sex: "男",
    //   say: function () {
    //     alert("hey girl");
    //   },
    // };

    // var ch = {
    //   name: "翠花",
    //   age: 18,
    //   sex: "女",
    //   say: function () {
    //     alert("上酸菜");
    //   },
    // };
    // console.log(wtf);
    // console.log(ch);
    // 工厂函数 --详见基础09
    // function createPerson(name, age, sex) {
    //   var person = {
    //     name: name,
    //     age: age,
    //     sex: sex,
    //   };
    //   return person;
    // }
    // var js = createPerson("剑圣", 18, "男");
    // var jax = createPerson("贾克斯", 20, "女");
    // console.log(js);
    // console.log(jax);

    // 构造函数也略显复杂,我们使用构造函数
    function Person(name, sex, lines) {
      this.name = name;
      this.sex = sex;
      this.lines = lines;
      this.sayHi = function () {
        console.log("敌军还有30秒到达战场,碾碎他们");
      };
    }
    var jj = new Person("菲奥娜", "女", "锐利的剑锐利的眼");
    var cstn = new Person("崔丝塔娜", "女", "我好像射点什么");
    console.log(jj);

    function Guaishou(name, sex, lines) {
      this.name = name;
      this.sex = sex;
      this.lines = lines;
      this.sayHi = function () {
        console.log("打倒奥特曼.夺奥特之母");
      };
    }
    // 好处就是能看着这种对象是什么类型
    var hsgn = new Guaishou("火山怪鸟");
    console.log(hsgn);
  </script>
</html>

13，使用构造函数封装代码

<!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 id="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </body>
  <script>
    // for(var i= 0;i<3;i++){
    //     var div = $('div');
    //     div.css({
    //         width:100
    //     })
    // $('body').append(div)
    // }

    /*
    功能:
    1.创建元素
    2.改样式
    3.获取元素
    4.追加子元素
     */
    /* 面向对象首先需要考虑的是

     1.有什么对象

        自己创建自己的jq对象
        jq对象事实上就是伪数组 伪数组可以调用很多的方法

      */

    function MyJqObj(selector) {
      var res = document.querySelectorAll(selector);
      for (var i = 0; i < res.length; i++) {
        //当前要被添加 修改样式的元素  this[i]
        this[i] = res[i];
      }
      //要被修改元素的长度
      this.length = res.length;

      //封装一个可以一次性修改css样式的方法 方法名css
      this.css = function (opt) {
        for (var i = 0; i < this.length; i++) {
          for (var key in opt) {
            this[i].style[key] = opt[key];
          }
        }
      };
    }

    function $(selector) {
      //调用我们自定义的MyJqObj
      return new MyJqObj(selector);
    }
    //=================写法和jq一模一样===============================
    var box = $(".box");
    box.css({
      width: "100px",
      height: "50px",
      backgroundColor: "green",
    });
  </script>
</html>