js笔记

2017-08-22 本文已影响0人塔库纳玛哈哈

js简介

Js是一种基于事件和对象驱动的解释性、松散性的语言。

一切皆对象

javascript 布兰登艾奇创建

ECMAscript

js的作用

写网页的动态效果
写网页的游戏
使用cookie、session
实现交互
发送表单form
发送ajax

变量、常量

变量是计算机内存里的一块地址单元

变量的命名要有意义
命名不能以数字开头，可以用数字、字母、下划线、$构成。
命名不能以关键字或者是保留字构成
命名以首字母大写或者是以驼峰命名法来命名
严格区分大小写
```
var NUM=200;
var num=200;
```
（以上两个变量是不同的）

基础数据类型

number 数值类型

二进制；
八进制；
十六进制 -0xff ；
string
\n换行
\r回车
\t制表符
\f换页
\v垂直制表符
模版字符串template

NaN not a number 属于数值类型

var num1=5,
num2=40;
console.log(`我们班一共是${num1+num2}为学生，其中女生${num1}位，男生${num2}位`);

boolean

true
false
- ""
- 0
- null
- undefined
- false
- NaN

null(本身是一个空对象)

null占位符空
- typeof（null）=object；

undefined

undefined 未定义

symbol

symbol 不重复的值

引用数据类型

function函数

object对象

array数组

数组就是一系列有直接或者是间接联系的数据的集合

console.log(arr.length);

console.log(arr['length']);

console.log(arr[arr.length-1]);

遍历

for(var i=0;i<arr.length;i++){
  console.log(arr[i]);
 }

在数组中选最大值／最小值

打擂台法

var arr=[1,23,23,5,5,34,26];
var max=arr[0];
for(var i=1;i<arr.length;i++){
    if(arr[i]>max){
         max=arr[i];
       }
}
console.log(max);

表达式(一切有值的)

typeof(); 只能用来检测基础数据类型

instanceof 判断是否是数组对象Array的实例
- 用法：
```
var arr=[];
var result=arr instanceof Array;
console.log(result);
```

引用数据类型传址

function fun(){
    
}
var aa=fun;    fun是函数的引用地址，现在把fun的地址传给                了aa

运算符

算数运算符

➕号

任何数据类型和string连接的结果类型都为string
➗号
%取余

整数取余数
++nub、nub++、- -nub、nub- -
+=、- =、*=、／=、%=

逻辑运算符

&&与

console.log(1&&2); 值：2

console.log(1&&0); 值：0

console.log(0&&1); 值：0

console.log(0&&0); 值：0

console.log(200&&1)；值：1

var num=2;

console.log(1&&num++); 值：2

console.log(num); 值：3

var num=2;

console.log(1&&++num); 值：3

console.log(num); 值：3

var num=2;

console.log(0&&num++); 值：0

console.log(num); 值：2

var num=2;

console.log(0&&++num); 值：0

console.log(num); 值：2

var num=2;

console.log(num++&&1); 值：1

console.log(num); 值：3

var num=2;

console.log(++num&&1); 值：1

console.log(num); 值：3

var num=2;

console.log(num++&&0); 值：0

console.log(num); 值：3

var num=2;

console.log(++num&&0); 值：0

console.log(num); 值：3
//或

console.log(1||2); 值：1

console.log(1||0); 值：1

console.log(0||1); 值：1

console.log(0||0); 值：0

console.log(200||1)；值：200

var num=2;

console.log(1||num++); 值：1

console.log(num); 值：3

var num=2;

console.log(1||++num); 值：1

console.log(num); 值：3

var num=2;

console.log(0||num++); 值：2

console.log(num); 值：3

var num=2;

console.log(0||++num); 值：3

console.log(num); 值：3

var num=2;

console.log(num++||1); 值：2

console.log(num); 值：3

var num=2;

console.log(++num||1); 值：3

console.log(num); 值：3

var num=2;

console.log(num++||0); 值：2

console.log(num); 值：3

var num=2;

console.log(++num||0); 值：3

console.log(num); 值：3
!非

比较运算符

(ASCII码------美国标准信息交换码;

EASCII码————欧洲扩展的；

GB2312码—————中国制定的；

GBK码

unicode码——国际规定的----UTF-8)

0————48
A——————65
a—————————97
<、>、<=、>=、==、===、!=、!==

例：console.log("a">"b"); 值：false；

一元运算符
- new用来创建对象
- delete 删除对象的属性
- typeof 检测对象属性

三元运算符(写法格式固定)

var nub=3>4?200:100;
console.log(nub); 值为100；
如果3大于4，则值为200；
如果3小于4，则值为100；

特殊运算符
扩展运算符
- ...

7.流程控制

顺序结构
- 默认是顺序结构

条件结构

if条件语句

var grade=90;
if(grade>80){
     console.log('良好')
   }

var result=prompt('请输入您的成绩'，123)；
if(result>80&&result<90){
    document.write('良好');
}else{
    document.write('一般');
}

var result=prompt();
if(){
     else if(){
     
   }
   }else(){
     
   }

switch判断语句

var num1=prompt("请输入第一个数字");
    num2=prompt("请输入第二个数字");
    fu=prompt("请输入运算符");
