JS核心概念与实践-优快云博客

本文链接：https://blog.youkuaiyun.com/Yuake2/article/details/105317570

Js的组成部分

ECMAscript js的语法，变量，数据类型，函数，循环for while do-while 判断if if-else 内置对象…
DOM： Document Object Model —文档对象模型
BOM： Browser Object Model—浏览器对象模型

事件开始

//  第一步：函数声明
	function dj(){
            alert("我被点击了");
        }

        function sj(){
            alert("我被双击了");
        }

        function jg(){
            alert("经过了我哦");
        }

        function lk(){
            alert("鼠标离开了我");//最好加个分号结束---规范，严谨
        }

	 <!-- 第二步: 调用函数 -->
	<button οnclick="dj()">你来点我呀</button>
    <button οndblclick="sj()">双击</button>
    <button οnmοuseοver= "jg()">鼠标经过</button>
    <button οnmοuseοut="lk()">鼠标离开</button>

总结：点击事件： onclick
双击事件： ondblclick
鼠标经过：onmouseover
鼠标离开：onmouseout
四个是比较常见的，双击少见一些，其他都是用的非常多

事件三要素

事件源：被触发的对象；
事件：用户的操作比如: 点击 onclick ，鼠标经过 onmouseover , 鼠标离开 onmouseout
事件处理程序：事件触发后要执行的代码（用户要做什么事情）
document — 文档
get ----- 获取
Element ---- 元素
By ---- 通过
id ----具有唯一性

JS的书写位置

JS的书写位置有三个：行内式、内嵌式、外链式注意：外双内单（就是外面是双引号，里面是单引号）推荐用这个，或者外单内双

内嵌式：

 function fun1(){
            alert("我是内嵌式JS");
        }
 <button onclick="fun1()">内嵌式</button>

行内式：

<input type="button" value="行内式" onclick="alert('我是行内式')">

外链式 ：

先建立一个JS的文件，例如： publick.js
链接这个外部的js文件（命名什么都可以）
总结：我们后面做项目我都用外链式，工作里面都用外链式

    <script src="public.js"></script>
 <button onclick="fun2()">外链式JS</button>

如果事件重复使用可以函数封装下次获取元素再也不用写了，直接调用封装好的函数就OK了—这就是函数封装的优势
函数封装的优势:谁需要谁调用

// 我的这个函数就是为了获取元素的----封装了一个获取元素的方法
// 设计一个函数首先考虑两点：第一、有没有参数。第二有没有返回值
function my$(id){//id就是我们的形参---就是变量 my$是我的函数名，你也可以随便起
    return document.getElementById(id);//这个就是会接收我们前面函数调用的实参
}

小案例 ------ 做一个点名册

<button id="btn">点名册</button>
    <script>
        // 总结：其实我们学到random就可以做了。
        var names = ['','','','','','','','','','','','','','','',''];
        // 获取元素
        // var btn = document.getElementById("btn");
        // btn.onclick = function(){
        //     //alert(names[1]);
        //     // 用到就是我们前面学习的Math.random()
        //     var suiji = parseInt(Math.random() * names.length);
        //     alert(names[suiji]);
        // };

根据样式来获取元素

根据类样式来获取元素

<input type="button" value="显示效果" id="btn">
    <p class="cls">这个是第一个p标签</p>
    <p >这个是第二个p标签</p>
    <span class="cls">这个是第一个span标签</span><br />
    <span>这个是第二个p标签</span>
    <div class="cls">这个是第一个div标签</div>
    <div >这个是第二个p标签</div>

//外链式
function my$(id){
    return document.getElementById(id);
}

//需求：点击按钮设置应用具有cls类样式，给有cls这个类的标签改变背景颜色
     my$("btn").onclick = function(){
     // 根据类名获取元素 getElementsByClassName("cls") 注意：cls前面不要加点啊----**h5新增的获取元素的方法**
     var objs = document.getElementsByClassName("cls");//伪数组、集合
     // 循环
       for(var i = 0; i < objs.length; i++){
        objs[i].style.backgroundColor = "red";
            }
        }

根据其他样式来获取元素

