js筆記

js簡介

Js是一種基于事件和對象驅(qū)動(dòng)的解釋性、松散性的語言。

一切皆對象

javascript 布蘭登艾奇 創(chuàng)建

ECMAscript
  • BOM
  • DOM
js的作用
  • 寫網(wǎng)頁的動(dòng)態(tài)效果
  • 寫網(wǎng)頁的游戲
  • 使用cookie、session
  • 實(shí)現(xiàn)交互
  • 發(fā)送表單form
  • 發(fā)送ajax

變量、常量

變量是計(jì)算機(jī)內(nèi)存里的一塊地址單元

  • 變量的命名要有意義

  • 命名不能以數(shù)字開頭,可以用數(shù)字、字母、下劃線、$構(gòu)成。

  • 命名不能以關(guān)鍵字或者是保留字構(gòu)成

  • 命名以首字母大寫或者是以駝峰命名法來命名

  • 嚴(yán)格區(qū)分大小寫

    var NUM=200;
    var num=200;
    

    (以上兩個(gè)變量是不同的)

基礎(chǔ)數(shù)據(jù)類型

number 數(shù)值類型
  • 二進(jìn)制;

  • 八進(jìn)制;

  • 十六進(jìn)制 -0xff ;

  • string

  • \n換行

  • \r回車

  • \t制表符

  • \f換頁

  • \v垂直制表符

  • 模版字符串template

  • NaN not a number 屬于數(shù)值類型

    var num1=5,
    num2=40;
    console.log(`我們班一共是${num1+num2}為學(xué)生,其中女生${num1}位,男生${num2}位`);
    
boolean
  • true
  • false
    • ""
    • 0
    • null
    • undefined
    • false
    • NaN
null(本身是一個(gè)空對象)
  • null占位符空
    • typeof(null)=object;
undefined
  • undefined 未定義
symbol
  • symbol 不重復(fù)的值

引用數(shù)據(jù)類型

function函數(shù)
object對象
array數(shù)組

數(shù)組就是一系列有直接或者是間接聯(lián)系的數(shù)據(jù)的集合

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]);
     }
    
  • 在數(shù)組中選最大值/最小值

    • 打擂臺法

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

      ?

    表達(dá)式(一切有值的)

    • typeof(); 只能用來檢測基礎(chǔ)數(shù)據(jù)類型
  • instanceof 判斷是否是數(shù)組對象Array的實(shí)例

    • 用法:

      var arr=[];
      var result=arr instanceof Array;
      console.log(result);
      

      ?

  • 引用數(shù)據(jù)類型傳址

    function fun(){
        
    }
    var aa=fun;    fun是函數(shù)的引用地址,現(xiàn)在把fun的地址傳給                了aa
    

    ?

運(yùn)算符

算數(shù)運(yùn)算符

  • ?號

    任何數(shù)據(jù)類型和string連接的結(jié)果類型都為string

  • ?號

  • %取余

    整數(shù)取余數(shù)

  • ++nub、nub++、- -nub、nub- -

  • +=、- =、*=、/=、%=

    ?

邏輯運(yùn)算符

  • &&與


    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

  • !非

    ?

比較運(yùn)算符

(ASCII碼------美國標(biāo)準(zhǔn)信息交換碼;

EASCII碼————?dú)W洲擴(kuò)展的;

GB2312碼—————中國制定的;

GBK碼

unicode碼——國際規(guī)定的----UTF-8)

  • 0————48

  • A——————65

  • a—————————97

  • <、>、<=、>=、==、===、!=、!==

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

    ?

    ?

  • 一元運(yùn)算符

    • new用來創(chuàng)建對象
    • delete 刪除對象的屬性
    • typeof 檢測對象屬性
  • 三元運(yùn)算符(寫法格式固定)

    var nub=3>4?200:100;
    console.log(nub); 值為100;
    如果3大于4,則值為200;
    如果3小于4,則值為100;
    
  • 特殊運(yùn)算符

  • 擴(kuò)展運(yùn)算符

    • ...

7.流程控制

  • 順序結(jié)構(gòu)

    • 默認(rèn)是順序結(jié)構(gòu)
  • 條件結(jié)構(gòu)

    • 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("請輸入第一個(gè)數(shù)字");
          num2=prompt("請輸入第二個(gè)數(shù)字");
          fu=prompt("請輸入運(yùn)算符");
      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;
      }
      

      ?

  • 循環(huán)結(jié)構(gòu)

    • for循環(huán)

      • ?
    • while循環(huán)

      var 
      

      ?

    • do while循環(huán)

      ?

團(tuán)隊(duì)

1.確定自己的需求是否和團(tuán)隊(duì)一致

2.提高自己的能力

3.德行