switch(fu){
      case"+":
    console.log(Number(num1)+Number(num2));
    break;
    case"-":
    console.log(num1-num2);
    break;
    case"*":
    console.log(num1*num2);
    break;
    case"/":
    console.log(num1/num2);
    break;
  default:
    console.log("输入有误");
    break;
}

循环结构
- for循环
- while循环
```
var 
```
- do while循环

团队

1.确定自己的需求是否和团队一致

2.提高自己的能力

3.德行

4.信任

函数function

将实现某一特定功能的代码块，封装起来以便重复使用

函数定义方式

以字面量的方式去定义函数
```
var fun=function(){
    
}
```

以关键字function的方式定义函数
```
function fun(){
    
}
```

函数调用

var fun=function(){
    代码块；
}
fun();

匿名函数的运行
```
(function(){
    alert(1);
})()
```

函数参数

var fun=function(形式参数，形式参数){
    代码块；
}
fun(实际参数，实际参数);
//形式参数的作用就是为了接收实际参数；
//形式参数和实际参数的个数可以不同
//形式参数和时机蚕食对应一一赋值
//没有传值的形式参数默认是undefined
//所有的时机参数会被arguments集合接收

例子：

    function fun(arr){
        for(var i=0;i<arr.length;i++){
            for(var j=i+1;j<arr.length;j++){
                if(arr[i]<arr[j]){
                    var tem=arr[i];
                    arr[i]=arr[j];
                    arr[j]=tem;
                }
            }
        }
        console.log(arr);
    }
    fun([1,445,23,44,56]);

函数的返回值

return;

函数的作用域

js运行依赖于浏览器，浏览器是js的宿主环境

执行环境

全局环境

定义在全局环境中的变量、函数，称为全局变量

局部环境

定义在局部环境中的变量、函数，称为局部变量

作用域

变量在某个范围内有意义

var nub=200;
function aa(){
    nub=300;
  function bb(){
      nub=400;
    consoloe.log(nub);
  }
  bb();
  console.log(nub);
}
aa();
console.log(nub);

结果为：400
400
400；

块级作用域
作用域链

当函数在运行的时候会自动的创建一个集合来保存可见范围内所有的变量、对象

回调函数

当一个函数作为另外一个函数的参数的时候，这个函数就是回调函数

function fun(m,n,nub){
  nub(m,n);
}
fun(1,2,function(a,b){
  
});

递归函数

函数自己调用自己

例子1:求5的阶乘 5*4！

function jiecheng(n){
    if(n==0){
         return 1;
       }
  return n*jiecheng(n-1);
}
console.log(jiecheng(5));

例子2: 1 2 3 5 8 13 21 44 …….n,求n等于多少

斐波那契数列

n=(n-1)+(n-2)

function fun(n){
    if(n==1){
         return 1;
       }
    if(n==2){
         return 2;
       }
    return fun(n-1)+fun(n-2);
}
console.log(fun(7));

例子3:把数组里面的元素拷贝到一个新的数组

闭包

当一个函数嵌套另外一个函数，在内部函数中使用了外部的局部变量，在外部去访问内部函数的时候，就形成了闭包

闭包的作用：保存局部变量

function aa(){
    var nub=200;
  function bb(){
      console.log(nub);
  }
  return bb();
}
var fun=aa();
console.log(fun);

预解析

在程序真正开始运行之前，js会将以var声明的变量和以function关键字声明的函数，提前加载到相对应的环境里面

fun();
var fun=function(){
    console.log(1);
}
结果是报错，因为var声明的变量会提前解析但为赋值

fun();
function fun(){
    console.log(1);
}   
结果为1；

垃圾处理机制

1.当一个函数运行结束以后，局部变量会被删除

2.当一个对象不再被引用的时候，这个对象将在某一个时刻被删除

函数重载

内置顶层函数

1.Number

2.String

3.Boolean

4.parseInt( ); 将字符串转化为整数（必须是数字开头的）

5.parseFloat( ); 将字符串转化为小数（必须是数字开头的）

6.isNaN(); 是不是一个数字

console.log(Number(true));    值为1

null==undefined 为真

null==false 为假

对象

面向对象

面向对象的编程方式

研究的一切事物都是对象

class 类是对象的抽象

对象是类的实例化；

键值对

以json格式去创建对象

var obj={
    name:
}

属性的访问方式
- obj.name
- obj['name']
属性的定义方式

以构造函数的方式去创建对象

提供对象的初始化

function person(name,age){
    this.name=name;
    this.age=age;
}
var xiaoming=new person('xiaoming',18);
var xiaohua=new person('xiaohua',20);
console.log(xiaoming,xiaohua);

结果
person {name: "xiaoming", age: 18}
person {name: "xiaoming", age: 18}

通过object的方式创建对象

任何一个对象都可以看作是object方式创建而来的

var obj=new Object();

instanceof 用来检测某一个对象是否是某一个构造函数的实例化

对象的继承

prototype

每一个函数都有prototype属性

prototype的值为对象

function Person(name,age){
    this.name=name;
    this.age=age;
}
Person.prototype.fun=function(){
    console.log(1);
};
console.log(Person.prototype.fun());

new

new 发生了三件事

创建一个空对象 obj

obj_proto_==Person.prototype

Person.call(obj);

继承链

继承链(原型继承链)

var obj=new Person();
obj.__proto__=Person.prtotype
Person.prototype._proto_=Object.prototype
Objcet.prototype.__proto__==null;

this指针