document.geElementById() ------ 通过id获取元素
document.getElementsByTagName – 通过标签获取元素
document.getElementsByName() — 通过name 名称获取元素
document.getElementsByClassName() — 通过类名
document.querySelector("#btn"); — 通过id选择器获取元素
document.querySelectorAll(".cls"); — 通过class选择器获取元素

获取焦点事件

onfocus ：获取焦点
onblur ：失去焦点
onfocus 常用于 < input >、< select> 以及 < a>
onblur 常用于表单验证代码（例如用户离开表单字段）。
onfocus 属性不适用于以下元素：< base>、< bdo>、< br>、< head>、< html>、< iframe>、< meta>、< param>、< script>、< style> 或 < title>。

设置文本框的值
console.log(this.value);//获取文本框的值
console.log(this.type);//获取type类型
console.log(this.id);//获取id

innerText 和 innerHTML的区别

我们如果是直接设置纯文本，那么使用innerText和innerHTML是一样的效果；
如果我们设置的内容有标签了，那么他们俩就有区别：
区别：第一、如果是innerText他会把标签当成文本输出
第二、如果是innerHTML他不会把标签当文本输出，直接编译成改标签的实际的意思
总结：没有标签的推荐使用innerText，如果带了标签推荐使用innerHTML
如果是纯文本，推荐使用 innerText
如果是有标签，推荐使用 innerHTML

自定义属性的操作

设置自定义属性：setAttribute(“属性的名称”,“属性的值”)
获取自定义属性：getAttribute(“属性的名字”)
移除自定义属性,removeAttribute(“属性的名字”) — 我们能删除自定义属性也能删除系统自带的属性

节点的介绍

<div id="dv">
        <span>这是div中的第一个span标签</span>
        <p>这是div中的第二个元素,第一个p标签</p>
        <ul id="uu">
          <li>乔峰</li>
          <li>鹿茸</li>
          <li id="three">段誉</li>
          <li>卡卡西</li>
          <li>雏田</li>
        </ul>
      </div>

function my$(id){
    return document.getElementById(id);
}

  var ulObj = my$("uu");
            // ul标签的父级节点 parentNode
            console.log(ulObj.parentNode);//div 以前css叫做父盒子，但是在js里面有专业的名字叫做 父级节点
            // ul标签的父级元素parentElement  div--元素就是标签啊
            console.log(ulObj.parentElement);//div
            // 总结：获取的结果是一样的啊都是div，div是ul的父节点，也是ul的父元素
            
            // 继续扩展
            console.log("==============================");
            
            console.log(ulObj.parentNode.nodeType);//1 div标签节点类型是1
            console.log(ulObj.parentNode.nodeName);//DIV 
            console.log(ulObj.parentNode.nodeValue);//null

          console.log("==========================");
          
            // 注意：获取每个子节点---节点大：包含了文本、元素和属性也就是说页面中所有的内容childNodes子节点
            var dvObj = document.getElementById("dv");
            
            // 获取子节点：节点包含标签、文本（文字、空格、换行、回车）和属性也就是数页面的所有内容
            console.log(dvObj.childNodes);//获取的是子节点

            // 子元素-----3个
            console.log(dvObj.children);//获取的是子元素
            
            
            for(var i = 0; i < dvObj.childNodes.length; i++){
              /*
              第一、nodeType--节点类型：1代表的是标签、2代表的是属性、3代表的是文本;
              第二、nodeName--节点的名字：标签--大写的标签、属性--小写的属性名、文本节点--#text
              第三、nodeValue -- 节点的值： 标签节点--null、属性节点---属性的值、文本节点---文本内容
              回顾了
              */ 
              var node = dvObj.childNodes[i];
              console.log(node.nodeType+ "=======" + node.nodeName + "=====" + node.nodeValue);
              
            }

            // 扩展---以上代码拿到的标签和文本，但是没有拿到属性（我们属性节点用的很少,几乎不用--那么我诶大家扩展防止面试官问到，如果问到你就知道了）

            console.log("=============================");
            var dvObj = document.getElementById("dv");
            var node = dvObj.getAttributeNode("id");
            console.log(node.nodeType+ "===" + node.nodeName + "==" + node.nodeValue); 

            
        /*
         温故而知新
         文档：document
         元素：element---页面中所有的标签都叫做元素，举个例子： p div span等等
         节点：页面中所有的内容都叫做节点--节点是包含元素的（节点包含了：元素就是标签、属性，文本---文本包含： 文字、空格、换行、回车）---叫节点 Node

         总结：节点是包含元素的
         根元素：html

         节点属性（可以用标签点出来的，也可以说用元素点出来的，可以用属性点出来的，可以用文本点出来的）

        
        */

