Day10 笔记-CSDN博客

本文链接：https://blog.csdn.net/qq_68113637/article/details/142643206

Chp - 10 对象

1.对象

现实生活中：万物皆对象，对象是一个具体的事物，看得见摸得着的实物。例如，一本书、一辆汽车、一个人可以是“对象”，一个数据库、一张网页、一个与远程服务器的连接也可以是“对象”。

1.什么是对象

在 JavaScript 中，对象是一组无序的相关属性和方法的集合，所有的事物都是对象，例如字符串、数值、数组、函数等。

对象是由属性和方法组成的

属性：事物的特征，在对象中用属性表示（常用名词）
方法：事物的行为，在对象中用方法表示（常用动词）

属性：是自身携带的

方法：必须发出了动作才有。侧重于行为

2.为什么需要对象

保存一个值时，可以使用变量，保存多个值（一组值）时，可以使用数组.如果要保存一个人的完整信息，可以使用对象保存

例如，将"张三疯"的个人信息保存在数组的方式为：

let arr=['张三疯'，'男'，128，'154cm']

js 中的对象表达结构更清晰，更强大。张三疯的个人信息在对象中的表达结构如下：

2.创建对象的三种方式

在 JavaScript 中，现阶段我们可以采用三种方式创建对象（object）：

利用 new Object 创建对象
利用字面量创建对象
利用构造函数创建对象

1.利用new Object创建对象

跟new Array() 原理一致

let 对象名 = new Object();
let arr = new Object();

Object() ：第一个字母大写
new Object() ：需要 new 关键字
使用的格式：对象.属性 = 值;

let person = new Object();
person.name='xue';
person.age=23;
person.gander='男';
person.say=function(){
     console.log('墨染春秋');
}

2.利用字面量创建对象

对象字面量：就是大括号{ } 里面包含了表达这个具体事物(对象)的属性和方法

{ } 里面采取键值对的形式表示

键：相当于属性名

值：相当于属性值，可以是任意类型的值（数字类型，字符串类型，布尔类型，函数类型等）

     //自面量
        // {属性名：值，属性名：值}   最后一项不加逗号
           let catObj = {
            name: "花花", 
            age: 2, 
            catch: function () {
                console.log(this);//catObj
                console.log(this.name + "猫抓老鼠");
              // 对象catObj
            },
             jiao:()=>{
                 console.log(this);//window 
                console.log(this.name+"喵喵叫~~");   
             }
           }
           //增加属性
           catObj.gender="女";
           catObj['123']=456;
        console.log(catObj);
        //修改
         catObj.name="大花";
         console.log(catObj);
         //查  获取
         console.log(catObj.name);
         for(let k in catObj){
            console.log(k,catObj[k]);           
         }
         //调用方法
         catObj.catch();
        //  catObj.jiao();

对象的调用

对象里面的属性调用 : 对象.属性名 ，这个小点 . 就理解为“ 的 ”
对象里面属性的另一种调用方式 : 对象[‘属性名’]，注意方括号里面的属性必须加引号，我们后面会用
对象里面的方法调用：对象.方法名() ，注意这个方法名字后面一定加括号

console.log(star.name)  // 调用名字属性
 console.log(star['name'])   // 调用名字属性
 star.sayHi();   // 调用 sayHi 方法,注意，一定不要忘记带后面的括号

变量、属性、函数、方法总结

变量：单独声明赋值，单独存在
属性：对象里面的变量称为属性，不需要声明，用来描述该对象的特征
函数：单独存在的，通过“函数名()”的方式就可以调用
方法：对象里面的函数称为方法，方法不需要声明，使用“对象.方法名()”的方式就可以调用，方法用来描述该对象的行为和功能。

3.利用构造函数创建对象

构造函数：是一种特殊的函数，主要用来初始化对象，即为对象成员变量赋初始值，它总与 new 运算符一起

