关于javascript:javascript入门二

九、对象

对象是一种数据的汇合，数据格式为 键值对。

9.1 初始化

9.1.1 字面量

对象字面量以 ”{}” 作为边界，由多个键值对组成，键与值通过 ”:” 隔开，键值对之间通过 ”,” 隔开

var    obj = {name:"terry",age:12,gender:"male"};

9.1.2 构造函数模式

• 应用零碎内置的对象构造函数 Object()

  var obj = new Object();             // 等价于 var obj = {}

  obj 是对象实例，构造函数是创建对象实例时应用的模板

• 应用自定义的对象构造函数, 例 Student()

  var stu = new Student();

9.2 属性拜访

（用于读写）

9.2.1 点拜访

对象. 属性

var    obj = {name:"terry",age:12,gender:"male"};
var name = obj.name;
obj.name = 'terry';

9.2.2 中括号拜访

对象[变量]

var name = 'age';
obj[name];

9.3 属性遍历

打印出某个对象中所有的属性

for(var key in obj){}

顺次从 obj 中获取 属性名 赋值给 key，通过 obj[key] 拜访属性值 (属性名若为变量，则必须通过中括号形式拜访变量值)

9.4 对象序列化

• 什么叫序列化

  将对象转换成字符串

• 为什么要做序列化

  不便网络传输（http/tcp/ip 协定中不容许传输对象，只容许传输字符串和字节流），解决对象在 io 中传递的问题。

9.4.1 惯例转换

var obj = {name:'user'}
obj.toString()            //'[object Object]'

9.4.2 转换为 json 字符串

var obj = {name:'user'}
JSON.stringify(obj)            //'{"name":"user"}'

9.4.3 转换为查问字符串

var qs = require('querystring')
qs.stringify(obj)

9.5 Object()

所有构造函数的父构造函数，所有的构造函数都间接间接的继承 Object。所有的实例对象都能够调用其构造函数及其父构造函数的 原型 中的办法：

Object.prototype.constructor()                        // 输入创立该对象时应用的构造函数
Object.prototype.toString()                            // 默认状况下输入[object object]
Object.prototype.valueOf()
Object.prototype.hasOwnProperty()                    // 判断某一个属性是不是属于以后对象
Object.prototype.isPrototypeOf()                    // 指定的对象是否在本对象的原型链中
Object.prototype.propertyIsEnumerable()                // 指定的属性是否可枚举
Object.prototype.toSource()

obj 的构造函数是 Object, 所以 obj 能够调用 Object.prototype 的办法

​ var obj = {}
​ obj.toString();

arr 的构造函数是 Array,Array 继承 Object, 因而，arr 能够调用 Array.prototype 及 Object.prototype 中的办法

​ var arr = new Array(3);
​ arr.toString();

9.6 删除属性

delete 对象. 属性

​ 比照 java 对象，js 对象有哪些非凡的中央

   1. js 对象的属性能够被删除，java 对象属性是固定的
   2. js 对象的属性能够随便增加，java 对象属性是固定的
   3. js 对象能够通过字面量及构造函数来获取，java 对象只能通过类构建

//student 有且只能有两个属性
class Student{
    private String name;
    private Integer age;
    public void setName(String name){this.name = name;}
    public String getName(){return this.name;}
}
Student student = new Student();

9.7 自定义属性