重点来了
第一、nodeType ----节点类型
nodeType:节点类型（
1代表的是标签节点;
2代表的是属性节点;
3代表的是文本节点;
）
第二、nodeName：节点的名字
nodeName:节点的名字（
如果是标签节点–那么获取到的是大写的标签名;
如果是属性节点–那么获取到的是小写的属性名;
如果是文本节点–那么获取到的是 #text;
）
第三、nodeValue：节点的值
nodeValue:节点的值（
如果是标签节点— 获取到的是null;
如果是属性节点— 获取到的是属性的值;
如果是文本节点— 获取到的是文本内容;
）

创建元素的方式
document.write() 打印输出到页面 (面试会问缺点：他会把页面的所有内容覆盖)
document.createElement() 是在对象中创建一个对象，要与appendChild() 或 insertBefore()方法联合使用

事件的三个方法

举例栗子：淘宝首页是很多人做的–模块化开发。一旦有多人协作、合作就会出现一个按钮上面有多个相同事件了。
为了解决这种事情就有另外一个事件 ----
1.事件源.addEventListener(“事件类型”,事件处理函数,flase（flase冒泡/捕获）)
第一个参数:事件类型（注意事件类型不带on）
第二个参数：事件处理函数（匿名函数和命名函数）–我们先学习匿名函数
例子：

my$("btn").addEventListener("click", function() {
            console.log("大家都很棒");

        }, false);

        my$("btn").addEventListener("click", function() {
            console.log("今天这个会被面试啊");

        }, false);

        my$("btn").addEventListener("click", function() {
            console.log("学完这两天，后面是面向对象--接着让你感受逻辑");

        }, false);

2.事件源.attachEvent(“事件类型”,事件处理函数)–为了兼容低版本的 ie 浏览器，谷歌和火狐不用看
第一个参数：事件类型（事件类型带on）
第二个参数：事件处理函数（匿名函数和命名函数）
例子:

 my$("btn").attachEvent("onclick", function() {
            console.log("大家都很棒");
        });

        my$("btn").attachEvent("onclick", function() {
            console.log("大家注意听课");
        });

        my$("btn").attachEvent("onclick", function() {
            console.log("这个也不难，就是单词不一样了而已");
        });

总结：
到此我们学了三种事件（留给面试官啊）
第一个是 onclick 带on的
第二是 addEventListener(“事件类型”,事件处理函数,flase);
第三是 attachEvent(“事件类型”,事件处理函数)

事件解绑

赋值null解绑

<input type="button" value="绑定事件" id="btn1">
    <input type="button" value="解绑事件" id="btn2">
    <script src="publick.js"></script>
    <script>
        my$("btn1").onclick = function() {
            console.log("我是用之前on的方式来绑定的");
        };

        // 总结：一句话用什么事件绑定就用什么事件解绑
        my$("btn2").onclick = function() {
            my$("btn1").onclick = null; //这个就表示解绑了（注意：这个只能解绑on事件）--执行这行代码之后，再点击绑定事件就不起作用了
        }

2.removeEventListener 解绑

 // 第二、事件源.addEventListener("没有on的实际类型",命名函数,false);
        // my$("btn1").addEventListener("click", function() {
        //     console.log("大家下午好");

        // }, false);
        // my$("btn1").addEventListener("click", function() {
        //     console.log("跟着我");

        // }, false); 一环扣一环

        function f1() {
            console.log("大家下午好");
        }

        function f2() {
            console.log("跟着我");
        }

        // 现在就保证两个函数都有名字了,点击btn1执行两句话
        my$("btn1").addEventListener("click", f1, false);
        my$("btn1").addEventListener("click", f2, false);

        my$("btn2").onclick = function() {
                my$("btn1").removeEventListener("click", f1, false);
            }
            // 点击第二个按钮来解绑
            // my$("btn2").onclick = function() {
            //     my$("btn1").removeEventListener("click", function() {
            //         console.log('大家下午好');
            //         //  大白话解释：两个匿名函数不是同一个函数，就像我们人一样，如果你面向站两个没有名字的两个人，他俩是一个人吗？一定不是同一个
        //     }, false);
        // }