4.信任

函數(shù)function

將實(shí)現(xiàn)某一特定功能的代碼塊,封裝起來以便重復(fù)使用

函數(shù)定義方式

  • 以字面量的方式去定義函數(shù)

    var fun=function(){
        
    }
    
  • 以關(guān)鍵字function的方式定義函數(shù)

    function fun(){
        
    }
    

    ?

函數(shù)調(diào)用

var fun=function(){
    代碼塊;
}
fun();
  • 匿名函數(shù)的運(yùn)行

    (function(){
        alert(1);
    })()
    

    ?

函數(shù)參數(shù)

var fun=function(形式參數(shù),形式參數(shù)){
    代碼塊;
}
fun(實(shí)際參數(shù),實(shí)際參數(shù));
//形式參數(shù)的作用就是為了接收實(shí)際參數(shù);
//形式參數(shù)和實(shí)際參數(shù)的個(gè)數(shù)可以不同
//形式參數(shù)和時(shí)機(jī)蠶食對應(yīng)一一賦值
//沒有傳值的形式參數(shù)默認(rèn)是undefined
//所有的時(shí)機(jī)參數(shù)會被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]);

函數(shù)的返回值

? return;

函數(shù)的作用域

js運(yùn)行依賴于瀏覽器,瀏覽器是js的宿主環(huán)境

執(zhí)行環(huán)境

全局環(huán)境

定義在全局環(huán)境中的變量、函數(shù),稱為全局變量

局部環(huán)境

定義在局部環(huán)境中的變量、函數(shù),稱為局部變量

作用域

變量在某個(gè)范圍內(nèi)有意義

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

結(jié)果為:400
400
400;

  • 塊級作用域

  • 作用域鏈

    當(dāng)函數(shù)在運(yùn)行的時(shí)候會自動(dòng)的創(chuàng)建一個(gè)集合來保存可見范圍內(nèi)所有的變量、對象

回調(diào)函數(shù)

當(dāng)一個(gè)函數(shù)作為另外一個(gè)函數(shù)的參數(shù)的時(shí)候,這個(gè)函數(shù)就是回調(diào)函數(shù)

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

遞歸函數(shù)

函數(shù)自己調(diào)用自己

例子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等于多少

? 斐波那契數(shù)列

? 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:把數(shù)組里面的元素拷貝到一個(gè)新的數(shù)組


閉包

當(dāng)一個(gè)函數(shù)嵌套另外一個(gè)函數(shù),在內(nèi)部函數(shù)中使用了外部的局部變量,在外部去訪問內(nèi)部函數(shù)的時(shí)候,就形成了閉包

閉包的作用:保存局部變量

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

預(yù)解析

在程序真正開始運(yùn)行之前,js會將以var聲明的變量和以function關(guān)鍵字聲明的函數(shù),提前加載到相對應(yīng)的環(huán)境里面

fun();
var fun=function(){
    console.log(1);
}
結(jié)果是報(bào)錯(cuò),因?yàn)関ar聲明的變量會提前解析但為賦值

fun();
function fun(){
    console.log(1);
}   
結(jié)果為1;

垃圾處理機(jī)制

1.當(dāng)一個(gè)函數(shù)運(yùn)行結(jié)束以后,局部變量會被刪除

2.當(dāng)一個(gè)對象不再被引用的時(shí)候,這個(gè)對象將在某一個(gè)時(shí)刻被刪除

函數(shù)重載

內(nèi)置頂層函數(shù)

1.Number

2.String

3.Boolean

4.parseInt( ); 將字符串轉(zhuǎn)化為整數(shù)(必須是數(shù)字開頭的)

5.parseFloat( ); 將字符串轉(zhuǎn)化為小數(shù)(必須是數(shù)字開頭的)

6.isNaN(); 是 不是一個(gè)數(shù)字

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

null==undefined 為真

null==false 為假

對象

面向?qū)ο?/h2>

面向?qū)ο蟮木幊谭绞?/p>

研究的一切事物都是對象

class 類是對象的抽象

? 對象是類的實(shí)例化;

鍵值對

以json格式去創(chuàng)建對象

var obj={
    name:
}
  • 屬性的訪問方式

    • obj.name
    • obj['name']
  • 屬性的定義方式

以構(gòu)造函數(shù)的方式去創(chuàng)建對象

提供對象的初始化

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

結(jié)果
person {name: "xiaoming", age: 18}
person {name: "xiaoming", age: 18}

通過object的方式創(chuàng)建對象

任何一個(gè)對象都可以看作是object方式創(chuàng)建而來的

var obj=new Object();

instanceof 用來檢測某一個(gè)對象是否是某一個(gè)構(gòu)造函數(shù)的實(shí)例化