使用。我们可以把对象中一些公共的属性和方法抽取出来，然后封装到这个函数里面。

在 js 中，使用构造函数要时要注意以下两点：

构造函数用于创建某一类对象，其首字母要大写
构造函数要和 new 一起使用才有意义

function Person(no,name,age,gander){
            // 第一个no属性   no 值 (形参)
            // 对象上绑定的是属性
            this.no=no;
            this.name=name;
            this.age=age;
            this.gander=gander;
           this.speak=function(num,obj){
                console.log(num);
                console.log(this.name+"和"+obj.name+"在说话~~");
            };
            this.test=function(){
                console.log(this.name+'is testing~~');    
            }
        }
        
        //实例化对象
        let p1=new Person("1001","令",23,"女");
        let p2=new Person("1002","雪",26,"男");

        console.log(p1,p2);
        //Person {no: '1001', name: '令', age: 23, gander: '女', speak: ƒ, …}
        //Person {no: '1002', name: '雪', age: 26, gander: '男', speak: ƒ, …}

        console.log(p1.name,p1.age,p1.gander);  //令 23 女
        console.log(p2.name,p2.age,p2.gander);  //雪 26 男
        //调用方法
        p1.speak(100,p2);  //100  令和雪在说话~~
        p2.test();  //雪is testing~~

        //优点  p1和p2
        console.log(p1 instanceof Object);  //true
        console.log(p1 instanceof Person);  //true

注意：

构造函数约定首字母大写。

函数内的属性和方法前面需要添加 this ，表示当前对象的属性和方法。

构造函数中不需要 return 返回结果。

当我们创建对象的时候，必须用new 来调用构造函数。

3.混合模式创建对象

属性和方法分离

用 prototype 将方法绑定到对象上

function Person(no,name,age,gander){
            // 第一个no属性   no 值 (形参)
            // 对象上绑定的是属性
            this.no=no;
            this.name=name;
            this.age=age;
            this.gander=gander;      
        }
         //方法  绑定到原型上  prototype
            Person.prototype.speak=function(obj){
           console.log(this.name+"和"+obj.name+"在说话~~");
            };
            Person.prototype.test=function(){
                console.log(this.name+'is testing~~');    
            }
        //实例化对象
        let p1=new Person("1001","令",23,"女");
        let p2=new Person("1002","雪",26,"男");

        console.log(p1,p2);
        //Person {no: '1001', name: '令', age: 23, gander: '女', speak: ƒ, …}
        //Person {no: '1002', name: '雪', age: 26, gander: '男', speak: ƒ, …}

        console.log(p1.name,p1.age,p1.gander);  //令 23 女
        console.log(p2.name,p2.age,p2.gander);  //雪 26 男
        //调用方法
        p1.speak(p2);  //  令和雪在说话~~
        p2.test();  //雪is testing~~

4.遍历对象属性

for...in 语句用于对数组或者对象的属性进行循环操作。

其语法如下：

for (变量 in 对象名字) {
// 在此执行代码
}

法中的变量是自定义的，它需要符合命名规范，通常我们会将这个变量写为 k 或者 key

let (var k in obj) {
        console.log(k);// 这里的 k 是属性名
        console.log(obj[k]); // 这里的 obj[k] 是属性值
      }

总结：

对象可以让代码结构更清晰
对象复杂数据类型Object。
本质：对象就是一组无序的相关属性和方法的集合。
构造函数泛指某一大类，比如苹果，不管是红色苹果还是绿色苹果，都统称为苹果。
对象实例特指一个事物，比如这个苹果。
for...in 语句用于对对象的属性进行循环操作(遍历)。

5.继承 ---借助构造函数

构造函数实现继承 ----继承属性（方法）

父构造函数.call(this,实参1，实参2)

原型上继承方法 Person.prototye.方法

父亲原型上的方法

Son.prototype=Object.create(Father.prototype);

n.prototype.constructor=Son;