谁调用这个函数，this指向谁

call方法

每个call里面的第一个参数就决定了this指针指向谁

fun.apply(obj,'lisi',18);      //第一个参数：实例化对象；第二、三个参数：传值

apply方法

每个call里面的第一个参数就决定了this指针指向谁，第二个参数以后的传值方式与call方法不同

fun.apply(obj,['lisi',18]);     //第一个参数：实例化对象；第二、三个参数：传值（传值时需要加方括号）

obj=null

删除一个对象

obj=null;

delete

用来删除某一个对象的属性

delete obj.name;

宿主对象（浏览器对象）

window对象

内置对象

Object
Function
Array
String
RegExp 正则表达式
Date 时间
Math 数学

数组对象

arr.push();

push()——在数组的尾部添加一个或多个元素，并返回数组新的长度，修改原始数组

arr.pop();

pop()——在数组的尾部删除一个元素，并返回弹出的元素值，修改原始数组

let stack = [];
stack.push(1,2);    // stack:[1,2]，返回2
stack.push([1,2]);  // stack:[1,2, [1,2]]，返回3
stack.pop();        // stack:[1,2]，返回[1,2]

arr.unshift();

unshift()——在数组的头部添加，返回新的数组长度，修改原始数组

arr.shift();

shift()——在数组的头部删除，返回删除的数组元素，修改原始数组

let a = [1];
a.unshift(2);           // a:[2, 1]，返回2
a.unshift(3, [4,5]);    // a:[3, [4,5], 2,1]，返回4 
a.shift();              // a:[[4,5], 2, 1]，返回3

arr.slice();

slice()——对数组进行分离，并返回一个子数组。不修改原始数组

第1个参数表示起始索引
第2个参数表示结束索引(返回数组不包含结束索引对应的元素值)

如果没有第2个参数，则表示取值到最后一个索引。正值表示正向索引，负值表示反向索引
```
let a = [1,2,3,4,5];
a.slice(0, 3);          // 返回[1,2,3]
a.slice(3);             // 返回[4,5]
a.slice(-3, -1);        // 返回[3,4]，反向索引，从倒数第3个到倒数第1个元素
```

arr.splice();

splice()——从数组中删除和插入一些元素。修改原始数组

前2个参数指定了要删除的数组元素
- 第1个参数表示需要删除元素的起始索引值
- 第2个参数表示需要删除的个数
  如果省略则表示删除起始索引后的所有元素
后面的参数指定需要插入的元素
返回值是删除的元素组成的数组

let a = [1,2,3,4,5,6,7,8];
a.splice(4);                // 返回[5,6,7,8]，a是[1,2,3,4]
a.splice(1,2);              // 返回[2,3]，a是[1,4]
a.splice(1,1);              // 返回[4]，a是[1]

let b = [1,2,3,4,5];
a.splice(2,0, "a", "b");    // 返回[]，a是[1,2, "a","b", 3,4,5]
a.splice(2,2, [1,2], 3);    // 返回["a", "b"]，a是[1,2, [1,2],3, 3,4,5]

arr.concat();

concat()——创建并返回一个新数组。不修改原始数组

let a = [1,2,3];
a.concat(4, 5);         // 返回[1,2,3,4,5]
a.concat([4,5]);        // 返回[1,2,3,4,5]
a.concat([4,5],[6,7]);  // 返回[1,2,3,4,5,6,7]
a.concat(4, [5, [6,7]]);// 返回[1,2,3,4,5,[6,7]]
a.join();               // "1,2,3"，原始值不发生改变

arr.join();

join()——将数组中的所有元素转化为字符串并连接在一起，返回最后生成的字符串。不修改原始数组

let a = [1, 2, 3];
a.join();               // => "1,2,3"，默认使用","隔开元素
a.join("&");            // => "1&2&3"，指定分隔符

arr.reverse();

reverse()——将数组中的元素逆序，返回逆序后的数组。修改原始数组

let a = [1, 2, 3];
a.reverse().join();     // => "3,2,1"，此时的a是[3, 2, 1]

arr.some();

some()——方法为数组的每个元素调用指定的函数，并返回true或false。当有一个调用返回true时，some()就会返回true；只有当所有调用都是false时，some()才返回false

let a = [1,2,3,4,5];
a.every(function(x) { return x < 10; });    // => true，所有的值<10
a.every(function(x) { return x % 2 === 0}); // => false，不是所有的值都是偶数
a.some(function(x) { return x % 2 === 0; }) // => true，a含有偶数值

arr.every();

every()——方法为数组的每个元素调用指定的函数，并返回true或false。当有一个调用返回false时，every()就会返回false；只有当所有调用都是true时，every()才返回true

arr.find();

arr.findIndex();

arr.map();

map()——方法为数组的每个元素调用指定的函数，并返回一个新数组，返回什么值，形成什么样的集合；

注意：map()返回的是新数组，它不修改原始数组

var arr=['衣服','鞋子','裤子'];
var brr=arr.map(function(value,index){
    return value+'new'
})
console.log(brr);

a = [1,2,3];
b = a.map(function(x) {return x*x; });  // b是[1,4,9]

arr.filter();

filter()——方法为数组的每个元素调用指定的函数，并返回筛选出的新数组，对原数组没有影响

a = [5,4,3,2,1];
smallvalues = a.filter(function(x) { return x < 3; });  
// smallvalues是[2, 1]