3.detachEvent解绑

/*
      第三种绑定事件和解绑
      事件源.attachEvent("on事件类型",命名函数)；----绑定
       事件源.detachEvent("on事件类型",命名函数)；----解绑
                */
        function f1() {
            console.log("我是第一件事情");

        }

        function f2() {
            console.log("我是第二件事情");

        }
        my$("btn1").attachEvent("onclick", f1);
        my$("btn1").attachEvent("onclick", f2);
        //  开始解绑
        my$("btn2").onclick = function() {
            my$("btn1").detachEvent("onclick", f1);
        }

        /*
        总结：这个只有在IE8浏览器才可以预览的，不要在谷歌和火狐下预览，现在了解即可*/

总体总结 ：
移除事件的三种方式小结如下：
1、onclick：让按钮的事件处理函数只能执行一次，οnclick=null ；
2、removeEventListener：如果想要移除事件，注册事件的时候就不能使用匿名函数；
3、detachEvent：谷歌中不支持，IE9-IE11中支持，了解即可；

事件冒泡

事件冒泡的核心思想：事件冒泡一定是盒子套盒子，盒子具有嵌套关系，如果丢里面的盒子做了点击事件，外面的盒子身上也有点击事件，那么外面的盒子就会触发 — 这个现象就算典型的事件冒泡
总结：我们点击了一个盒子，另外的盒子就把冒泡触发了，因为我们的冒泡是从内往外（也有人说是从里往外面）

 <style>
        #dv1 {
            width: 300px;
            height: 200px;
            background-color: pink;
        }
        
        #dv2 { 
            width: 250px;
            height: 150px;
            background-color: green;
        }
        
        #dv3 {
            width: 200px;
            height: 100px;
            background-color: yellowgreen;
        }
    </style>
</head>

<body>
    <div id="dv1">
        <div id="dv2">
            <div id="dv3"></div>
        </div>
    </div>

<script src="publick.js"></script>
function my$(id){
    return document.getElementById(id);
}

my$("dv1").onclick = function() {
            console.log(this.id);
        };

        my$("dv2").onclick = function() {
            console.log(this.id);
        };

        my$("dv3").onclick = function() {
            console.log(this.id);
        };

在这里插入图片描述

在这里插入图片描述
同理的既然能发生冒泡，那就能阻止冒泡，而如何阻止冒泡呢？是值得我们去思考的 —————— 在不想被冒泡的事件里加上 event /e 和e.stopPropagation() / window.event.cancelBubble = true;看下列解析

 my$("dv1").onclick = function() {
            console.log(this.id);
        };

        my$("dv2").onclick = function(e) {
            console.log(this.id);
            e.stopPropagation(); //谁需要阻止事件冒泡就给谁加这个是谷歌浏览器的
        };

        my$("dv3").onclick = function(e) { //event 默认值--可以简写e
            console.log(this.id);
            //console.log(arguments.length); //检测函数在调用的时候里面有没有参数
            //console.log(e); //默认的事件对象
            e.stopPropagation(); //这个是谷歌浏览器的
            window.event.cancelBubble = true; //专为给ie浏览器用的，火狐不支持
        };

事件捕获

在JavaScript中，事件有以下三个阶段
第一阶段：捕获阶段 1
第二阶段：目标阶段（执行当前点击的元素） 2
第三阶段：冒泡阶段 3
在这里插入图片描述
事件捕获是从外到内的过程 / 事件冒泡是从里到外
注册事件有三种，其中onclick、attachEvent没有第三个参数（监听器： addEventListener(‘onclick’,function(){},false/true --------- ture 即为捕获，反之true为冒泡)），实际上我们无法通过onclick、attachEvent来干预事件的第一阶段和第二阶段, 因为onclick、attachEvent都只有两个参数, 而且onclick、attachEvent注册的事件默认是冒泡阶段。很多时候我们只关心事件的第三阶段，即冒泡阶段。