對象的繼承

prototype

每一個(gè)函數(shù)都有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 發(fā)生了三件事

創(chuàng)建一個(gè)空對象 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指針

誰調(diào)用這個(gè)函數(shù),this指向誰

call方法

每個(gè)call里面的第一個(gè)參數(shù)就決定了this指針指向誰

fun.apply(obj,'lisi',18);      //第一個(gè)參數(shù):實(shí)例化對象;第二、三個(gè)參數(shù):傳值

apply方法

每個(gè)call里面的第一個(gè)參數(shù)就決定了this指針指向誰,第二個(gè)參數(shù)以后的傳值方式與call方法不同

fun.apply(obj,['lisi',18]);     //第一個(gè)參數(shù):實(shí)例化對象;第二、三個(gè)參數(shù):傳值(傳值時(shí)需要加方括號)

obj=null

刪除一個(gè)對象

obj=null;

delete

用來刪除某一個(gè)對象的屬性

delete obj.name;

宿主對象(瀏覽器對象)

window對象

內(nèi)置對象

  • Object
  • Function
  • Array
  • String
  • RegExp 正則表達(dá)式
  • Date 時(shí)間
  • Math 數(shù)學(xué)

數(shù)組對象

arr.push();

push()——在數(shù)組的尾部添加一個(gè)或多個(gè)元素,并返回?cái)?shù)組新的長度,修改原始數(shù)組

arr.pop();

pop()——在數(shù)組的尾部刪除一個(gè)元素,并返回彈出的元素值,修改原始數(shù)組

  • 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()——在數(shù)組的頭部添加,返回新的數(shù)組長度,修改原始數(shù)組

arr.shift();

shift()——在數(shù)組的頭部刪除,返回刪除的數(shù)組元素,修改原始數(shù)組

  • 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()——對數(shù)組進(jìn)行分離,并返回一個(gè)子數(shù)組。不修改原始數(shù)組

  • 第1個(gè)參數(shù)表示起始索引

  • 第2個(gè)參數(shù)表示結(jié)束索引(返回?cái)?shù)組不包含結(jié)束索引對應(yīng)的元素值)

    ?

    如果沒有第2個(gè)參數(shù),則表示取值到最后一個(gè)索引。正值表示正向索引,負(fù)值表示反向索引

    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],反向索引,從倒數(shù)第3個(gè)到倒數(shù)第1個(gè)元素
    
arr.splice();

splice()——從數(shù)組中刪除和插入一些元素。修改原始數(shù)組

  • 前2個(gè)參數(shù)指定了要?jiǎng)h除的數(shù)組元素
    • 第1個(gè)參數(shù)表示需要?jiǎng)h除元素的起始索引值
    • 第2個(gè)參數(shù)表示需要?jiǎng)h除的個(gè)數(shù)
      如果省略則表示刪除起始索引后的所有元素
  • 后面的參數(shù)指定需要插入的元素
  • 返回值是刪除的元素組成的數(shù)組
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()——創(chuàng)建并返回一個(gè)新數(shù)組。不修改原始數(shù)組

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",原始值不發(fā)生改變
arr.join();

join()——將數(shù)組中的所有元素轉(zhuǎn)化為字符串并連接在一起,返回最后生成的字符串。不修改原始數(shù)組

let a = [1, 2, 3];
a.join();               // => "1,2,3",默認(rèn)使用","隔開元素
a.join("&");            // => "1&2&3",指定分隔符
arr.reverse();

reverse()——將數(shù)組中的元素逆序,返回逆序后的數(shù)組。修改原始數(shù)組

let a = [1, 2, 3];
a.reverse().join();     // => "3,2,1",此時(shí)的a是[3, 2, 1]    
arr.some();

some()——方法為數(shù)組的每個(gè)元素調(diào)用指定的函數(shù),并返回true或false。當(dāng)有一個(gè)調(diào)用返回true時(shí),some()就會返回true;只有當(dāng)所有調(diào)用都是false時(shí),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,不是所有的值都是偶數(shù)
a.some(function(x) { return x % 2 === 0; }) // => true,a含有偶數(shù)值
arr.every();

every()——方法為數(shù)組的每個(gè)元素調(diào)用指定的函數(shù),并返回true或false。當(dāng)有一個(gè)調(diào)用返回false時(shí),every()就會返回false;只有當(dāng)所有調(diào)用都是true時(shí),every()才返回true

arr.find();
arr.findIndex();
arr.map();

map()——方法為數(shù)組的每個(gè)元素調(diào)用指定的函數(shù),并返回一個(gè)新數(shù)組,返回什么值,形成什么樣的集合;

  • 注意:map()返回的是新數(shù)組,它不修改原始數(shù)組

    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()——方法為數(shù)組的每個(gè)元素調(diào)用指定的函數(shù),并返回篩選出的新數(shù)組,對原數(shù)組沒有影響

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