//父
 function Father(name,age,gander) {
            this.name=name;
            this.age=age;
            this.gander=gander;
        }
        Father.prototype.walk=function(){
            console.log(this.name+'is walking');
        }

        //子
        function  Son(name,age,gander,no) {
           /*  this.name=name;
            this.age=age;
            this.gander=gander; */
            //this 指向了 Son 的实例对象
            Father.call(this,name,age,gander);
            this.no=no;
        }
      /*   Son.prototype.walk=function(){
            console.log(this.name+'is walking!!!!');
        } */
       //父亲原型上的方法
       Son.prototype=Object.create(Father.prototype);
       Son.prototype.constructor=Son;

        Son.prototype.test=function(){
            console.log(this.name+'is testing');
        }
        let son1=new Son('xue',18,"男","1001");
        console.log(son1);
        son1.walk();
        son1.test();

        /* 
        继承 ： --就近原则
          查找属性时 ，先从自身查找，如果有就使用
              如果没有再向继承的父构造函数上找，
              一直向上找，直到找到为止
              找不到，就报错
        */

Chp - 11 JSON

1.什么是JSON

JSON指的是javascript对象表示法（JavaScript Object Notation），JSON格式和js对象对象格式一样，只不过JSON字符串的属性名必须加双引号
JSON是轻量级的文本数据交换格式
JSON 独立于语言：JSON 使用 Javascript语法来描述数据对象，但是 JSON 仍然独立于语言和平台。JSON 解析器和 JSON 库支持许多不同的编程语言。目前非常多的动态（PHP，JSP，.NET）编程语言都支持JSON。
JSON中允许的值:

1)字符串 2）数值 3）布尔 4）null 5）对象 6）对象

函数和undefined不能用
JS中的对象只有JS自己认识，其他语言不认识
JSON就是一个特殊格式的字符串，这个字符串可以被任意语言识别，并可以转换为任意语言
JSON分类：

1）对象

2）数组

2.转换格式方法

在JS中为我们提供了一个工具类，就叫JSON

这个对象可以帮助我们将一个JSON转换为JS对象，也可以将一个JS对象转换为JSON

（1）JSON.parse(参数) 把JSON格式的对象转为 js对象

（2）JSON.stringify(参数) 把js对象转为 JSON格式对象

 console.log(JSON);
        // （1）JSON.parse(参数)     把JSON格式的对象转为 js对象

        let JSONsting='{"name":"Tom","age":18}';    
        console.log(JSONsting);//'{"name":"Tom","age":18}'

        //转为js对象
       let obj=  JSON.parse(JSONsting);
       console.log(obj);//{name: 'Tom', age: 18}
       console.log(obj.name,obj.age);

       //（2）JSON.stringify(参数)   把js对象转为 JSON格式对象
       let obj1={name:"Jack",age:20,gender:"男"};
       console.log(obj1);
       console.log(obj1.name);
      let jsonobj1=   JSON.stringify(obj1);
      console.log(jsonobj1,typeof jsonobj1);
    //'{"name":"Jack","age":20,"gender":"男"}'         
       
       //数组
       let arr=[10,20,"hello",'good'];
       console.log(arr);
       console.log(arr[2]);
       let str= JSON.stringify(arr);
       console.log(str,typeof str);
       let arr1=  JSON.parse(str);
       console.log(arr1,typeof arr1);

Chp - 12 DOM事件

1.事件

事件：三要素

（1）事件源---事件的绑定者（事件的触发者）

（2）事件名称--onclick (click)

(3) 事件处理函数

2.事件的使用

使用事件(添加事件) 有三种方法

（1）传统的模式（加属性）

<button onclick="show()">单击</button>

简单但是不利于团队合作

（2）脚本模型（现代事件）

  dom对象.onclick=函数名;
  dom对象.onclick=function(){}

上面两种方法，同样的事件，在同一个dom对象只能绑定一次，绑定多次不报错，只能最后一个生效