事件委托

事件委托也叫做(事件代理)就这两个，如果面试官问到我们都要知道
大白话故事：就是自己的事不想干，叫它爸爸，甚至爷爷、甚至祖先来干
在事件冒泡中，怎么获取被点击的元素？我们可以利用事件冒泡的特点：当子元素的事件发生时，父元素的同名事件也会发生。
利用事件冒泡的特点：当点击子元素时，父元素的同名事件也会发生。
知识点：
1、事件委托：原理就是事件冒泡。此处的事件委托是，当li被点击时，li并没有做事件处理，而是委托ul做了事件处理，ul事件中可以使用事件对象e获取target属性，完成事件处理。
2、事件对象（事件处理函数的参数e）
请看下面代码解析：

<ul id="ul">
        <li>西施</li>
        <li>貂蝉</li>
        <li>昭君</li>
        <li>凤姐</li>
        <li>芙蓉姐姐</li>
        <li>贾玲</li>
    </ul>

 <script src="publick.js"></script>
 function my$(id){
    return document.getElementById(id);
}

 // 事件委托其实就是事件冒泡的应用--大白话解释，事件冒泡有bug但是也有用处，用处就是用在事件委托上---通过冒泡的原理来实现的
        my$("ul").onclick = function(e) {
            // console.log(this);
            // 我虽然委托给了ul，但是我真正的目标是li，通过e.target拿到我们真正的目标li
            //console.log(e.target);
            var target = e.target;
            target.style.backgroundColor = "pink";

        }

小结：知识点：事件委托，事件对象；
事件处理函数在事件发生时，由系统去调用，系统在调用事件处理函数时，会传入事件对象，所以我们可以直接使用事件对象。

事件三阶段

事件的三个阶段：
第一个阶段叫做事件捕获：用数字代表就是1（如果你看到了数字是1就代表事件捕获）—从外往里
第二个阶段叫做目标阶段：用数字代表就是2（如果你看到了数字是2就代表是目标阶段）—执行当前的点击的元素
第三个阶段叫做冒泡：用数字代表就是 3（如果你看到了数字3就是冒泡了）–从里往外

最大的匿名函数（Window.onload）

window.onload = function () {
var btn = document.getElementById("btn");
      btn.onclick = function () {
         alert("哈哈");
 		}
}

定时器 / 计时器

定时器（setInterval）

//setInterval定时器
/*
* 参数1、函数
* 参数2、时间---单位毫秒---1000毫秒--1秒
* 执行过程:页面加载完毕后，过了1秒，执行一次函数代码，有过了1秒再执行函数...
* 返回值就是定时的id
*/
var timeId = setInterval(function () {
    alert("哈哈");
},2000);

//点击按钮清除定时器
var btn = document.getElementById("btn");
btn.onclick = function () {
   //参数:要清理的定时器id的值
   window.clearInterval(timeId);
}

定时器之setTimeout（掌握）

<input type="button" value="停下" id="btn"/>

/*
* 参数1:函数
* 参数2:时间---1000毫秒---1秒
* 返回值:该定时器的id
*/
//页面加载后
window.onload=function () {
    //一次性的定时器
   var timeId=window.setTimeout(function () {
       alert("您好");
   },1000);

   //点击这个按钮,停止这个一次性的定时器
   var btn = document.getElementById("btn");
   btn.onclick=function () {
      clearTimeout(timeId);
   };
};

面对对象的组成部分

ECMAScript : js语法，变量，运算符，循环，函数封装，数组，内置对象等
Dom Document Object Mode 文档对象模型
Bom Browser Object Model 流浪器对象模型例子： window 只要是带window的都是浏览器对象模型

使用 toString() 检测对象类型

可以通过 toString() 来获取每个对象的类型。为了每个对象都能通过Object.prototype.toString() 来检测，需要以 Function.prototype.call() 或者 Function.prototype.apply() 的形式来调用，传递要检查的对象作为第一个参数，称为 thisArg。

JS的数据类型：基本数据类型和复合数据类型

基本数据类型（简单数据类型和值类型） ----- 面试会问