forEach()——方法從頭至尾遍歷數(shù)組,為每個(gè)元素調(diào)用指定的函數(shù)

  • forEach()沒有像for循環(huán)中使用的相應(yīng)的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 將數(shù)組的元素排序
arr.includes();
arr.toString();

toString()——返回一個(gè)字符串

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

?

arr.reduce();

reduce()——對數(shù)組的元素對調(diào)用指定的函數(shù),并返回最終生成的單個(gè)值

  • 第1個(gè)參數(shù)指定調(diào)用的函數(shù)
  • 第2個(gè)參數(shù)為可選參數(shù),指定傳遞給函數(shù)的初始值,當(dāng)不指定值時(shí),使用數(shù)組的第1個(gè)元素作為初始值
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()——搜索整個(gè)數(shù)組中給定值的元素,返回找到的第1個(gè)元素的索引,如果找不到,則返回-1

  • 第1個(gè)參數(shù)為需要搜索的值

  • 第2個(gè)參數(shù)是可選的,指定開始搜索的索引位置

    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 位的單個(gè)字符。(從 0 開始計(jì)數(shù))
charCodeAt();
  • charCodeAt(n) —— 返回該字符串第 n 位的單個(gè)字符的 ASCII 碼
fromCharCode();
indexOf();
  • indexOf() —— 返回查找到的位置
    用法:string_1.indexOf(string_2,n); 從字符串 string_1 的第 n 位開始搜索,查找 string_2,返回查找到的位置,未找到,返回 -1 ( n 可以不填,默認(rèn)從第 0 位開始查找)
lastIndexOf();
  • lastIndexOf() —— 跟 indexOf() 相似(不過是從后邊開始找)
split();
  • split —— 將字符串按照指定的分隔符分離開,返回一個(gè)數(shù)組

slice();
substr();
  • substr(n,x) —— 返回原字符串從 n 位置開始,長度為 x 的子串

substring();
  • substring(n,m) —— 返回原字符串從 n 位置到 m 位置的子串,不支持負(fù)數(shù)

concat();
endsWith();
includes();
replace();
startsWith();
toUpperCase();
  • toUpperCase() —— 返回把原字符串所有小寫字母都變成大寫的字符串

toLowerCase();
  • toLowerCase() —— 返回把原字符串所有大寫字母都變成小寫的字符串

trim();
trimLeft();
trimRight();

?

數(shù)學(xué)對象

Math.abs();

返回 x 的絕對值

Math.ceil();

返回大于等于 x 的最小整數(shù)

Math.cos();

返回 x 的余弦

Math.sin();

返回 x 的正弦

Math.tan();

返回 x 的正切

Math.floor();

返回小于等于 x 的最大整數(shù)

Math.max();
  • max(a, b) —— 返回 a, b 中較大的數(shù)

Math.min();
  • min(a, b) —— 返回 a, b 中較小的數(shù)

Math.PI();
Math.pow();
  • pow(n, m) —— 返回 n 的 m 次冪 (nm)

    ?

Math.random();
  • random() —— 返回大于 0 小于 1 的一個(gè)隨機(jī)數(shù)

Math.round();
  • round(x) —— 返回 x 四舍五入后的值

Math.sqrt();
  • sqrt(x) —— 返回 x 的平方根

Math.trunc();

干什么的,怎么用(參數(shù)),返回值是什么,對原對象有無影響

console.dir();     //可以查看這個(gè)對象的結(jié)構(gòu);
console.log();     //可以查看這個(gè)對象的輸出值;

獲取屏幕寬度、高度

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

遞歸拷貝

拷貝數(shù)組

淺拷貝
var arr=[1,2,33,[1,6,8]];       //只拷貝[1,2,33,[]]   到二維以上的數(shù)組里面的內(nèi)容都無法拷貝到
深拷貝
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);           //結(jié)果為[1,2,['a','b']]

拷貝對象

對象的遍歷

Bom

瀏覽器對象模型

window 頂層對象

location 地址欄

history 歷史記錄

document 文檔

window

confirm

彈出一個(gè)是否確定的彈框

window.screen

獲取屏幕的寬高

window.screen.width 獲取屏幕的寬

window.screen.height 獲取屏幕的高

window方法

時(shí)間函數(shù)

setInterval
setInterval(function(){     //回調(diào)函數(shù)
    console.log(1);
},1000);        //1000的單位為毫秒    1秒==1000毫秒
clearInterval
setTimeout();
clearTimeout();

location地址欄

Tcp/Ip協(xié)議:頂層協(xié)議

