Js高级资料整理

于 2020-07-30 18:48:54 发布
阅读量426 收藏 2
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Yuake2/article/details/105317570
版权

Js的组成部分

  1. ECMAscript js的语法，变量，数据类型，函数，循环for while do-while 判断if if-else 内置对象…
  2. DOM： Document Object Model —文档对象模型
  3. 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
四个是比较常见的，双击少见一些，其他都是用的非常多

事件三要素

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

JS的书写位置

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

内嵌式：

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

行内式：

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

外链式 ：

  1. 先建立一个JS的文件，例如： publick.js
  2. 链接这个外部的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";
            }
        }

根据其他样式来获取元素

  1. document.geElementById() ------ 通过id获取元素
  2. document.getElementsByTagName – 通过标签获取元素
  3. document.getElementsByName() — 通过name 名称获取元素
  4. document.getElementsByClassName() — 通过类名
  5. document.querySelector("#btn"); — 通过id选择器获取元素
  6. 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

自定义属性的操作

  1. 设置自定义属性：setAttribute(“属性的名称”,“属性的值”)
  2. 获取自定义属性：getAttribute(“属性的名字”)
  3. 移除自定义属性,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(“事件类型”,事件处理函数)

事件解绑

  1. 赋值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);
   };
};

面对对象的组成部分

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

使用 toString() 检测对象类型

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

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

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

  1. 数值型数据（包含整数和小数）number

  2. 字符型数据 string

  3. 布尔型数据类型 blooean (true/false)

  4. 空 null

  5. 未定义 undefined
    复合数据类型（复杂数据类型、引用数据类型）

  6. 对象 Object

  7. 函数 Function

  8. 日期 Date

  9. 正则表达式
    引用数据类型 ： 也叫复合数据类型

对象的语法 ：

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

// 函数
        function fun() {

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

总结 ：

  1. 值类型有一个是特殊null 用typeof检测出来的结果是object类型，其他的类型都是返回子的对应的数据类型
  2. 引用数据类型也有一个特殊的 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)---留给面试官啊，这个就是回顾你的基础呢

知识点 ：

  1. console.log(aa == bb); //true。1
  2. console.log(aa + 10); //NaN not a number 。2
  1. 值类型也叫做简单数据类型和基本数据类型
        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的动态特性点语法

  1. Js的动态特性 ： 就是对这个空对象进行增加、删除、修改查询
  2. 字面量的方式创建一个空对象，跟我们前面学习的字面量创造数组类似
  3. 字面量创建一个空的数组 var arr = []
  4. 字面量的方式创建一个空对象 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 关键字

  1. in关键字:监测对象中是否有该属性，如果有该属性返回true，如果没有返回false
  2. 语法: 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);
        };

工厂模式：

  1. 工厂模式：就解决了代码冗余的问题—就是函数封装
  2. 总结：工厂模式其实就是把内置对象的方式放到函数里面
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

总结 ：

  1. 构造函数名的首字母要求大写

  2. 需要使用new关键字和构造函数一

  3. 在函数中，不需要手动创建对象进行数据封装，会自动创建并封装数据

  4. 在函数最后，不需要手动返回创建好的对象，会自动返回，可以不要自己手动加
    到这里，大家肯定会有疑问，自定义构造函数到底是如何创建并封装对象呢？

  5. 在函数内部默认会创建一个空对象 var obj = new Object();

  6. 默认把创建好的对象赋值给this this = obj;

  7. 通过this添加属性和方法

  8. 默认会把内部创建的对象返回 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个创建对象的方式了
        // 第一、字面量的方式创建对象
        // 第二、内置构造函数的方式创建对象
        // 第三、工厂模式
        // 第四、自定义构造函数方式创建对象------真正的工作里面最最常用的写法

  1. false 的 5 个 特殊值 ： null、“ ”、undefined、false、0
    值类型和引用类型 ↩︎

  2. 我们拿一个未定义去加一个数字结果是NaN ↩︎