arr.Foreach();

forEach()——方法从头至尾遍历数组，为每个元素调用指定的函数

forEach()没有像for循环中使用的相应的break语句，如果要提前终止，可以做放到try/catch中处理

Array.prototype.forEach=function(callback){
    for(var i=0;i<this.length;i++){
        callback(this[i],i);
  }
};
var arr=[1,2,3,4];
arr.forEach(function(value,index){
    console.log(value,index);
});

  var arr=[1,2,3];
  arr.forEach(function(value,index){
      console.log(value,index);
  })

let data = [1,2,3,4,5];
let sum  = 0;
data.forEach(function(value,index) { sum += value;} );
sum;         // => 15

arr.sort();

sort(SortFunction) —— 按照指定的 SortFunction 将数组的元素排序

arr.includes();

arr.toString();

toString()——返回一个字符串

[1,2,3].toString();         // "1,2,3"
[1, [2, "c"]].toString();   // "1,2,c"

arr.reduce();

reduce()——对数组的元素对调用指定的函数，并返回最终生成的单个值

第1个参数指定调用的函数
第2个参数为可选参数，指定传递给函数的初始值，当不指定值时，使用数组的第1个元素作为初始值

let a   = [1,2,3,4,5];
let sum = a.reduce(function(x,y) { return x+y; }, 0);       //15
let max = a.reduce(function(x,y) { return (x>y)?x:y; });    // 5

arr.indexOf();

indexOf()——搜索整个数组中给定值的元素，返回找到的第1个元素的索引，如果找不到，则返回-1

第1个参数为需要搜索的值

第2个参数是可选的，指定开始搜索的索引位置

let a = [0,1,2,1,0];
a.indexOf(1);           // =>1: a[1] = 1
a.lastIndexOf(1);       // =>3: a[3] = 1
a.indexOf(3);           // =>-1: a中没有值为3的元素

字符串对象

charAt();

charAt(n) —— 返回该字符串第 n 位的单个字符。（从 0 开始计数）

charCodeAt();

charCodeAt(n) —— 返回该字符串第 n 位的单个字符的 ASCII 码

fromCharCode();

indexOf();

indexOf() —— 返回查找到的位置
用法：string_1.indexOf(string_2,n); 从字符串 string_1 的第 n 位开始搜索，查找 string_2，返回查找到的位置，未找到，返回 -1 ( n 可以不填，默认从第 0 位开始查找)

lastIndexOf();

lastIndexOf() —— 跟 indexOf() 相似（不过是从后边开始找）

split();

split —— 将字符串按照指定的分隔符分离开，返回一个数组

slice();

substr();

substr(n,x) ——　返回原字符串从 n 位置开始，长度为 x 的子串

substring();

substring(n,m) —— 返回原字符串从 n 位置到 m 位置的子串，不支持负数

concat();

endsWith();

includes();

replace();

startsWith();

toUpperCase();

toUpperCase() ——　返回把原字符串所有小写字母都变成大写的字符串

toLowerCase();

toLowerCase() ——　返回把原字符串所有大写字母都变成小写的字符串

trim();

trimLeft();

trimRight();

数学对象

Math.abs();

返回 x 的绝对值

Math.ceil();

返回大于等于 x 的最小整数

Math.cos();

返回 x 的余弦

Math.sin();

返回 x 的正弦

Math.tan();

返回 x 的正切

Math.floor();

返回小于等于 x 的最大整数

Math.max();

max(a, b) —— 返回 a, b 中较大的数

Math.min();

min(a, b) —— 返回 a, b 中较小的数

Math.PI();

Math.pow();

pow(n, m) —— 返回 n 的 m 次幂 (nm)

Math.random();

random() —— 返回大于 0 小于 1 的一个随机数

Math.round();

round(x) —— 返回 x 四舍五入后的值

Math.sqrt();

sqrt(x) —— 返回 x 的平方根

Math.trunc();

干什么的，怎么用（参数），返回值是什么，对原对象有无影响

console.dir();     //可以查看这个对象的结构；
console.log();     //可以查看这个对象的输出值；

获取屏幕宽度、高度

var width=document.documentElement.clientWidth;
var height=document.documentElement.clientHeight;

递归拷贝

拷贝数组

浅拷贝

var arr=[1,2,33,[1,6,8]];       //只拷贝[1,2,33,[]]   到二维以上的数组里面的内容都无法拷贝到

深拷贝

function copy(arr,brr){
    for(var i=0;i<arr.length;i++){
        if(arr[i] instanceof Array){
            brr[i]=[];
           copy(arr[i],brr[i]);
        }
        else{
            brr.push(arr[i]);
        }
    }
}
var brr=[];
copy([1,2,['a','b']],brr);
console.log(brr);           //结果为[1,2,['a','b']]

拷贝对象

对象的遍历

Bom

浏览器对象模型

window 顶层对象

location 地址栏

history 历史记录

document 文档

window

confirm

弹出一个是否确定的弹框

window.screen

获取屏幕的宽高

window.screen.width 获取屏幕的宽

window.screen.height 获取屏幕的高

window方法

时间函数

setInterval

setInterval(function(){     //回调函数
    console.log(1);
},1000);        //1000的单位为毫秒    1秒==1000毫秒

clearInterval

setTimeout();

clearTimeout();