http://應(yīng)用層協(xié)議

http:// www.baidu.com :80 /aa/bb/index.html ?查詢字符串

協(xié)議 主機(jī)地址 端口號port 頁面路徑 查詢字符串 錨地址

protocol hostname host主機(jī)+端口 pathname search hash

網(wǎng)絡(luò)傳輸協(xié)議

超文本傳輸協(xié)議

location屬性

location方法

reload();

重載

reload(true);加載所有緩存

reload(false);不加載緩存

assign();

加載到頁面 會留下歷史記錄

assign();

assign(false);

replace();

替換到頁面 不會留下歷史記錄

history歷史記錄

history屬性

history方法

history.forword

轉(zhuǎn)向下一個(gè)頁面

與瀏覽器的點(diǎn)擊向前按鈕功能一樣

history.back

轉(zhuǎn)向上一個(gè)頁面

與瀏覽器的點(diǎn)擊后退按鈕功能一樣

history.go(0);

當(dāng)前頁面刷新

Dom

文檔對象模型

Document

Document方法

Document.title

Document.documentElement.clientWidth

Document.documentElement.clientHeight

元素的獲取方法(舊)

Document.getElementsByTagName();

收到的是一個(gè)集合

Document.getElementsByClassName();

收到的是一個(gè)集合

在IE瀏覽器里面不支持ByClassName獲取類名的方式

Document.getElementById();

收到的是一個(gè)元素

只能用document調(diào)用

Document.getElementsByName();

收到的是一個(gè)集合

只能用document調(diào)用

元素的獲取方法(新)

document.querySelector();

默認(rèn)是選取元素的第一個(gè)

document.querySelectorAll();

可以選取到這個(gè)元素所有的

事件(初試)

鼠標(biāo)

click;

dbclick;

mousemove

mousedown

mouseup

mouseover

mouseout

mouseenter

mouseleave

鍵盤

keydown

keypress 鍵盤按住

keyup

表單元素

blur 失去焦點(diǎn)

focus 獲取焦點(diǎn)

submit 提交

reset 重置

change 改變

dom操作

對元素內(nèi)容

innerHTML可以獲取到標(biāo)簽對

innerText只獲取文本

對元素樣式css

操作屬性

getAttribute('')

標(biāo)準(zhǔn)屬性:obj.屬性

非標(biāo)準(zhǔn)屬性:obj.getAttribute('');可以獲取到標(biāo)簽的任何屬性

<div><>     //
setAttribute('');

獲取css樣式屬性

getComputedStyle(非行內(nèi)樣式)
getComputedStyle(div,null).height   //對IE瀏覽器不兼容
getCurrentStyle(非行內(nèi)樣式)
getCurrentStyle.height  //兼容IE瀏覽器

操作樣式(行內(nèi)樣式)

設(shè)置單個(gè)樣式(行內(nèi)樣式)

obj.style.標(biāo)準(zhǔn)屬性='height:200px';

設(shè)置多個(gè)樣式(行內(nèi)樣式)

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

對元素html屬性

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

this.classList.toggle(); 如果有就增加,如果沒有就刪除

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

獲取元素

獲取元素在頁面中所占寬、高

offsetWidth

不包括margin

如果這個(gè)元素是display:none;那么不會被獲取到

offsetHeight

不包括margin

獲取元素在頁面中實(shí)際的位置

offsetLeft

在display:fixed時(shí),距離當(dāng)前窗口的位置

如果沒有fixed時(shí),是遵照body定位

計(jì)算的是距離有定位屬性的上級元素的距離,如果沒有定位屬性的父元素,計(jì)算的是距離body的值

offsetTop

在display:fixed時(shí),距離當(dāng)前窗口的位置

如果沒有fixed時(shí),是遵照body定位

計(jì)算的是距離有定位屬性的上級元素的距離,如果沒有定位屬性的父元素,計(jì)算的是距離body的值

獲取瀏覽器滾動(dòng)條

document.body.scrollTop 谷歌

document.documentElement.scrollTop 火狐

值為數(shù)字

調(diào)錯(cuò)

先看控制臺

如果有錯(cuò)是語法錯(cuò)誤

對象的某個(gè)屬性用的不正確

element

想要添加的類名、style是否添加上,如果沒有添加上,就找個(gè)添加的這條語句

每行調(diào)錯(cuò)

從第一行代碼,輸入每個(gè)表達(dá)式的值

節(jié)點(diǎn)

html文檔中,所有的構(gòu)成部分都是節(jié)點(diǎn),沒有個(gè)節(jié)點(diǎn)和節(jié)點(diǎn)之間的關(guān)系構(gòu)成了整個(gè)html文檔樹模型

nodeName

nodeType