YuaKeNG
关注
JS学习资料（自己整理）
12-13
前一阵子准备前端面试，自己整理了一些很基础的js知识。
JS资料
08-05
NULL 博文链接：https://31315474.iteye.com/blog/2048379
js资料整理（更新中）
一梦醉殇
02-26 2076
1、什么是JavaScript？ JavaScript是客户端和服务器端脚本语言，可以插入到HTML页面中，并且是目前较热门的Web开发语言。同时，JavaScript也是面向对象编程语言。2、什么是未声明和未定义的变量？ 未声明的变量是程序中不存在且未声明的变量。如果程序尝试读取未声明变量的值，则会遇到运行时错误。未定义的变量是在程序中声明但尚未给出任何值的变量。如果程序尝试读取未定义变量的值，...
js资料
01-07
js资料.rar
JS学习资料
12-17
网上有人分享经验，说到学习前端开发技术JavaScript很实用的一些书籍，从入门到高级，一一列举，很不错。整理了一下发上来。 名称： JavaScript+DOM编程艺术.pdf 概述： “本书理应奉为经典。文笔清晰,采用了优秀的编程原则，严格遵守相应的标准。真是完美的结合。” ——Slashdot “我要隆重推荐本书。它前所未有地演示了DOM脚本编程的真正潜力。无论你是JavaScript新手还是专家，本书都绝对必读。”——Garrent Dimon,Digital-Web.com 随着Ajax的兴起，JavaScript再一次成为炙手可热的技术。然而，在历史上，它并不是一直这么幸运，由于主流浏览器之间的不兼容，以JavaScript为核心的DHTML曾经昙花一现，很快被人遗忘。 俱往矣，如今的网页设计已经翻开了新的一页。在CSS彻底改变了Web页面布局的方式之后，万维网联盟跨浏览器的DOM标准的制定，使JavaScript终于突破瓶颈，成了大大改善网页用户体验的利器。 本书在简洁明快地讲述JavaScript和DOM的基本知识之后，过几个实例演示了大师级的网页开发技术，并透彻阐述了一些至关重要的JavaScript编程原则和最佳实践，包括预留退路、循序渐进和以用户为中心等。读者可以非常直观地加以领悟，迅速使自己的编程技术更上一层楼。 第1章 JavaScript简史 　1.1　JavaScript的起源 　1.2　浏览器之争 　1.3　制定标准 　1.4　小结 第2章 JavaScript语法 　2.1　准备工作 　2.2　语法 　2.3　语句 　2.4　变量 　2.5　操作 　2.6　条件语句 　2.7　循环语句 　2.8　函数 　2.9　对象 　2.10　小结 第3章 DOM 　3.1　文档:DOM中的“D” 　3.2　对象:DOM中的“O” 　3.3　模型:DOM中的“M” 　3.4　趁热打铁 　3.5　小结 第4章 案例研究:JavaScript美术馆 　4.1　编写标记语言文档 　4.2　编写JavaScript函数 　4.3　JavaScript函数的调用 　4.4　对JavaScript函数进行功能扩展 　4.5　小结 第5章 JavaScript编程原则和良好习惯 　5.1　不要误解JavaScript 　5.2　预留退路 　5.3　向CSS学习 　5.4　分离JavaScript 　5.5　向后兼容性 　5.6　小结 第6章 案例研究:JavaScript美术馆改进版 　6.1　快速回顾 　6.2　解决“预留退路”问题 　6.3　解决“分离JavaScript”问题 　6.4　JavaScript函数的优化:不要做太多的假设 　6.5　DOM Core和HTML-DOM 　6.6　小结 第7章 动态创建HTML内容 　7.1　[removed]()方法 　7.2　innerHTML属性 　7.3　DOM提供的方法 　7.4　重回“JavaScript美术馆” 　7.5　小结 　7.6　下章简介 第8章 充实文档的内容 　8.1 不应该做的事情 　8.2 把“不可见”变成“可见” 　8.3 原始内容 　8.4 XHTML文档 　8.5 CSS 　8.6 JavaScript代码 　8.7 小结 　8.8 下章简介 第9章 CSS-DOM 　9.1 三位一体的网页 　9.2 style属性 　9.3 何时该用DOM脚本去设置样式信息 　9.4 className属性 　9.5 小结 第10章 用JavaScript实现动画效果 　10.1 何为动画 　10.2 实用的动画 　10.3 改进动画效果 　10.4 最后的优化 　10.5 小结 第11章 学以致用:JavaScript网站设计实战 　11.1 案例背景介绍 　11.2 页面视觉效果设计 　11.3 CSS 　11.4 颜色 　11.5 XHTML文档 　11.6 JavaScript脚本 　11.7 小结 　11.8 下章简介 第12章 展望DOM脚本编程技术 　12.1 Web的现状 　12.2 Ajax技术 　12.3 Web应用 　12.4 小结 附录 DOM方法和属性
JS高级学习资料整理（第三月） .docx
06-27
### JS高级学习资料整理（第三月）知识点梳理 #### 一、函数的创建方式 在JavaScript中，函数可以通过以下三种方式进行创建： 1. **命名函数**：这是最常见的一种方式，可以直接通过`function`关键字来定义一个...
javascript高级学习笔记整理
12-04
本文将深入探讨JavaScript的一些高级特性，包括面向对象的实现、数据类型以及复杂类型。 首先，我们来看JavaScript中的面向对象实现。在提供的代码示例中，`Person` 和 `Student` 是两个示例函数，它们作为构造函数...
JavaScript高级整理
08-24
谷粒学院学习笔记，内容包括 原型与原型链、执行上下文、执行上下文栈、变量提升、函数提升、作用域、作用域链、闭包、对象的多种创建模式、对象的继承模式、JavaScript事件循环机制等。
Javascript培训资料整理分享：Javascript入门指南
最新发布
02-19
### JavaScript培训资料整理分享：JavaScript入门指南 #### 一、初识JavaScript ##### 1.1 网页三剑客 网页开发中通常提到的“三剑客”包括HTML、CSS以及JavaScript。 - **HTML (HyperText Markup Language)**: ...
黑马前端学习JS高级md
11-15
这些知识点涵盖了JavaScript高级编程的核心内容，通过黑马前端的JS高级md复习资料，开发者可以系统地学习和巩固这些技能，提升自己的前端开发能力。同时，媒体文件可能包含相关的示例代码或教学视频，为理论知识的...
js 资料
weixin_30405421的博客
08-29 73
http://javascript.ruanyifeng.com/#introduction 2.MDN 火狐中文社区 https://developer.mozilla.org/zh-CN/docs/Web_Development 转载于:https://www.cnblogs.com/icelin/p/3944741.html
js前端面试资料整理（纯理论）
zb_ctrl的博客
09-18 225
js面试资料（纯理论）整理 1、js数据类型 数字、字符串、数组、布尔值、对象、null、undefined 2、js typeof 返回的数据类型 object、number、function、boolean、undefined、string 3、原型对象 每一个javascript对象（null除外）都和另一个对象（原型）关联，每一个对象都从原型继承属性。 原型对象其实...
JS资料1
linyai的专栏
07-30 664
JavaScript 收藏                                      JavaScript 收藏//事件源对象event.srcElement.tagNameevent.srcElement.type//捕获释放event.srcElement.setCapture();  event.srcElement.releaseCapture();  //
JS相关资料
qq_37243112的博客
04-28 164
https://www.runoob.com/jsref/prop-style-top.html 关于js中的对象问题 https://blog.csdn.net/wangzunkuan/article/details/81242631 es5 and es6的区别 es5 es5 国际标准化组织ECMA（European Computer Manufacturers Asso...
JS资料整理
wlpz0528的博客
11-24 257
JavaScript高级技巧整理：事件对象与匿名函数解析
"JavaScript高级程序设计中的方法和个人整理的笔记，涉及事件对象、匿名函数、UTC时间、类型判断、数组定义以及实例与原型的关系" 在JavaScript高级程序设计中，有许多核心概念和技术，以下是一些关键点的详细解释...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值