location地址栏

Tcp／Ip协议：顶层协议

http:／／应用层协议

http:// www.baidu.com ：80 ／aa／bb／index.html ？查询字符串

协议主机地址端口号port 页面路径查询字符串锚地址

protocol hostname host主机+端口 pathname search hash

网络传输协议

超文本传输协议

location属性

location方法

reload（）；

重载

reload(true);加载所有缓存

reload（false）；不加载缓存

assign（）；

加载到页面会留下历史记录

assign();

assign(false);

replace（）；

替换到页面不会留下历史记录

history历史记录

history属性

history方法

history.forword

转向下一个页面

与浏览器的点击向前按钮功能一样

history.back

转向上一个页面

与浏览器的点击后退按钮功能一样

history.go(0);

当前页面刷新

Dom

文档对象模型

Document

Document方法

Document.title

Document.documentElement.clientWidth

Document.documentElement.clientHeight

元素的获取方法（旧）

Document.getElementsByTagName();

收到的是一个集合

Document.getElementsByClassName();

收到的是一个集合

在IE浏览器里面不支持ByClassName获取类名的方式

Document.getElementById();

收到的是一个元素

只能用document调用

Document.getElementsByName();

收到的是一个集合

只能用document调用

元素的获取方法（新）

document.querySelector();

默认是选取元素的第一个

document.querySelectorAll();

可以选取到这个元素所有的

事件（初试）

鼠标

click；

dbclick；

mousemove

mousedown

mouseup

mouseover

mouseout

mouseenter

mouseleave

键盘

keydown

keypress 键盘按住

keyup

表单元素

blur 失去焦点

focus 获取焦点

submit 提交

reset 重置

change 改变

dom操作

对元素内容

innerHTML可以获取到标签对

innerText只获取文本

对元素样式css

操作属性

getAttribute('')

标准属性：obj.属性

非标准属性：obj.getAttribute('');可以获取到标签的任何属性

<div><>     //

setAttribute('');

获取css样式属性

getComputedStyle（非行内样式）

getComputedStyle(div,null).height   //对IE浏览器不兼容

getCurrentStyle（非行内样式）

getCurrentStyle.height  //兼容IE浏览器

操作样式（行内样式）

设置单个样式(行内样式)

obj.style.标准属性='height:200px'；

设置多个样式（行内样式）

obj.style.cssText=‘height:200px;width:200px’;

对元素html属性

this.classList.add(); 增加类名

this.classList.toggle(); 如果有就增加，如果没有就删除

this.classList.remove(); 移除类名
}

获取元素

获取元素在页面中所占宽、高

offsetWidth

不包括margin

如果这个元素是display：none；那么不会被获取到

offsetHeight

不包括margin

获取元素在页面中实际的位置

offsetLeft

在display：fixed时，距离当前窗口的位置

如果没有fixed时，是遵照body定位

计算的是距离有定位属性的上级元素的距离，如果没有定位属性的父元素，计算的是距离body的值

offsetTop

在display：fixed时，距离当前窗口的位置

如果没有fixed时，是遵照body定位

计算的是距离有定位属性的上级元素的距离，如果没有定位属性的父元素，计算的是距离body的值

获取浏览器滚动条

document.body.scrollTop 谷歌

document.documentElement.scrollTop 火狐

值为数字

调错

先看控制台

如果有错是语法错误

对象的某个属性用的不正确

element

想要添加的类名、style是否添加上，如果没有添加上，就找个添加的这条语句

每行调错

从第一行代码，输入每个表达式的值

节点

html文档中，所有的构成部分都是节点，没有个节点和节点之间的关系构成了整个html文档树模型

nodeName

nodeType

nodeValue

document节点

nodeName #document

nodeType 9

nodeValue null

文本节点

nodeName #text

nodeType 3

nodeValue 文本的内容

元素节点

nodeName 大写的标签名

nodeType 1

nodeValue null

注释节点

nodeName #comment

nodeType 8

nodeValue 注释的内容

属性节点

nodeName 属性名 id="one"中的id

nodeType 2

nodeValue 属性值 id="one"中的one

节点关系

同辈关系

div.previousSibling;    //上一个兄弟节点
div.previousElementSibling;     //上一个元素节点
div.nextSibling;    //下一个兄弟节点
div.nextElementSibling;     //下一个元素节点

父辈关系

div.childNodes;     //所有的节点
div.children;       //所有的元素节点
div.parantNode;     //父辈节点

节点的操作

节点的创建

document.createElement('div');

节点的增加

body.appendchild();     //插入到元素之后

insertBefore(newobj,oldobj);    //插入到元素之前

节点的删除

par.removeChild();

节点的复制

clone=div.cloneNode(true);  //克隆的元素存在内存中，需要在单独对克隆的节点添加到其他节点上，才能在页面中显示

事件

事件源

事件发生在谁的身上，谁就是事件源

事件对象

事件发生的时候，在自动创建的一个对象，用来保存事件发生时候的所有信息

    div.onclick=function(e,way='1'){
        console.log(e,way);
    }   //  e是默认的事件传参；

altKey; 验证alt是否被按下；

cancelBubble;

clientX; 鼠标事件的距离浏览器窗口的X距离

clientY; 鼠标事件的距离浏览器窗口的Y距离

ctrlKey; 验证ctrl是否被按下；

detail;