nodeValue

document節(jié)點(diǎn)

nodeName #document

nodeType 9

nodeValue null

文本節(jié)點(diǎn)

nodeName #text

nodeType 3

nodeValue 文本的內(nèi)容

元素節(jié)點(diǎn)

nodeName 大寫的標(biāo)簽名

nodeType 1

nodeValue null

注釋節(jié)點(diǎn)

nodeName #comment

nodeType 8

nodeValue 注釋的內(nèi)容

屬性節(jié)點(diǎn)

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

nodeType 2

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

節(jié)點(diǎn)關(guān)系

同輩關(guān)系

div.previousSibling;    //上一個(gè)兄弟節(jié)點(diǎn)
div.previousElementSibling;     //上一個(gè)元素節(jié)點(diǎn)
div.nextSibling;    //下一個(gè)兄弟節(jié)點(diǎn)
div.nextElementSibling;     //下一個(gè)元素節(jié)點(diǎn)

父輩關(guān)系

div.childNodes;     //所有的節(jié)點(diǎn)
div.children;       //所有的元素節(jié)點(diǎn)
div.parantNode;     //父輩節(jié)點(diǎn)

節(jié)點(diǎn)的操作

節(jié)點(diǎn)的創(chuàng)建

document.createElement('div');

節(jié)點(diǎn)的增加

body.appendchild();     //插入到元素之后
insertBefore(newobj,oldobj);    //插入到元素之前

節(jié)點(diǎn)的刪除

par.removeChild();

節(jié)點(diǎn)的復(fù)制

clone=div.cloneNode(true);  //克隆的元素存在內(nèi)存中,需要在單獨(dú)對克隆的節(jié)點(diǎn)添加到其他節(jié)點(diǎn)上,才能在頁面中顯示

事件

事件源

事件發(fā)生在誰的身上,誰就是事件源

事件對象

事件發(fā)生的時(shí)候,在自動(dòng)創(chuàng)建的一個(gè)對象,用來保存事件發(fā)生時(shí)候的所有信息

    div.onclick=function(e,way='1'){
        console.log(e,way);
    }   //  e是默認(rèn)的事件傳參;

? altKey; 驗(yàn)證alt是否被按下;

? cancelBubble;

? clientX; 鼠標(biāo)事件的距離瀏覽器窗口的X距離

? clientY; 鼠標(biāo)事件的距離瀏覽器窗口的Y距離

? ctrlKey; 驗(yàn)證ctrl是否被按下;

? detail;

? offsetX; 鼠標(biāo)事件的距離當(dāng)前事件源的X距離

? offsetY; 鼠標(biāo)事件的距離當(dāng)前事件源的Y距離

? pageX; 鼠標(biāo)事件的距離body的X軸距離

? pageY; 鼠標(biāo)事件的距離body的Y軸距離

? screenX; 鼠標(biāo)事件的距離屏幕的X距離

? screenY; 鼠標(biāo)事件的距離屏幕的Y距離

? srcElement;

? shiftKey; 驗(yàn)證shift是否被按下;

? target;

? type; 事件類型;

? which;

?

? ASCII碼值:左37;上38;右39;下40;空格32;回車13;

事件類型

用戶的行為

mousewheel

用事件監(jiān)聽的方式添加

transitionend

用事件監(jiān)聽的方式添加


animationend

用事件監(jiān)聽的方式添加

wheelDeltaX

wheelDeltaY

事件處理程序

事件發(fā)生之后的響應(yīng)

事件的添加

obj.addEventListener

    function fun1(){
        alert(1);
    }
    function fun2(){
        alert(2);
    }
    obj.addEventListener('click',fun1,false);
    obj.addEventListener('click',fun2,false);
}
//可以給一個(gè)對象添加多個(gè)事件;

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

事件對象

事件發(fā)生時(shí)自動(dòng)創(chuàng)建的一個(gè)對象用來接收事件發(fā)生時(shí)的所有信息

e||window.event

事件流

當(dāng)一個(gè)事件觸發(fā)的時(shí)候,當(dāng)前元素的父元素乃至整個(gè)頁面,都會以一定的順序來響應(yīng)整個(gè)事件。響應(yīng)的順序叫做事件流。

2、先向下進(jìn)行捕獲,然后再向上冒泡

冒泡型事件流

從當(dāng)前元素到根元素一級一級往上出發(fā),

除了mouseenter、mouseleave不會觸發(fā)事件流

捕獲型事件流

從根元素向下捕獲

阻止事件流

阻止事件流是阻止事件的傳遞

if(e.stopPropagation){
        e.stopPropagation();    //兼容現(xiàn)代瀏覽器
   }else{
        e.cancelBubble=true;       //兼容IE
   }

