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();

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频

javascript 布蘭登艾奇創建