数值型数据（包含整数和小数）number
字符型数据 string
布尔型数据类型 blooean (true/false)
空 null
未定义 undefined
复合数据类型（复杂数据类型、引用数据类型）
对象 Object
函数 Function
日期 Date
正则表达式
引用数据类型：也叫复合数据类型

对象的语法：

 var obj = {
           键1:值1,
           键2:值2,
           键3:值3,
           键4:值4,
           键5:值5
       }

// 函数
        function fun() {

        }
        console.log(typeof fun); //函数就是上帝，造万物

总结：

值类型有一个是特殊null 用typeof检测出来的结果是object类型，其他的类型都是返回子的对应的数据类型
引用数据类型也有一个特殊的 function 他用typeof 来检测返回的是function，其他都是返回object
NULL 和 Undefined区别
定义变量 var timer = null; 我们要给面试官讲解应用场景用在轮播图，先去定义一个变量赋值为空
大白话：
null 一开始没有，以后会有（赋值的时候）
undefined ：一开始没有以后也没有

 // null 空和undefined的区别
        var aa;
        var bb = null;
        console.log(aa == bb); //true 进行隐士转换了

        console.log(aa + 10); //NaN not a number (我们拿一个未定义去加一个数字结果是NaN)---留给面试官啊，这个就是回顾你的基础呢

知识点：

console.log(aa == bb); //true。¹
console.log(aa + 10); //NaN not a number 。²

值类型也叫做简单数据类型和基本数据类型

        var str1 = "lw";
        var str2 = str1;
        console.log(str1);
        console.log(str2);

传递的就是数据，所以我们叫做传值。
2. 引用类型也叫做复合数据类型，或者叫做复杂数据类型

		 var obj1 = {
            name: "zs",
            age: 18,
            sex: 1
        };
		 var obj2 = obj1; //传递的是地址---传址
 		// 对象里面可以通过点语法来访问数据
        console.log(obj1.name);
        console.log(obj2.name);
        // 修改 点语法,修改了其中一个另外一个也被修改了。因为他们俩共享一个地址
        console.log("=======================");
        obj2.name = "ls";
        console.log(obj1.name);
        console.log(obj2.name);

引用类型也可以当作参数来传递的

 var obj = {
            name: "zs",
            age: 18
        };
         function fun2(obj) {
            obj.name = "lw";
            console.log(obj.name);
        }
        fun2(obj); // lw
        console.log(obj.name); // lw

** 总结：引用数据类型传递的是地址，修改其中一个另外一个也会被修改**

JS的动态特性点语法

Js的动态特性：就是对这个空对象进行增加、删除、修改查询
字面量的方式创建一个空对象，跟我们前面学习的字面量创造数组类似
字面量创建一个空的数组 var arr = []
字面量的方式创建一个空对象 var obj = {}

var obj = { //字面量方式创建对象

        };
 // 第一种：通过点语法来进行添加属性和方法
 obj.name = "zs"; //添加的是属性
  obj.age = 18; //添加的是属性
  	obj.say = function() {
            console.log("大家都很棒啊");
        };
   //  obj["say"] = function() {
   // console.log("大家都很棒啊");
      //  访问对象上的属性和方法，也就是查询
        console.log(obj["name"]);
        console.log(obj["age"]);
        console.log(obj.name);
		console.log(obj.age)
        //访问方法
        obj.say();
// 修改 点语法来修改 
        obj.name = "lw";
         //总结规律：有则改，无则加（如果有这个属性就是修改，如果没有这个属性就是添加）
         // obj["name"] = "lw";
        console.log(obj.name);

        // 最后一个删除
        // 删除 delete obj.name 就是删除对象里面这个name属性，如果删除成功返回是true，如果删除失败返回是false
        console.log(delete obj.name);
        console.log(delete obj["name"]);

IN 关键字

in关键字:监测对象中是否有该属性，如果有该属性返回true，如果没有返回false
语法: key in obj 注意：key 一般都要加双引号的

var obj = {
            name: "zs",
            age: 18,
            sex: 1
        };
        console.log("name" in obj); //true
        console.log("num" in obj); //false
         // 换个思路
        var a = "name";
        console.log(a in obj); //true

in的第二大功能