事件委托

1、新添加進(jìn)來的元素,需要添加事件的時(shí)候

2、做事件優(yōu)化的時(shí)候

3、使用ajax的時(shí)候

目標(biāo)事件源:真正觸發(fā)事件的元素

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";
    }
    //目標(biāo)事件源,真正觸發(fā)事件的元素
    document.body.onclick=function(e){
        var obj=e.target;
        if(obj.tagName=="DIV"){
            obj.style.backgroundColor='blue'
        }
    }
}

contentidetable="true";

時(shí)間對象

MGT時(shí)間

格林尼治天文臺每天發(fā)布的時(shí)間

UTC時(shí)間

世界協(xié)調(diào)時(shí)間,由原子鐘計(jì)時(shí);

計(jì)算機(jī)元年時(shí)間:1970年1月1日0時(shí)0分0秒,1970年之前為負(fù),1970年之后為正

當(dāng)前時(shí)間計(jì)算的是當(dāng)前時(shí)間距離1970年的毫秒數(shù)

使用實(shí)例化時(shí)間

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);  //月份的設(shè)置從0-11

getTime();

獲取當(dāng)前時(shí)間距離1970年的毫秒數(shù)

getFullyear();

獲取4位數(shù)的年份

getMonth();

getDay();

0是周日

getHours();

getIMinutes();

getSecond();

getMillisecond();

cookie(本地存儲)

是一種字符串,以鍵值對的結(jié)構(gòu)形式出現(xiàn)

只允許在用戶端里面存儲4k的大小

1bit=2

1Byte=8Bit

1K=1024B

1M=1024KB

1G=1024MB

1T=1024G

同域原則

不能跨瀏覽器訪問

cookie的訪問

document.cookie

cookie的設(shè)置

臨時(shí)性的cookie

瀏覽器關(guān)閉時(shí),自動(dòng)被刪除;

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大小

同域原則

不能跨瀏覽器

和時(shí)間沒有關(guān)系

存儲不安全

值為對象

只能存儲字符串

clear();

getItem();

setItem("name","lisi");

sessionStroage(會話級存儲)

會話(窗口)關(guān)閉就刪除了

存儲大小為5-10M大小

同域原則

不能跨瀏覽器

和時(shí)間沒有關(guān)系

存儲不安全

JSON.stringify();

將數(shù)組轉(zhuǎn)化為字符串

JSON.parse

將字符串轉(zhuǎn)化為數(shù)組

正則表達(dá)式RegExp()

正則是用來檢測某個(gè)字符串是否符合語法規(guī)范的語言

表單驗(yàn)證

信息過濾

信息檢索

定義方式

var reg=/不能有數(shù)字/;
var r=new RegExp();

方法

exec();

輸出為一個(gè)數(shù)組對象

結(jié)構(gòu)為[0:,index:,input:]

0 代表匹配到的字符;

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

input 代表檢測的字符串

test();

檢測是否符合要求,符合為true,不符合為false

模式修正符

i

不區(qū)分大小寫

var reg=/ /i;   //i代表不區(qū)分大小寫
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屬性

原子

構(gòu)成正則表達(dá)式最小的單位

一個(gè)原子只能匹配一個(gè)字符

a-z

0-9

字符,.@#¥%

\d 用來匹配0-9的數(shù)字

\D 用來匹配除了0-9的數(shù)字

\w 用來匹配數(shù)字字母下劃線0-9 a-z A-Z

\W 用來匹配除了數(shù)字字母下劃線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 ^表示!非

轉(zhuǎn)義字符

\

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

|

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

原子分組

當(dāng)形成原子分組的時(shí)候,括號里面匹配到的東西就會被壓入內(nèi)存(棧區(qū)),已備使用

反向引用
var reg=/a(b|c)c(\d)\1/;
var str='abc1b';
console.log(reg.exec(str));     //返回值為abc1b,反向引用只對括號里保存下來的*值*進(jìn)行匹配。
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/;   //第一個(gè)?是0次或1次匹配,第二個(gè)問號是開啟吝嗇匹配
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]/;
匹配網(wǎng)址
var reg=/(?:http|https):\/\/(?:www\.)?[0-9a-z]{2,}\.com/
邊界匹配

^匹配開頭$匹配結(jié)尾

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也返回第一個(gè)出現(xiàn)的index;

match

不加g

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

加g

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

周末作業(yè)

郵箱

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

電話(座機(jī))

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

手機(jī)

賬號

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

塊級作用域

只要是{}里面的都是塊級作用域

獨(dú)立作用域