var obj = {name:"terry"    //name 是能够迭代的，是可读可写}                                

假如：

1. name 是不能够迭代的
2. name 是不可写的
3. name 是不能够被删除

4. 当对象属性的值发生变化的时候，我想晓得？

   var obj = {
       _name:"alxe",
       age:0
   };
   Object.defineProperty(obj,"name",{
       configurable:true,
       writable:true,
       //enumerable:true;            应用 set、get 时不设置 enumerable、value
       //value:"terry",
       set:function(v){
           this._name = v;
           console.log("名字被批改");
       },
       get:function(){return this._name;}
   })
   obj.name = "terry";
   console.log(obj.name);

5. 当 name、age、gender 属性发生变化的时候，都想检测到.

   Object.defineProperties(obj,{name:{},
       gender:{}})

十、数组

数组是由若干个元素组成，元素能够是任意的数据类型。通过索引（从 0 开始）拜访元素，数组的长度通过 length 属性获取。

10.1 初始化

10.1.1 字面量

var arr = [8,1,20,3,2,9]

10.1.2 构造函数模式

var arr = new Array();            // var arr = [];
var arr = new Array(5);            // var arr = [,,,,];
arr[0] = "terry"
arr[1] = "larry"                //["terry","larry"]

//es6 呈现
Array.of(2);                    //[2]
Array.of(2,3)                    //[2,3]

10.2 拜访

console.log(arr[0]);
console.log(arr[100]);            // undefined

10.3 length 属性

length 可读可写，能够通过扭转数组的长度来删除数组元素
arr.length

10.4 数组遍历

• for
• while
• do-while
• for-in

10.5 数组 api

api –> 应用程序编程接口 - 应用他人编写的代码

关注函数扭转的是否是原数组自身

10.5.1 Array.*

• Array.isArray()
  判断一个变量是否是数组（不能应用 typeof，返回的是‘object’）
• Array.from();（es6）
  将一个可迭代的对象转换为数组
• Array.of();（es6）r
  将参数中的值作为数组的元素

10.5.2 Array.prototype.*

• 遍历相干的办法

  这些办法有个共同点，都须要传递一个回调函数作为参数，回调函数都有三个形参，别离为 item,index,arr（可省略 index/arr）

  • Array.prototype.forEach()

    遍历数组对象

    ​ 参数: 回调函数

    ​ 返回值:undefined

    // 模拟 forEach 写一个 myForeach，其成果与 forEach 完全相同
    var arr = ["terry","larry","tom"];
    arr.forEach(function(item){console.log(item);
    });
    //myForeach()
    Array.prototype.myForEach = function(handler){                    //handler 为一个回调函数
        for(var i=0;i<this.length;i++){var item = this[i];
            handler.call(this,item,i)
        }
    }                                                            
    arr.myForeach((item,index)=>{console.log(item,index)
    })

  • Array.prototype.every()

    元素是否都满足同一个条件

    ​ 参数：回调函数须要返回 boolean

    ​ 返回值：boolean

  • Array.prototype.some()

    是否有元素满足同一个条件

    ​ 参数：回调函数须要返回 boolean

    ​ 返回值：boolean

  • Array.prototype.filter()

    返回回调函数返回 true 的元素的汇合

    ​ 参数：回调函数须要返回 boolean

    ​ 返回值：数组

  • Array.prototype.map()

    返回回调函数返回值组成的数组

    ​ 参数：回调函数，肯定要返回值

    ​ 返回值：数组

• 栈、队列相干办法

  • Array.prototype.push()

    向数组的开端追加指定值

    ​ 参数：任意值

    ​ 返回值：数组长度

  • Array.prototype.pop()

    删除并返回栈顶元素

    ​ 参数：无

    ​ 返回值：删除的栈顶元素

  • Array.prototype.shift();

    出队列

    ​ 参数：无

    ​ 返回值：删除的队列首部元素

  • Array.prototype.unshift();

    将指定元素插入到队列的首部

    ​ 参数：任意值

    ​ 返回值：插入后数组的长度

• 排序相干

  • Array.prototype.reverse();

    原值产生扭转；

  • Array.prototype.sort();

    原值产生扭转；

    默认 将数组元素转换为 字符串，而后进行排序

    sort 容许接管一个比拟器函数作为参数，比拟器函数承受两个参数，

    如果 a > b，返回 1，升序；如果 a > b，返回 -1，降序

    arr.sort(function(a,b){if(a>b){return 1;}else{return -1}
    })

    // 提供一个函数，承受属性作为参数，要求依照 name/age/grade 进行排序
    var arr = [{name:"terry",age:19,grade:98},{name:"larry",age:12,grade:94},{name:"tom",age:15,grade:91}]
    function sort(array,property){array.sort((function(prop){return function(a,b){if(a[prop] > b[prop]){return 1;} else {return -1;}
        }
        })(property))
    }
    sort(arr,'age')

​ 闭包：函数外部嵌套函数，外部函数领有内部函数的变量，外部函数与内部函数的这个变量就组成了闭包。

• 截取

  • slice(begin,end)（原值不扭转）

    [1,2,3,4].slice(1);            //[2,3,4]
    [1,2,3,4].slice(1,3);        // 数组个数为 3 -1

  • splice(begin,num,x,x,…)（原值扭转）（性能更弱小）

    begin: 开始地位，num: 删除的元素个数，x,x,x: 插入的元素

    返回删除的元素组成的数组

    [1,2,3,4,5].splice(2,2)        //[3,4]
    [1,2,3,4,5,6].splice(3,0,2,2,2)            // 运行后的数组后果：[1,2,3,2,2,2,4,5,6]

10.6 克隆数组

• 蛮力法

• var arr0 = JSON.parse(JSON.stringify(arr))

• var arr1 = arr.slice(0)

• var arr2 = [...arr]

  拓展运算符（es6）

• lodash(es6 拓展库)

十一、函数

函数也是对象，是一个援用数据类型。

11.1 分类

不论是一般函数还是构造函数，实质是齐全一样的，只不过为了辨别它们，咱们将构造函数的函数名大写

• 一般函数（办法）
• 构造函数（类）

11.2 函数定义

11.2.1 函数申明

函数申明与 var 申明变量相似，都会有 变量的晋升。容许在函数申明前调用函数

let result = add(1,2);        // 能够执行
function add(a, b){return a + b;}

11.2.2 函数表达式

相似于一般的赋值表达式，变量会晋升，然而函数初始化不会被晋升。

add();                        // 报错！var add = function(a,b){return a + b;}

11.3 函数调用

• 函数名(实参列表);
  add(1,2)
• 函数名.call(this, 实参列表)
  add.call(this,1,2)
• 函数名.apply(this, 实参数组)
  add.apply(this,[1,2])

11.4 函数外部属性

只有在函数的执行过程中，外部属性能力被确定

兜底对象（全局）

浏览器：window
nodeJs：global

• arguments
  保留函数的 所有实参 ，是一个 类数组对象。
  arguments.callee 指向以后函数，罕用于递归函数。然而在严格模式 ’use strict’ 下无奈应用

  var foo = function(a,b){console.log(arguments)        //{'0':1,'1':2,'2':3}
  }
  foo(1,2,3)

  // 求阶乘
  function foo(num){if(num==1){return 1;}else{return arguments.callee(num-1)*num            // 更换函数名字时，不必思考函数外部的名字更换
      }
  }

• this
  以后的执行环境对象
  与函数的调用形式无关
  如果应用 ”()” 调用函数，查看 ”()” 是否是函数名，如果是，查看函数名前有没有点 ”.”，没有点 ”.”this 指向全局对象。有 ”.”this 指向点后面的那个对象。

  function test(){function bar(){console.log(this)
      }
         bar();}
  test();                //this-->global, 因为调用 bar()时，后面没有 '.'

11.5 箭头函数（ES6）

var foo = function(a,b){return a+b;}

var foo = (a,b)=>{
    return a+b;
    //a+b; 若大括号内只有一条语句，且该语句为返回值语句，那么 {} 也可省略}                        // 箭头函数

箭头函数个别用于回调函数，是回调函数的简写。
箭头函数中的 this 指向蕴含它的 内部函数的 this，所以箭头函数个别放在内部函数外面，若箭头函数外没有内部函数，则 this 为{}。

function foo(){["terry","larry"].forEach((item)=>{console.log(this,item);
    })
}

foo();                             //global
foo.call({})                    //{}
foo.call({name:"terry"})        //{name:"terry"}

new Vue({
    el:"#app",
    data:{students:[]
        student{}},
    methods:{
        // 加载学生信息
        loadStudents(){
            // this 指向 vue 对象
            $.get('/findAllStudent',(students)=>{
                // this 指向内部函数 this, 也就是指向 vue 对象
                this.students = students;
                // 自定义属性
            })
        }
    }
})

11.6 函数实质

函数是一种非凡对象，默认状况下，一个函数都会有一个 原型对象 与之对应，函数中有个指针 prototype 指向原型对象，原型对象中有个 constructor 指向函数，你中有我，我中有你。

​fun.prototype.constructor === fun //true

11.7 函数利用

• 函数能够作为参数【回调函数 - 匿名外部类】

• 函数能够作为返回值【函数定制】

  var arr = [{age:12},{age:3}];
  arr.sort((function(key){return function(a,b){if(a[key]>b[key]){return 1;}else{return -1;}
      }
  })('age'))

十二、正则表达式

12.1 初始化

12.1.1 字面量

var pattern = /abc/igm 
//abc--> 正则表达式
//igm--> 模式

12.1.2 构造函数

var pattern = new RegExp("abc","igm");

12.2 修饰符

• i ignore case 疏忽大小写
• g global 全局
• m multiline 多行

12.3 应用

• RegExp.prototype.test()

  测试指标字符串是否匹配正则表达式

• RegExp.prototype.exec();

  从指标字符串中获取合乎正则表达式的字符串

  如果正则表达式中有修饰符‘g’，在 pattern 中会保护 lastIndex 属性，即记录下一次开始的地位，当第二次执行 exec()时，从 lastIndex 开始检索。若没有’g‘修饰符，则每一次都从开始地位进行检索。

  var str = "my phone is 18812344321, my emil is licy@briup.com, my name is charles, my friend is jacky, his phone is 17751229900, my friend is tom, his phone is 15912344432."
  function search(str){var pattern = /((188)|(177)|(159))\d{8}/g;
      var result;
      while(result = pattern.exec(str)){console.log(result[0],pattern.lastIndex);
      }
  }                    // 查问出所有合乎模式的内容

12.4 正则表达式（入门）

独立学科，用于匹配字符串。罕用于检索，论文查重，爬虫，表单验证。

12.4.1 间接量

• /abc/
• /123/
• /s/ 空白符
• /S/ 非空白符
• /d/ /[0-9]/
• /D/ /[^0-9]/
• /w/ /[a-zA-Z0-9]/ 任意的 ascii 码字符
• /W/ /[^a-zA-Z0-9]/

12.4.2 字符类

• /[0-9]/ 匹配 0~9 中的任意一个字符
• /[^0-9]/ 匹配非 0~9 中的任意一个字符

12.4.3 数量词

• {n} 匹配 n 次
• {n,m} 匹配 n~m 次
• {n,} 匹配 n + 次
• ? 0 或 1 次
• + 1 或屡次
• * 0 或屡次

12.4.4 贪心匹配与非贪心匹配

默认 是贪心匹配，对于数量来说，尽可能多得去匹配。如果心愿非贪心匹配，在数量词后增加?

var str = "hello world"
var pattern = /\w{1,5}?/    // 优先匹配 1 个字符    

12.4.5 抉择

应用分隔符 ’|’ 宰割供选择的字符，选择项匹配秩序为从左至右。

url –> 协定://ip:port/path

var str = "my website url is http://127.0.0.1:80/cms/index.html , my database url is jdbc:mysql://127.0.0.1:3306/cms , this is ok"
var pattern = /(http|jdbc\:mysql|ftp)\:\/\/(((\d{1,3})\.){3}((\d{1,3})))(\:(\d{2,4}))?(\/[\w\.]*)*/ig

12.4.6 分组

每一个括号都是一个分组

/(http|jdbc:mysql|ftp)://(w{1,3}.){+}:?(d{2,4})?(/[w.])/ig

pattern.exec(str)

result[0] 整个模式匹配的后果

result[1] 第一个分组匹配的后果

result[2] 第二个分组匹配的后果

…

12.4.7 援用

1 援用第一个分组匹配的 后果

var pattern = /(\d{1,3})\1/g;
pattern.exec(192.12)            //null
pattern.exec(192.192.)            //['192.192.','192.'...]

2 援用第二个分组匹配的后果

12.5 常见利用

​ 检索出所有的手机号。

12.6 测试

（牛客网 – 正则表达式）

十三、其余内置函数

13.1 包装器类型

根本数据类型默认是无奈调用 Object 原型中的办法，为了丰盛根本数据类型的性能，即根本数据类型的变量也能够调用办法，js 为此实现主动装箱性能【当调用根本数据类型变量的办法的时候，会主动转换为其构造函数的实例对象】

• Number

  var a = 3;
  a.toString();
  // 本来是无奈调用该办法的，但因为 js 将其主动装箱，使其主动实现了‘a = new Number(a)’代码，行将其转换成为了援用类型的变量，因而其能够调用 Number.prototype 和 Object.prototype 中的办法
  console.log(a);
  // 当变量进行失常计算时，会将其主动拆箱

• Boolean
• String

13.2 String api

13.2.1 正则表达式相干办法

参数都能够为正则表达式，如果为字符串，会先转化为正则表达式

• String.prototype.split()

  将字符串依据指定参数进行切割，返回一个数组

  "hello".split()            //['hello']
  "hello".split("")        //['h','e','l','l','o']"terry#larry".split(/\#/)        //['terry','larry'], 等价于"terry#larry".split('#')

• String.prototype.search()

  不反对全局搜寻

  与 RegExp.prototype.test 相似，返回匹配模式的字符串的 索引，如果没有匹配的后果则返回 -1

• String.prototype.match()

  与 RegExp.prototype.exec 相似

  • 如果非全局模式，返回后果与 exec 办法的执行后果相似，反对分组显示
  • 如果是全局模式，返回后果为数组，数组元素为整体匹配的后果，即数组内蕴含所有匹配后果。
• String.prototype.replace(regexp,string)

  返回值为替换后的后果

13.2.2 检索办法

• String.prototype.indexOf()
• String.prototype.lastIndexOf()

13.2.3 截取办法

• String.prototype.slice(begin,end)

  返回截取后的后果，原值不扭转

• String.prototype.substr(begin,len)

  len 示意截取的长度

  返回截取后的后果，原值不扭转

• String.prototype.substring(begin,end)

  与 slice 雷同

• String.prototype.trim()

  打消字符串左右两边的空格，原值不扭转

13.2.4 大小写转换

• String.prototype.toUpperCase();
• String.prototype.toLowerCase();

13.2.5 属性

• length

13.2.6 其余办法

…

13.3 Date

构造函数

• Date.prototype.getTime();

  返回一个工夫戳 , 即以后工夫到格林威治规范工夫的毫秒数（能够应用工夫戳转换成任意的数据格式）

  var now = new Date();                    //2020-08-10T05:48:49.439Z-- 以后工夫
  now.getTime();                            //1597038529439-- 工夫戳
  var d = new Date(1597038529439)            //2020-08-10T05:48:49.439Z

• Date.prototype.getFullYear();
  年
• Date.prototype.getMonth();
  月
• Date.prototype.getDate();
  日
• Date.prototype.getDay();
  周几
• Date.prototype.getHours();
  时
• Date.prototype.getMinutes();
  分
• Date.prototype.getSeconds()
  秒

13.4 Math

是 对象，不是函数

• Math.random()
• Math.ceil()

  向上舍入

• Math.floor()

  向下舍入

• Math.round()
  四舍五入
• Math.max(4，2，6，9)
• Math.min()

十四、面向对象

14.1 构造函数封装

如何创立一个对象？

字面量 /Object – 纯对象，只能 Object.prototype 中的办法，并且类型无奈细分。

类型细分（特定对象能够调用特定办法）：

• 工厂函数模式

  function PersonFactory(name,age,gender){var p =new Object();
      p.name = name;
      p.age = age;
      p.gender = gender;
      return p;
  }
  var p = PersonFactory("terry",12,"gender");// p 实质还是一个 Object
  p.constructor         // Object

​ 问题：对象类型无奈细分。

• 构造函数模式（构造函数应用 new 来调用）

  function Person(name,age,gender){
      this.name= name;
      this.age = age;
      this.gender = gender;
      this.sayName = function(){console.log("my name is",this.name);
      }
  }
  // 如果该函数应用 new 来调用，1) this 指向以后实例对象 2）函数执行结束后，会将以后实例对象返回
  var p1 = new Person("terry",12,"male");
  // p1 指向实例对象
  var p2 = Person("terry",12,"male");
  // p2 为 undefined，因为没有实例对象返回（this 指向全局对象）

  解决：对象类型细分的问题

  问题：内存节约。如果将函数寄存到实例对象，每个实例对象领有一个单独的函数，而这样是毫无意义。

  // 解决了内存问题，但不成熟
  function sayName(){console.log("my name is",this.name);
  }
  function Person(name,age,gender){
      this.name= name;
      this.age = age;
      this.gender = gender;
      this.sayName = sayName;// 援用地址传递
  }

• 构造函数(实例属性)+ 原型(实例办法，共享属性)

  根本属性保护在实例中，独特的办法保护构造函数的原型中。

  function Person(name,age,gender){
      this.name= name;
      this.age = age;
      this.gender = gender; 
  }
  Person.prototype.sayName = function(){console.log("my name is",this.name);
  }
  Person.prototype.sayAge = function(){console.log("my age is",this.age);
  }
  var p = new Person("terry",12,"male");

  问题：原型办法封装性较差

  增强版

  function Person(name,age,gender){
      this.name= name;
      this.age = age;
      this.gender = gender;
  }
  Person.prototype = {
      constructor:Person,    // 外围点
      sayName :function(){console.log("my name is",this.name);
      },
      sayAge :function(){console.log("my age is",this.age);
      }
  }
  var p = new Person("terry",12,"female")// 实例对象 p 的__proto__值指向的是其构造函数中 prototype 值所指向的原型对象。//{}会创立一个新对象，同时将 Person 构造函数的 prototype 值指向该新建设的对象，而新对象的__proto__指向的却是 Object 函数的原型对象的地址，如果调用‘p.constructor’返回的将是[Function:Object]。因而为了使其返回的是 Person 函数，咱们须要在这个新创建的对象中指明 constrcutor 所对应的构造函数为 Person。

14.2 对象检测

• typeof obj;
• obj.constructor ; // 查看 obj 的构造函数
• obj instanceof 构造函数 // obj 是否是指定构造函数的实例（obj 的原型链中是否蕴含指定构造函数的原型）

14.3 继承

继承即实例对象能够调用其构造函数原型中的办法以及其构造函数的父构造函数原型中的办法 …

Dog 继承 Animal

dog -> Dog.prototype -> Animale.prototype

14.3.1 借用构造函数

function Aniaml(name,age){
    this.name = name;
    this.age = age;
}
Animal.prototype = {
    constructor :Animal,
    sayName:function(){console.log('my name is',this.name);
    },
    sayAge:function(){console.log('my age is',this.age);
    }
}

function Dog(name,age,gender){
    // 借用构造函数
    Animal.call(this,name,age);
    /*
    this.name = name;
    this.age = age;
    */
    this.gender = gender;
}

14.3.2 原型链继承

Dog 实例若想调用父构造函数原型中的办法，则要应用原型链继承。

// 子构造函数的原型指向父构造函数的实例
Dog.prototype = new Animal();// 继承
Dog.prototype.constructor = Dog;
Dog.prototype.sayGender = function(){}// 其余操作必须在继承实现之后
var dog = new Dog('wang',12,'母')

十五、DOM【浏览器】

dom — > 浏览器将 html/css 转换为 js 对象，而后咱们通过 js 操作这些对象。

通常很少本人创立 dom 对象，因为浏览器曾经转换了。但咱们须要在 html 中增加构造时须要本人创立 dom 对象，再由浏览器转换成 html/css。

var dom = document.getElementById('');//document 是浏览器的内置对象，浏览器将 html 转换成对象，此 document 代表的则是整个 html 页面。dom 是 js 对象，是 HtmlDivElement 的实例对象，所以它能够调用 HtmlDivElement，HtmlElemnet，Element，Node，Object 中的办法

继承关系：

• Node

  • Element 元素节点（标签转换的元素对象）*

    • HtmlElement
    • HtmlDivElement

  • Document 文档节点（示意以后 html 文档）*

    • HtmlDocument
  • Text 文本节点
  • Comment 正文节点

15.1 Node

• 节点信息相干属性

  • Node.prototype.nodeType

    文本 -3；正文 -8；元素 -1；文档 -9

  • Node.prototype.nodeName

    • 文本 #text
    • 正文 #comment
    • 元素 标签名大写
    • 文档 #document
  • Node.prototype.nodeValue

• 层次结构相干属性

  • Node.prototype.childNodes

    返回一个类数组对象

    var dom = document.getElementById("content");
    var nodelist = dom.childNodes;                            // 返回类数组对象
    var arr1 = Array.prototype.slice.call(nodelist,0);        // 转换为数组办法一
    var arr2 = Array.from(nodelist);                        // 转换为数组办法二

  • Node.prototype.firstChild
  • Node.prototype.lastChild
  • Node.prototype.nextSibling 下一个兄弟
  • Node.prototype.parentNode
  • Node.prototype.parentElement
  • Node.prototype.ownerDocument 以后文档对象

• 办法

  ​ 是通过父节点对象来调用

  • Node.prototype.appendChild(child)
  • Node.prototype.insertBefore(new,ref)
  • Node.prototype.removeChild(child)
  • Node.prototype.replaceChild(new,old)
  • Node.prototype.cloneNode([boolean])

    参数为 true，示意除了克隆以后对象，还克隆子元素

15.2 Document

• 属性

  Document.prototype.body

  Document.prototype.forms

  Document.prototype.images

  Document.prototype.charset

  Document.prototype.doctype 判断以后网页是 html4 还是 html5

• 办法：

  • 元素节点查问

    • document.getElementById();
    • document.getElementsByName();
    • document.getElementsByClassName();
    • document.getElementsByTagName();
    • document.querySelector(selector);

      返回第一个匹配的 element

    • document.querySelectorAll();

      返回所有匹配的 element，并将其放入一个 类数组对象 中。

  • 节点创立

    var new_h3 = document.createElement("h3");
    new_h3.innerText = "end"        // 该属性是 HtmlElement 内的属性

15.3 Element（HtmlElement）

• 元素节点

  • Element.prototype.children
  • Element.prototype.firstElementChild
  • Element.prototype.lastElementChild
  • Element.prototype.nextElementSibling
  • Element.prototype.parentElement
  • innerText

    设置标签内的文本节点

  • innerHTML

    设置标签内的 html 代码（能够将字符串解析为标签）

  • style

    获取（只能获取到内置款式）或设置款式

• 办法

  • getAttribute(key)
  • getAttributeNames()
  • setAttribute(key,val)

15.4 事件机制

15.4.1 三要素

• 事件源：dom 对象（个别特指元素节点）
• 事件处理函数：匿名函数

  将在将来的某个时刻执行，由浏览器调用，并且浏览器会将事件对象传递给该函数的参数。

• 事件对象：记录了事件的详细信息

15.4.2 基本概念

• 事件类型

  • click
  • dbclick
  • mouseover
  • mouseenter
  • mouseleave
  • mouseout
  • keyup 键盘
  • keydown
  • keypress
  • blur 失去焦点
  • focus
  • scroll
• 事件默认行为

  <a> 标签有主动跳转的默认事件行为

• 事件冒泡

  1. 元素具备嵌套关系

     <div class="outer">
         <div class="center">
             <div class="inner"></div>
         </div>
     </div>

  2. 每层元素都增加事件处理函数（非必须）
  3. 操作

     （当咱们点击 inner 的时候，实际上也点击 center、outer。）

     事件捕捉：outer -> center -> inner

     但事件处理函数的调用 默认 是依照事件冒泡的程序来调用

     事件冒泡：inner -> center -> outer

• target（指标 元素）

  操作的元素

15.4.3 事件绑定

事件源.on 事件类型 = 事件处理函数(事件对象){

}

dom.onClick = function(event){

}

绑定形式：

• onXxx
• addEventListener()
• attachEvent()

15.4.4 事件对象

• event.target

  事件的指标元素（操作的元素）

• event.clientX
• event.clientY

  事件触发时候的坐标

• event.preventDefault()

  阻止事件的默认行为

• event.stopPropagation() // event.cancelBubble = true（低版本 IE）

  勾销事件冒泡

15.5 事件代理

将事件绑定在父元素上而不是子元素上

<body>
    <button id="add"> 增加 </button>
    <table id="tbl">
        <thead>
            <tr>
                <th> 姓名 </th>
                <th> 操作 </th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>zyj</td>
                <td>
                    <a href=""id="del"> 删除 </a>
                    <a href=""id="fix"> 批改 </a>
                </td>
            </tr>
        </tbody>
    </table>
    <script>
        var $add = document.querySelector("#add");
        var $tbl = document.querySelector("#tbl");
        
        // 增加
        $add.onclick = function(){var $new_tr = document.createElement("tr")
            $new_tr.innerHTML=`
                <td>`+Math.random()+`</td>
                <td>
                    <a href=""id="del"> 删除 </a>
                    <a href=""id="fix"> 批改 </a>
                </td>
            `
            $tbl.children[1].appendChild($new_tr);
        }
        
        // 删除
        $tbl.onclick = function(event){                // 事件绑定在父表格上，通过 target，即点击的指标元素来确认具体事件行为。var target = event.target;            // 每点击一次删除链接，该事件就会执行一次。if(target.nodeName == 'A'){switch(target.getAttribute("id")){
                    case "del":
                        target.parentElement.parentElement.parentElement.
                           removeChild(target.parentElement.parentElement)；break;
                    case "fix":
                        alert("批改");
                        break;
                }
            }
            event.preventDefault();}
        // 上面的办法不可行，因为在 html 首次执行时就曾经确定了所有的删除链接，并设置了事件行为，但表格是动静增长的，即删除链接的个数也在动静增长。// var delliset = document.querySelectorAll("#del");
        // Array.from(delliset).forEach((item)=>{//     item.onclick = function(){//     item.parentElement.parentElement.parentElement.removeChild(item.parentElement.parentElement);
        //         event.preventDefault();
        //     }
        // }
    </script>