//  in第二大功能：可以遍历循环、迭代、枚举都是循环--跟数组类似的
        for (var key in obj) {
            console.log(key, obj[key]); //其实很好用 for in 循环像数组arr[i] 
        }

// 如何判断一个数组中存在指定的元素
        var arr = ["A", "B", "C"];
        // 第一种方法
        for (var key in arr) {
            // 判断
            if (arr[key] == "B") {
                console.log("存在");
            }
        }
        // 第二种方法：indexOf 
        if (arr.indexOf("B") != -1) { // != -1 表示存在
            console.log("存在");
        }
        // indexOf 检测数组中的元素是否存在，如果存在返回该元素对应的索引值，如果不存在返回 -1

delete关键字

delete 不能删除使用var声明的变量

        var demo = "demo";
        console.log(delete demo); //false

可以删除直接定义在window上的属性

window.demo1 = "demo1";
        console.log(delete window.demo1);

break/continue

break：当程序遇到break之后,跳出整个循环，结束循环，执行循环下面的代码（直接结束）
continue:当程序遇到continue之后，跳出当前循环，就是结束本次循环，继续下一次循环（反复）
break：

        for (var i = 0; i < 10; i++) {
            // 判断
            if (i == 5) {
                break;
            }
            console.log(i);

        }

continue:

for (var i = 0; i < 10; i++) {
            // 判断
            if (i == 5) {
                continue;
            }
            console.log(i);

        }

异常捕获

异常捕获：我们真正的项目是这样的，当某一块代码出现错误的时候(bug),不要停止后面代码的运行,跳过这个错误，或者说这个bug，继续执行后面的代码，当我们完成了这个项目之后再回头来找这个bug，错误信息

var a = 123;
        try {
            console.log(a); //可能会出现错误的代码放进来
            console.log(b); //这两行可能会出错
        } catch (e) {
            //  自己手动抛出的一个错误信息
            //throw "这是一个错误信息,小心检测一下你的代码有没有错误，看try里面的代码有没有bug"; //手动抛出错误之后，后面的就不会执行那个了啊

            //throw "这是一个错误信息,小心检测一下你的代码有没有错误，看try里面的代码有没有bug" + e; //e 手动 + 系统自带的错误信息

            throw { //真正的工作里面抛出一个对象
                errorMsg: e, //错误信息
                errorCode: 10001 //这个是错误编码，这个编码是后台程序员给我们写好的手册，提供我们去查询的
            }

        } finally {
            console.log("我不管前面的代码有没有错误，都会执行这里面的代码块");

        }

        function fun() {
            console.log("我还是要继续往下执行的代码哦");
        }
        fun(); //调用这个函数

创建对象

字面量创建对象

 var person = { //字面量的方式创建对象
            name: "zs", //属性
            age: 18, //属性
            sex: 1, //属性
            say: function() { //方法
                console.log("大家好好学习，都要高薪就业。");

            },
            play: function() { //方法
                console.log("我也是方法，我们如果累了是可以休息一下");
            }

        };
  // 访问对象的属性和方法
        console.log(person.name);
        console.log(person.age);
        person.say();
        person.play();

内置构造函数的方式创建对象：

 var stu1 = new Object(); //系统自带的，像我们之前学习的 var dt = new Date()
        stu1.name = "zs";
        stu1.age = 12;
        stu1.sex = 1;
        stu1.num = 10001;
        stu1.sayHi = function() {
            console.log("姓名:" + this.name + "学号:" + this.num);
        };

工厂模式：

工厂模式：就解决了代码冗余的问题—就是函数封装
总结：工厂模式其实就是把内置对象的方式放到函数里面

function createStudent(name, age, num) { //就是一个函数有参数有返回值
            var stu1 = new Object();
            stu1.name = name;
            stu1.age = age;
            stu1.num = num;
            stu1.sayHi = function() {
                console.log("姓名:" + this.name + "学号:" + this.num);
            };
            return stu1;
        }

        // 调用函数
        var per1 = createStudent("zs", 18, 10001);
        console.log(per1);
        // 工厂模式最大优点就是代码优化了，谁需要谁调用
        var per2 = createStudent("lw", 98, 10002);
        console.log(per2);

        var per3 = createStudent("ls", 20, 10003);
        console.log(per3);

        // 其实工厂模式已经很好，很多人还在用呢，但是他也有问题的--引出问题来
        console.log(per1 instanceof createPerson); //true按照我们的思路就应该是true,但是找不到父类，是一个false