let divs=document.querySelectorAll('div');
for(let i=0;i<divs.length;i++){
    divs[i].onclick=function(){
        console.log(i);
    }
}
//此時(shí)let是每次循環(huán)式都會創(chuàng)建一個(gè)獨(dú)立作用域
    let i=0;    //每次循環(huán),let都會賦值,創(chuàng)建一個(gè)獨(dú)立作用域
    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);

擴(kuò)展運(yùn)算符

數(shù)組或者字符串解析成用空格隔開的字符串

var arr=[1,2,3];
console.log(...arr);    //返回1 2 3;可以把空格當(dāng)成逗號

rest參數(shù)用法

function fun(a,b,c,...arr){     //...arr是逆向的把4,5,6,7,8轉(zhuǎn)化成數(shù)組[4,5,6,7,8]的形式
   console.log(arr);    //返回[4,5,6,7,8]
}
fun(1,2,3,4,5,6,7,8);       //函數(shù)傳實(shí)際參數(shù),前面的一一對應(yīng),后面的統(tǒng)一對應(yīng)...arr

解構(gòu)賦值

目的是為了賦值

let a,b;
[a,b]=[1,2];    //數(shù)組兩邊模式相同,一一對應(yīng)賦值;
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'   //右邊不是數(shù)組,程序會盡可能的把右邊轉(zhuǎn)化成一個(gè)數(shù)組,然后結(jié)構(gòu)賦值
console.log(a,b,c);

let str1=[1,2,3];
let str2=['a','b','c'];
console.log([...str1,...str2]);     //...str拓展運(yùn)算符會把str轉(zhuǎn)化成以空格分開的字符串,然后在外面加上[]就變成了一個(gè)數(shù)組

暫時(shí)性死區(qū)

{
                    //暫時(shí)性死區(qū)
                    //暫時(shí)性死區(qū)
                    //暫時(shí)性死區(qū)
                    //暫時(shí)性死區(qū)
  console.log(nub);
  let nub=200;
}

let

不存在預(yù)解析,先聲明后使用

const

不存在預(yù)解析,先聲明后使用

es6對象的寫法

寫法

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

解構(gòu)賦值

var a,b;
({name:a,age:b}={name:'lisi',age:18});  //加括號的原因是{}分別代表一個(gè)塊級作用域,所以需要加上一個(gè)()放在一個(gè)塊級作用域里面
console.log(a,b);   //返回'lisi'  18;
var {length:len,0:aa}=[1,2,3];
console.log(len,aa);    //返回3 1;

函數(shù)擴(kuò)展

箭頭函數(shù)

//ES5的寫法
var fun=function(){
    
}
//箭頭函數(shù)寫法
var fun=()=>{   //省略function,在()后面加=>
    
}
//ES5寫法
var fun2=function(a){
    return a;
}
console.log(fun1(1),fun2(2));
//ES6寫法
var fun1=a=>a;      //與上面的意思是一樣的

this指針

箭頭函數(shù)使用this指針時(shí),由定義函數(shù)時(shí)創(chuàng)建的環(huán)境決定的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']);

繼承

從一個(gè)構(gòu)造函數(shù)繼承另一個(gè)構(gòu)造函數(shù)

子類里面沒有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);

移動(dòng)端事件

touchstart

touchmove

touchend

touches

記錄點(diǎn)擊屏幕的數(shù)值信息

targetTouches

記錄點(diǎn)擊在元素身上的數(shù)值信息

changedTouches

自從上一次時(shí)間觸發(fā)以后,記錄發(fā)生在元素身上的數(shù)值信息

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 個(gè)人入門學(xué)習(xí)用筆記、不過多作為參考依據(jù)。如有錯(cuò)誤歡迎斧正 目錄 簡書好像不支持錨點(diǎn)、復(fù)制搜索(反正也是寫給我自己看...
    kirito_song閱讀 2,654評論 1 37
  • 1、isArray方法Array.isArray方法用來判斷一個(gè)值是否為數(shù)組。var a = [1,2];type...
    秋秋秋web閱讀 291評論 0 0
  • 由于最近都在freecodecamp上刷代碼,運(yùn)用了很多JavaScript數(shù)組的方法,因此做了一份關(guān)于JavaS...
    2bc5f46e925b閱讀 2,203評論 0 16
  • 準(zhǔn)備做一件事情,還沒開始,就買了很多裝備。于是,你、我,成了裝備黨。 曬一些我的實(shí)用小裝備。 這兩個(gè)是我在閱讀時(shí),...
    商小茉閱讀 3,332評論 5 3
  • 出奇制勝的關(guān)鍵詞——智徑 一,找名師 1,模仿,在自己的領(lǐng)域中盡量的先去模仿比自己技能高的人,打造自己的基本技能。...
    瀟小姐的書影天堂閱讀 291評論 0 1

友情鏈接更多精彩內(nèi)容