</body>

15.6 jquery 实现动静表格

jquery 实际上是对于 dom api 的封装，让用户应用 dom 办法变得更加简洁。

jQuery 对象是一个 类数组对象，类数组对象中的元素是Element 元素

jquery 对象 -> dom 对象，即把类数组对象中的元素取出。

<script>
    var $btn_add = $("#add");
    var $tbl_user =$("#tbl");

    // 删除
    $tbl_user.on('click','a',function(event){var target = $(event.target);
        switch(target.attr("id")){
            case "del":
                // 移除节点
                target.parents("tr").remove()
                break;
            case "fix":
                alert('批改');
                break;
        }
        return false;
    })

    // 增加
    $btn_add.on('click', function(){
        // 虚构 dom
        $( `
            <tr>
            <td> <input type="checkbox"> </td>
            <td> `+Math.random()+` </td>
            <td> 男 </td>
            <td>
            <a href=""class="btn_del"> 删除 </a>
            <a href=""class="btn_edit"> 批改 </a>
                </td>
                </tr>
            `).appendTo($('#tbl > tbody'))
    });

</script>

十六、BOM【浏览器】

16.1 超时调用 & 间歇调用

// 超时调用
var flag = setTimeout(function(){// 通过 1000ms 当前调用回调函数，只调用一次。1000ms 不牢靠},1000)            
//flag 为超时调用函数的一种标识
console.log(flag);            // 异步，先打印 flag 值
clearTimeout(flag);            // 勾销超时调用

// 间歇调用
var flag = setInterval(function(){console.log('工夫到了')                // 当回调函数的执行内容雷同时，控制台只会显示一次输入内容
},1000)            // 每隔 1000ms 调用一次回调函数

如何应用超时调用来模拟一个间歇调用

16.2 提示框

（企业级不会间接应用这些提示框）

• alert 正告框（能够阻塞代码的运行，用于调试）
• prompt 询问框
• confirm 确认框

16.3 关上页面

window.href = ""    //window 是浏览器的全局对象，var 变量即被晋升到 window 中

16.4 变量作用域

• 全局作用域，全局执行环境

• 办法作用域，办法执行环境

  办法执行结束后，函数外部申明的变量会被开释

  var a = 3;
  function foo(){
      var b = 4;
      for(var i=0;i<10;i++){} 
      console.log(i);            //10-- 变量没有部分作用域
  }
  foo();
  console.log(window.a);        //3
  console.log(window.b);        //undefined-- 办法作用域

如何模仿一个部分作用域

function foo(){if(true){var c = 1;                        // 冀望 c 领有部分作用域}
    console.log(c)                        //1
}
=======================
function foo(){(function(){if(true){var c = 1;}
    })();}

16.5 window 的滚动监听

window.onscroll = function(){}

16.6 history

window.history.go(1);        // 后退 1 页
window.history.back();

16.7 路由原理

window.onload = function(){            // 当页面加载结束后
    var hash = window.location.hash.slice(1);    // 获取路由
    switch(hash){
        case "/space":
            break;
        case "/home":
            break;
    }
}

16.8 ajax–async javascript and xml

异步的 javascript 和 xml (json)，次要用于前后台拆散开发中数据的交互，占据咱们开发的 50% 以上。

// 异步
function(){
    查问文章信息 ajax
    查问用户信息 ajax
    查问评论信息 ajax
    console.log('end'); 
}
// 三个查问同时进行，因为网络等起因，返回后果的工夫是不确定的。因而，console.log("end")最先执行

// 数据传递
----- 同步形式（返回）-----
    function foo(){return "";}
    var a = foo();
----- 异步形式（回调）-----
    function foo(handler){
        将来的某个时刻能力获取到
        handler("后果")
    }
     foo(function(a){});

实现过程：

1. 实例化 XMLHttpRequest

   var xhr = new XMLHttpRequest()

2. 设置申请行

   xhr.open(method,url)

3. 设置申请头

   （申请形式 method = “POST” 的时候才会设置 Content-Type）

   xhr.setRequestHeader(key,val)

4. 设置申请体

   （申请形式 method = “POST” 的时候才会传递 data）

   xhr.send(data)

5. 监听申请状态

   xhr.onreadystatechange = function(){if(this.readyState === 4){        // 申请失常发送到服务器端，响应达到客户端并且已被解析为客户端可用的格局
           if(this.status === 200){console.log(this.response);
           }
       }
   }

status:

200         ok
500        后端接口异样
404           找不到