offsetX; 鼠标事件的距离当前事件源的X距离

offsetY; 鼠标事件的距离当前事件源的Y距离

pageX; 鼠标事件的距离body的X轴距离

pageY; 鼠标事件的距离body的Y轴距离

screenX; 鼠标事件的距离屏幕的X距离

screenY; 鼠标事件的距离屏幕的Y距离

srcElement;

shiftKey; 验证shift是否被按下；

target;

type; 事件类型；

which;

ASCII码值：左37；上38；右39；下40；空格32；回车13；

事件类型

用户的行为

mousewheel

用事件监听的方式添加

transitionend

用事件监听的方式添加

animationend

用事件监听的方式添加

wheelDeltaX

wheelDeltaY

事件处理程序

事件发生之后的响应

事件的添加

obj.addEventListener

    function fun1(){
        alert(1);
    }
    function fun2(){
        alert(2);
    }
    obj.addEventListener('click',fun1,false);
    obj.addEventListener('click',fun2,false);
}
//可以给一个对象添加多个事件；

obj.attachEvent (IE)

obj.attachEvent('onclick',fun1);

事件的删除

obj.removeEventListener

    obj.removeEventListener('click',function(){
        alert(1);
    },false);
    obj.removeEventListener('click',function(){
        alert(2);
    },false);
}
//

obj.detachEvent (IE)

obj.detachEvent('onclick',fun1);

事件的删除

obj.removeEventListener

    obj.removeEventListener('click',function(){
        alert(1);
    },false);
    obj.removeEventListener('click',function(){
        alert(2);
    },false);
}
//

obj.detachEvent (IE)

obj.detachEvent('onclick',fun1);

事件对象

事件发生时自动创建的一个对象用来接收事件发生时的所有信息

e||window.event

事件流

当一个事件触发的时候，当前元素的父元素乃至整个页面，都会以一定的顺序来响应整个事件。响应的顺序叫做事件流。

2、先向下进行捕获，然后再向上冒泡

冒泡型事件流

从当前元素到根元素一级一级往上出发，

除了mouseenter、mouseleave不会触发事件流

捕获型事件流

从根元素向下捕获

阻止事件流

阻止事件流是阻止事件的传递

if(e.stopPropagation){
        e.stopPropagation();    //兼容现代浏览器
   }else{
        e.cancelBubble=true;       //兼容IE
   }

事件委托

1、新添加进来的元素，需要添加事件的时候

2、做事件优化的时候

3、使用ajax的时候

目标事件源：真正触发事件的元素

document.onload=function(){  
    var btn=document.querySelector('button');
    var div=document.querySelector('div');
    btn.onclick=function(){
        var                     newdiv=document.createElement('div');
        document.body.appendChild(newdiv);
        newdiv.innerText="new";
    }
    //目标事件源，真正触发事件的元素
    document.body.onclick=function(e){
        var obj=e.target;
        if(obj.tagName=="DIV"){
            obj.style.backgroundColor='blue'
        }
    }
}

contentidetable="true";

时间对象

MGT时间

格林尼治天文台每天发布的时间

UTC时间

世界协调时间，由原子钟计时；

计算机元年时间：1970年1月1日0时0分0秒，1970年之前为负，1970年之后为正

当前时间计算的是当前时间距离1970年的毫秒数

使用实例化时间

var time=new Date();

var time=new Date("4/21/2017 23:00:00");
var time=new Date(2017,3,21,15,16,08,123);  //月份的设置从0-11

getTime();

获取当前时间距离1970年的毫秒数

getFullyear();

获取4位数的年份

getMonth();

getDay();

0是周日

getHours();

getIMinutes();

getSecond();

getMillisecond();

cookie（本地存储）

是一种字符串，以键值对的结构形式出现

只允许在用户端里面存储4k的大小

1bit=2

1Byte=8Bit

1K=1024B

1M=1024KB

1G=1024MB

1T=1024G

同域原则

不能跨浏览器访问

cookie的访问

document.cookie

cookie的设置

临时性的cookie

浏览器关闭时，自动被删除；

document.cookie=‘’键=值 ‘’；

有生命周期的cookie

var now=new Date();
now.setTime(now.getTime()+30*1000);
document.cookie='aa=bb;expires='+now.toGMTString();

setCookie();

delCookie();

getCookie();

localStroage（永久存储）

只要不删除就不会消失

存储大小为5-10M大小

同域原则

不能跨浏览器

和时间没有关系

存储不安全

值为对象

只能存储字符串

clear();

getItem();

setItem("name","lisi");

sessionStroage（会话级存储）

会话（窗口）关闭就删除了

存储大小为5-10M大小

同域原则

不能跨浏览器

和时间没有关系

存储不安全

JSON.stringify();

将数组转化为字符串

JSON.parse

将字符串转化为数组

正则表达式RegExp()

正则是用来检测某个字符串是否符合语法规范的语言

表单验证

信息过滤

信息检索

定义方式

var reg=/不能有数字/;

var r=new RegExp();

方法

exec();

输出为一个数组对象

结构为[0：，index：，input：]

0 代表匹配到的字符；

index 代表匹配到的字符的索引位置

input 代表检测的字符串

test();

检测是否符合要求，符合为true，不符合为false

模式修正符

i

不区分大小写

var reg=/ /i;   //i代表不区分大小写
var str='abcAdef';
console.log(str);
console.log(reg.exec(str));