（3） w3c模型（新事件） ---事件监听

同一个按钮绑定同样的事件多次

   dom对象.addEventListener("click",function(){})
   dom对象.addEventListener("click",函数名)

同一个按钮绑定同样的事件多次都生效

//添加事件
<!-- <button onclick="show()">单击</button>
    <script>
        function show(){
             console.log("我被单击了~~~");           
        }
    </script> -->

    <!-- <button id="btn">单击</button>
    <script>
        //查询节点对象
      let btn=  document.querySelector("#btn");
      console.log(btn);//对象
      btn.onclick=function(){
        console.log("我也是被单击了~~~~~~~~"); 
      }
    let show1=  function(){
        console.log("haha~~~~~"); 
      }
      btn.onclick=show1; 
    </script> -->

    <button id="btn">click</button>
    <script>
       let btn= document.querySelector("#btn");
       btn.addEventListener("click",function(){
        console.log("我是高级事件");        
       });
       function show2(){
        console.log("好好学习~~~");      
       }
       btn.addEventListener("click",show2);
    </script>

事件的解绑（移除删除）

脚本模型（现代事件）

   btn.onclick=function(){}  ---  增
   btn.onclick=null ----  删除（解绑）

w3c事件（新事件）

   btn.addEventListener("click",函数名);  ----增
   btn.removeEventListener("click",函数名);  ---删除

//移除事件
<button id="btn1">增加</button> <button id="btn2">移除</button>
    <script>
        //1.查找元素
       let btn1=  document.querySelector("#btn1");
       let btn2=  document.querySelector("#btn2");

    /*   //2.增加事件  ---单击 onclick   经过 onmouseover(onmouseenter)    离开onmouseout(onmouseleave)
        btn1.onmouseover=function(){
          console.log("经过");         
        };
        btn1.onclick=function(){
         console.log("单击~~");  
        }; 
        btn1.onmouseout=function(){
         console.log("离开");       
        }
        //单击btn2 移除  btn1上的单击事件
        btn2.onclick=function(){
         btn1.onclick=null;//移除
        }   */
    </script>

    <script>
      btn1.addEventListener("mouseenter",function(){
        console.log("进入 经过");       
      });
      btn1.addEventListener("click",fn);
      btn1.addEventListener("mouseleave",function(){
        console.log("离开");       
      });
      function fn(){
        console.log("单击");
      }
    //   单击btn2 移除  btn1上的单击事件
    btn2.addEventListener("click",function(){
    btn1.removeEventListener("click",fn);
    })

   <style>
        /* input框获焦后去掉默认的黑框 */
        :focus{
            outline: none;
        }
        #ipt{
              width: 300px;
              height: 40px;
              /* 内填充 */
              padding-left: 10px;
        }
    </style>

<script>  //使<button id="anniu"> 可以被执行
         //当页面加载 完毕

         window.onload=function(){
            console.log("页面加载");
            let anniu1=  document.querySelector("#anniu");
            console.log(anniu1);
               
        }
    </script>

<input type="text" id="ipt" placeholder="请输入用户名">
    <input type="checkbox" id="cbx" >打游戏


    <script>
       let ipt= document.querySelector("#ipt");
        //获焦、失焦
         ipt.onfocus=function(){
            //输入框的边框 设置为红色 粗细是2px 
            this.style.border="2px solid red";
           this.style.color="red";
         }
         ipt.onblur=function(){
            //输入框的边框 设置为绿色 粗细是2px 
            this.style.border="2px solid green";
           this.style.color="green";
         }
        //当发生改变时  onchange     (单选钮  复选框   下拉式列表)
         let cbx= document.querySelector("#cbx");
         console.log(cbx.checked);
          cbx.onchange=function(){
            if(this.checked){
                console.log("已勾选");              
            }else{
                console.log("未勾选");                
            }
          }         
          ipt.onchange=function(){
            console.log(this.value);            
          }
        //当输入时 oninput
         ipt.oninput=function(){
            console.log(this.value);
         }  
      let anniu=  document.querySelector("#anniu");
      console.log(anniu);//   <button id="anniu">
    </script>
    <button id="anniu">按钮</button>