自定义构造函数：

function Person(name, age, sex) { //自定义构造函数，告诉你一个工作经验，函数名首字母大写都是自定义构造函数
            this.name = name; //属性
            this.age = age; //属性
            this.sex = sex; //属性
            this.sayHi = function() { //方法
                console.log("姓名:" + this.name + "学号:" + this.age);
            }
        }

        // 实例化对象（没有对象new 一下）现在开始就有对象了
        var per1 = new Person("zs", 18, 1);
        console.log(per1);

        // 自定义的构造函数的方式常见对象(程序员之间的约定，函数名首字母大写就是自定义构造函数)
        function Dog(name, age, sex) {
            //  通过this添加属性和方法
            this.name = name; //属性
            this.age = age; //属性
            this.sex = sex; //属性
            this.sayHi = function() { //方法
                console.log("姓名:" + this.name + "学号:" + this.age);
            }

        }
          // 实例化对象
        var dog1 = new Dog("wc", 3, 1);
        console.log(dog1);

        console.log(per1 instanceof Person); //true
        console.log(dog1 instanceof Dog); //true

总结：

构造函数名的首字母要求大写
需要使用new关键字和构造函数一
在函数中，不需要手动创建对象进行数据封装，会自动创建并封装数据
在函数最后，不需要手动返回创建好的对象，会自动返回，可以不要自己手动加
到这里，大家肯定会有疑问，自定义构造函数到底是如何创建并封装对象呢？
在函数内部默认会创建一个空对象 var obj = new Object();
默认把创建好的对象赋值给this this = obj;
通过this添加属性和方法
默认会把内部创建的对象返回 return this;
面试题：

// 自定义构造函数的返回值的问题----注意这个是面试题
        // 第一、我们是可以修改返回值的分两种情况
        //   1) 如果修改的是值类型，修改无效
        //   2) 如果修改的是引用数据类型，修改有效

        // 自定义构造函数
        // function Person(name, age) {
        //     this.name = name;
        //     this.age = age;
        //     // 修改返回值
        //     return 99999; //值类型
        // }
        // //实例化对象
        // var per = new Person("zs", 18);
        // console.log(per);


        function Person(name, age) {
            this.name = name;
            this.age = age;
            // 修改返回值
            return []; //引用数据类型
        }
        //实例化对象
        var per = new Person("zs", 18);
        console.log(per);
    </script>

DOM的操作

创建添加删除节点

  // 需求1：创建一个div标签，并设置边框，背景色，文本及字体颜色、添加到页面中
        var oDiv = document.createElement("div");
        oDiv.innerText = "测试div的内容";
        oDiv.style.backgroundColor = "pink";
        oDiv.style.width = "200px";
        oDiv.style.height = "200px";
        oDiv.style.border = "1px solid #000";

        // 添加到body中页面中
        document.body.appendChild(oDiv);

        //获取到这个div
        var div1 = document.getElementsByTagName("div")[0];
        console.log(div1);
        //  删除
        //document.body.removeChild(oDiv);

函数作为返回值：

// 函数很强大，如果函数作为参数来使用-----我们叫回调函数，callback
        // 如果函数作为返回值来使用-----高阶函数
        function fun1() {
            console.log("我是第一个函数");
            return function() {
                console.log("我是一个函数，此时我是作为返回值来使用的");
            }

        }
        var result = fun1();
        //console.log(result); //小写被面试官问到啊，都是基础课的知识啊
        //console.log(result()); //小写被面试官问到啊，都是基础课的知识啊
        result(); //你会忘，我就多提问，这样对你学习会好很多啊。

        // 总结：
        // 如果函数作为参数来使用-----我们叫回调函数
        // 如果函数作为返回值来使用-----高阶函数
        // 总结：已经学过了4个创建对象的方式了
        // 第一、字面量的方式创建对象
        // 第二、内置构造函数的方式创建对象
        // 第三、工厂模式
        // 第四、自定义构造函数方式创建对象------真正的工作里面最最常用的写法