m

多行匹配

var reg=/^a\wc$/m;  //m代表多行匹配
var str='abc\ndef';
console.log(str);
console.log(reg.exec(str));

g

全局匹配

var reg=/ /g;   //g代表全局匹配

lastIndex属性

原子

构成正则表达式最小的单位

一个原子只能匹配一个字符

a-z

0-9

字符，.@#¥%

\d 用来匹配0-9的数字

\D 用来匹配除了0-9的数字

\w 用来匹配数字字母下划线0-9 a-z A-Z

\W 用来匹配除了数字字母下划线0-9 a-z A-Z _以外的

\s 匹配空白字符空格 \n \r \t \v \f

\S 匹配除了空白字符空格 \n \r \t \v \f以外的

. 匹配除了换行符以外的字符

原子表

自定义的原子

[0-9] \d

[^0-9] \D

[0-9a-zA-Z_] \w

[^0-9a-zA-Z_] \W ^表示！非

转义字符

var reg=/http:\/\/www\.[0-9a-z]\.com/

或

var reg=/ab|cb/;
var str='abc';
console.log(reg.exec(str));     //返回值为ab

原子分组

当形成原子分组的时候，括号里面匹配到的东西就会被压入内存（栈区），已备使用

反向引用

var reg=/a(b|c)c(\d)\1/;
var str='abc1b';
console.log(reg.exec(str));     //返回值为abc1b,反向引用只对括号里保存下来的*值*进行匹配。

var reg=/a(b|c)c(\d)\1\2/;
var str='abc1b1';
console.log(reg.exec(str));
//(3) ["abc1b1", "b", "1", index: 0, input: "abc1b1"]
//0:"abc1b1"
//1:"b"
//2:"1"
//index:0
//input:"abc1b1"
//length:3
//__proto__:Array(0)

取消反向引用

括号里面的东西不会被保存下来

var reg=/a(?:b|c)c(\d)\1/;
var str='abc11';
console.log(reg.exec(str));
//(2) ["abc1b", "b", "1", index: 0, input: "abc1b1"]
//0:"abc11"
//1:"1"
//index:0
//input:"abc11"
//length:2
//__proto__:Array(0)

量词

{}

var reg=/\d{3}/;    //匹配三次；
var str='123';
console.log(reg.exec(str));     //返回123；

贪婪匹配

偏向于匹配多的

var reg=/\d{3,5}/;  //匹配3次或者4次或者5次；
var str='12345';
console.log(reg.exec(str));     //返回12345；

吝啬匹配

偏向于匹配少的

var reg=/\d{3,5}?/; //匹配3次或者4次或者5次；
var str='12345';
console.log(reg.exec(str));     //返回123；

匹配多次（吝啬匹配）

匹配成功的前提下，开启尽可能少的匹配

var reg=/\d{3,5}?d/;    //匹配3次或者4次或者5次；
var str='12345d';
console.log(reg.exec(str));     //返回12345d；

var reg=/\d{3,5}??d/;   //第一个？是0次或1次匹配，第二个问号是开启吝啬匹配
var str='12345d';
console.log(reg.exec(str));     //返回5d；

var reg=/\d{3,}/;   //匹配最少3次，上不封顶；
var str='12345';
console.log(reg.exec(str));     //返回12345；

var reg=/\d{0,3}/;  //匹配最多3次；
var str='12345';
console.log(reg.exec(str));     //返回12345；

+

匹配>=1次

var reg=/\d+/;  //匹配>=1次；
var str='12345';
console.log(reg.exec(str));     //返回

?

匹配0次或1次

var reg=/\d?/;  //匹配0次或1次；
var str='12345';
console.log(reg.exec(str));     
//返回["1", index: 0, input: "12345"]
0:"1"
index:0
input:"12345"
length:1

*

匹配>=0次

var reg=/\d*/;  //匹配>=1次；
var str='12345';
console.log(reg.exec(str));     //返回

匹配身份证

var reg=/\d{17}[0-9X]/;

匹配网址

var reg=/(?:http|https):\/\/(?:www\.)?[0-9a-z]{2,}\.com/

边界匹配

^匹配开头$匹配结尾

var reg=/^123\d{2,4}/;  //边界匹配；
var str='123455d';
console.log(reg.exec(str));     //返回

正则

var str='a1b2c3d'
var reg=/\d/;
console.log(str.split(reg));

var str='a1b2c3d'
var reg=/\d/g;
console.log(str.replace(reg,'?'));

var str='a1b2c3d'
var reg=/\d/g;
console.log(str.search(reg));   //返回0；即使用全局g也返回第一个出现的index；

match

不加g

var str='a1b2c3d'
var reg=/\d/;   //不加g和exec的表现一样
console.log(str.match(reg));    //返回['1','1',input:'a1b2c3d'];

加g

var str='a1b2c3d'
var reg=/\d/g;  //加g以数组形式返回所有的匹配到的东西
console.log(str.match(reg));    //返回['1','2','3'];

周末作业

邮箱

var reg=/^[0-9a-z]{6,15}@(?:163|qq|sina|126|139gmail)$/;

电话(座机)

var reg=/^0\d{2,3}-\d{7}$/;

手机

账号

var reg=/^[0-9a-z]{6,20}$/;

密码