3.事件对象

浏览器会在事件执行时，为我们绑定的事件执行函数传入一个参数，该参数就是事件对象

事件对象的常用属性属性和方法：

currentTarget: 绑定事件的元素

target: 触发事件的元素

type: 事件的类型(不区分大小写)
preventDefault: 取消事件(阻止浏览器默认行为)
stopPropagation: 停止事件冒泡
cancelBubble="true/false"设置或获取当前事件是否要在事件句柄中向上冒泡

阻止浏览器默认行为一般有俩种方法：

在事件处理函数中return false
在事件处理函数中调用事件对象的preventDefault方法

这里我们先看一下a标签的例子。a标签通常具有的行为如下：

跳转页面
锚点定位

阻止a标签的默认行为：

<a href="javascript:;">跳转</a>   //  href="#"

也可以为a标签绑定点击事件，在点击事件中阻止默认行为：

<a  href="for.html" onclick="return test(event)">你好</a>
function test(event){
	return false;
	 //event.preventDefault();
}

<!-- 
       e 或 event 事件对象      
       对象.属性和方法
       属性： 鼠标的在页面位置 clientX  pageX
                             clientY  pageY
              鼠标绑定的元素或者鼠标触发的元素
                this   target
             取消冒泡  cancelBubbe
        方法：
           阻止冒泡 stopPagation()
           阻止默认动作  preventDefault()
    -->
           <div id="box">也许会有人懂得</div>
           <script>
             // 获得鼠标在页面的坐标
             document.onclick=function(e){
                //e或event  事件对象
                console.log(e);
                //可视
               console.log("e.clientX="+e.clientX,"e.clientY="+e.clientY);
                console.log("e.pageX="+e.pageX,"e.pageY="+e.pageY);

   console.log(e.target,this);  // 事件触发者  事件绑定   
             }
           </script>
           <a href="https://www.baidu.com" id="link">百度</a>
           <!-- <a href="javascript:;" id="link">单击</a> -->   
       <form action="./03认识一些常用的事件.html" id="form">
            <button>提交</button>
           </form>
           <script>
            // 1.阻止默认行为   e.preventDEfault()
            // 1.超链接  2. 表单默认提交  3. 右键 菜单 4.默认选中
            let link=document.querySelector("#link");
            link.onclick=function(e){
                e.preventDefault();
            console.log("单击了");
            }
            //2.表单默认提交
            // let form=document.querySelector("#form");
            form.onsubmit=function(e){
                e.preventDefault();
                console.log("阻止了提交");             
            }
            //3. 右键  菜单 
            document.oncontextmenu=function (params) {
                params.preventDefault();
                alert("禁止了 鼠标右键")
            }
            // 4.默认选中
            document.onselectstart=function(e){
                e.preventDefault();
                console.log("阻止了默认选中");                
            }


事件	描述
onclick	用户点击 HTML 元素 (单击)
onmouseover	用户在一个HTML元素上移动鼠标 (进过)
onmouseenter	当鼠标指针移动到元素上时触发(进过)
onmouseout	用户从一个HTML元素上移开鼠标 (离开)
onmouseleave	当鼠标指针移出元素时触发 (离开)
onmousemove	鼠标被移动
onmousedown	鼠标按钮被按下
onmouseup	鼠标按键被松开
onfocus	获取焦点时
onblur	失去焦点时
onchange	HTML 元素改变
onsubmit	表单提交时触发
oninput	元素获取用户输入时触发
onload	浏览器已完成页面的加载(页面加载时)
onkeydown	某个键盘按键被按下
onkeypress	某个键盘按键被按下并松开
onkeyup	某个键盘按键被松开