var str='huhbgdfo@#';
var reg=/^[0-9a-z./@#$%]{4,17}$/;
console.log(reg.exec(str));

身份证

var reg=/^\d{17}[0-9X]$/;

trim

trimleft

trimright

块级作用域

只要是{}里面的都是块级作用域

独立作用域

let divs=document.querySelectorAll('div');
for(let i=0;i<divs.length;i++){
    divs[i].onclick=function(){
        console.log(i);
    }
}
//此时let是每次循环式都会创建一个独立作用域
    let i=0;    //每次循环，let都会赋值，创建一个独立作用域
    divs[i].onclick=function(){
        console.log(i);
    
    let i=1;
    divs[i].onclick=function(){
        console.log(i);
     
    let i=2;
    divs[i].onclick=function(){
        console.log(i);

扩展运算符

将数组或者字符串解析成用空格隔开的字符串

var arr=[1,2,3];
console.log(...arr);    //返回1 2 3；可以把空格当成逗号

rest参数用法

function fun(a,b,c,...arr){     //...arr是逆向的把4，5，6，7，8转化成数组[4，5，6，7，8]的形式
   console.log(arr);    //返回[4,5,6,7,8]
}
fun(1,2,3,4,5,6,7,8);       //函数传实际参数，前面的一一对应，后面的统一对应...arr

解构赋值

目的是为了赋值

let a,b;
[a,b]=[1,2];    //数组两边模式相同，一一对应赋值；
console.log(a,b);   //返回  1 2；


let a=1,b=2;
[a,b]=[b,a];    //等号两边互换赋值；
console.log(a,b);   //返回  2  1；


let a,b;
[a,b,...arr]=[1,2,3,4]
console.log(a,b,arr);   //返回1  2  [3,4]；

let a,b,c;
[a,b,c]='abc'   //右边不是数组，程序会尽可能的把右边转化成一个数组，然后结构赋值
console.log(a,b,c);

let str1=[1,2,3];
let str2=['a','b','c'];
console.log([...str1,...str2]);     //...str拓展运算符会把str转化成以空格分开的字符串，然后在外面加上[]就变成了一个数组

暂时性死区

{
                    //暂时性死区
                    //暂时性死区
                    //暂时性死区
                    //暂时性死区
  console.log(nub);
  let nub=200;
}

let

不存在预解析，先声明后使用

const

不存在预解析，先声明后使用

es6对象的写法

写法

let name='lisi';
let age=18;
let obj={
    name,
    age,
};
console.log(obj);   //返回{name: "lisi", age: 18}

解构赋值

var a,b;
({name:a,age:b}={name:'lisi',age:18});  //加括号的原因是{}分别代表一个块级作用域，所以需要加上一个（）放在一个块级作用域里面
console.log(a,b);   //返回'lisi'  18;

var {length:len,0:aa}=[1,2,3];
console.log(len,aa);    //返回3 1;

函数扩展

箭头函数

//ES5的写法
var fun=function(){
    
}
//箭头函数写法
var fun=()=>{   //省略function，在（）后面加=>
    
}

//ES5写法
var fun2=function(a){
    return a;
}
console.log(fun1(1),fun2(2));
//ES6写法
var fun1=a=>a;      //与上面的意思是一样的

this指针

箭头函数使用this指针时，由定义函数时创建的环境决定的this指针

    let obj=new Object();
    obj.fun=function(){
        let self=this;
        let div=document.querySelector('div');
        div.onclick=function(){
            console.log(self);
        }
    }
    console.log(obj['fun']);

继承

从一个构造函数继承另一个构造函数

类

子类里面没有this，必须用super（）；super代表了父类的constructor方法，必须先用super（）；才能再用this；

class Animal{
    constructor(name){
        this.name=name;
    }
    aa(){
        console.log(this.name);
    }
}
var obj1=new Animal('lisi');

class Dog extends Animal{
    constructor(box){
        super('lisi');
        this.box=box;
    }
    bb(){
        console.log(this.box);
    }
}

var obj2=new Dog('123');
console.log(obj1);
console.log(obj2);

js笔记

js简介

javascript 布兰登艾奇 创建

ECMAscript

js的作用

变量、常量

基础数据类型

number 数值类型

boolean

null(本身是一个空对象)

undefined

symbol

引用数据类型

function函数

object对象

array数组

运算符

算数运算符

逻辑运算符

比较运算符

函数function

函数定义方式

函数调用

函数参数

函数的返回值

函数的作用域

执行环境

全局环境

局部环境

作用域

回调函数

递归函数

闭包

预解析

垃圾处理机制

函数重载

内置顶层函数

对象

面向对象

以json格式去创建对象

以构造函数的方式去创建对象

通过object的方式创建对象

对象的继承

prototype

new

继承链

this指针

call方法

apply方法

obj=null

delete

宿主对象（浏览器对象）

window对象

内置对象

数组对象

arr.push();

arr.pop();

arr.unshift();

arr.shift();

arr.slice();

arr.splice();

arr.concat();

arr.join();

arr.reverse();

arr.some();

arr.every();

arr.find();

arr.findIndex();

arr.map();

arr.filter();

arr.Foreach();

arr.sort();

arr.includes();

arr.toString();

arr.reduce();

arr.indexOf();

字符串对象

charAt();

charCodeAt();

fromCharCode();

javascript 布兰登艾奇创建