總結(jié)學(xué)過(guò)的JavaScript

入門

js是什么?
js即javascript耍攘，它是一種輕量級(jí)的腳本語(yǔ)言讲竿。運(yùn)行在瀏覽器客戶端.
js引入方式
內(nèi)嵌式：所有js代碼寫(xiě)到一個(gè)<script></script>,此script標(biāo)簽可以放到html的任何地方：

 <script type="text/javascript">
    js代碼
</script>

外鏈?zhǔn)?br> 所有的js代碼寫(xiě)到一個(gè)外部js文件內(nèi)（該文件后綴名為.js）,
在html內(nèi)通過(guò)script上的src屬性引入過(guò)來(lái)。

        <script src="js文件"></script>

事件引入
在開(kāi)始標(biāo)簽上通過(guò)加事件引入js代碼

        <button onclick="js代碼">按鈕</button>

注釋方式
單行注釋：//注釋內(nèi)容
多行注釋：
/*
注釋內(nèi)容
*/

輸出方式
警告框：alert()
向文檔內(nèi)部寫(xiě)入內(nèi)容：document.write(內(nèi)容)
控制臺(tái)日志輸出：console.log()

變量與數(shù)據(jù)類型

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

基本數(shù)據(jù)類型
字符串類型 string
數(shù)字類型 number
布爾類型 Boolean：true / false
null
undefined
復(fù)合（引用）數(shù)據(jù)類型:對(duì)象

變量

變量命名規(guī)范:
1.必須以字母、下劃線、美元符號(hào)$開(kāi)頭，后面以是字母概荷、下劃線、美元符號(hào)或數(shù)字碌燕。
2.變量區(qū)分大小寫(xiě)
3.變量名不能使用關(guān)鍵字和保留字
聲明變量:var 變量名
初始化變量:var 變量名 = 變量值;
如：var a = 10误证；
變量的值可以任何一種類型

運(yùn)算符

賦值運(yùn)算符:= 一個(gè)等號(hào),把右側(cè)的值賦值給左側(cè)變量
算術(shù)運(yùn)算符

加號(hào)+:
1.加法運(yùn)算 加號(hào)兩側(cè)同時(shí)為數(shù)字，進(jìn)行加法運(yùn)算
2.字符拼接 加號(hào)兩側(cè)的任何一側(cè)為字符串修壕，表示字符串拼接 得到結(jié)果是字符串類型

減號(hào)-
乘號(hào)
除號(hào)/
取余%
1.對(duì)應(yīng)算術(shù)運(yùn)算符號(hào)兩側(cè)同時(shí)為數(shù)字時(shí)進(jìn)行對(duì)應(yīng)運(yùn)算愈捅。
2.符號(hào)兩側(cè)的任何一側(cè)為非數(shù)字，運(yùn)算時(shí)會(huì)把該側(cè)強(qiáng)制轉(zhuǎn)換成數(shù)字進(jìn)行運(yùn)算慈鸠，轉(zhuǎn)換成功進(jìn)行對(duì)應(yīng)算術(shù)運(yùn)算改鲫，轉(zhuǎn)換不成功，得到結(jié)果NaN(Not a Number)

+=
-=
*=
/=
%=

例如：

        var a = 10；
        a += 2像棘；  --->a = a + 2

自增與自減
a++
++a
a--
--a

a++
++a
等價(jià)于 a = a + 1

比較運(yùn)算符(關(guān)系運(yùn)算符)
大于 >
小于 <
等于 ==
不等于 !=
大于等于 >=
小于等于 <=
恒等 ===
返回值：布爾值 true / false
邏輯運(yùn)算符
邏輯與 &&

            true && true      --->true
            true && false     --->false
            false && true     --->false
            false && false     --->false

邏輯與&&兩側(cè)同時(shí)為真才為真稽亏，其他情況都為假
邏輯或 ||

            true || true     --->true
            true || false     --->true
            false || true     --->true
            false || false     --->false

邏輯或||兩側(cè)同時(shí)為假才為假，其他情況都為真
邏輯非 !

            !true     -->false
            !false    -->true

非真即假缕题，非假即真
檢測(cè)數(shù)據(jù)類型

    typeof(待檢測(cè)的數(shù)據(jù))
    typeof  待檢測(cè)的數(shù)據(jù)

window對(duì)象的方法

alert()  警告框  無(wú)返回值

confirm()  確認(rèn)對(duì)話框   有返回值   
    返回值：布爾值
  點(diǎn)擊【確認(rèn)】按鈕截歉，返回true，點(diǎn)擊【取消】按鈕烟零，返回false

prompt(提醒文本瘪松，【默認(rèn)】)  提示輸入對(duì)話框
    返回值:字符串 / null
  點(diǎn)擊【確認(rèn)】按鈕，返回輸入框中的值(字符串類型)锨阿，點(diǎn)【取消】按鈕宵睦，返回null

分支
單分支

    if(條件){
語(yǔ)句;
    }
如果條件成立，執(zhí)行語(yǔ)句

雙分支

    if(條件){
語(yǔ)句1;
    }else{
語(yǔ)句2;
    }
  條件成立（true）墅诡，執(zhí)行語(yǔ)句1壳嚎，條件不成立（false）執(zhí)行語(yǔ)句2.

多分支

    if(條件1){
語(yǔ)句1；
}else if(條件2){
語(yǔ)句2末早；
}
...
else{
語(yǔ)句;
}

如果條件1成立(true),執(zhí)行語(yǔ)句1烟馅；否則，看條件2是否成立然磷，如果條件2成立(true),執(zhí)行語(yǔ)句2郑趁，否則....  如果條件1，條件2姿搜，.... 均不成立寡润，執(zhí)行else后的語(yǔ)句

一般常用來(lái)做區(qū)間段的判斷，也可以用來(lái)做等值判斷

等值判斷 只能做等值判斷

    switch(表達(dá)式){
case 常量1:
語(yǔ)句1舅柜；
break;
case 常量2:
語(yǔ)句2悦穿；
break;
....
default:
語(yǔ)句;
    }

  如果表達(dá)式值是常量1，執(zhí)行語(yǔ)句1业踢，否則，看表達(dá)式的值是否是常量2礁扮，如果是常量2知举，執(zhí)行語(yǔ)句2，否則...   如果表達(dá)式的值不是常量1太伊，常量2雇锡，... ,執(zhí)行default后的語(yǔ)句。

注:
常量必須是整數(shù)類型或字符串類型

循環(huán)

while循環(huán)
    while(循環(huán)條件){
循環(huán)操作;
}

循環(huán)條件成立僚焦，執(zhí)行循環(huán)操作(可能被執(zhí)行多次)
特點(diǎn)：先判斷锰提，后執(zhí)行
最少執(zhí)行0次

do-while循環(huán)
    do{
循環(huán)操作;
  }while(循環(huán)條件);

先執(zhí)行一次循環(huán)操作，再判斷循環(huán)條件是否成立，條件成立立肘，再次執(zhí)行循環(huán)操作.
特點(diǎn)：先執(zhí)行，再判斷
不管條件是否成立，至少執(zhí)行一次舅踪。

for循環(huán)
    for(初始化變量 ; 循環(huán)條件 ; 變量更新){
循環(huán)操作;
    }

循環(huán)條件成立绕沈，執(zhí)行循環(huán)操作。
特點(diǎn)：先判斷融蹂，再執(zhí)行旺订。
最少執(zhí)行0次

執(zhí)行順序：初始化變量 ---> 循環(huán)條件(true) ---> 循環(huán)操作 ---> 變量更新

跳轉(zhuǎn)語(yǔ)句
break:一般用在循環(huán)內(nèi),跳出整個(gè)循環(huán) 循環(huán)停止
continue:一般用在循環(huán)內(nèi),跳出當(dāng)前循環(huán) 循環(huán)進(jìn)入下一輪

數(shù)組

增刪改查
    IndexOf(A): 在數(shù)組里面查找A元素所在的下標(biāo) 0開(kāi)始
    push(A): 把A添加的數(shù)組最后面
    pop(): 刪除數(shù)組最后一個(gè)
    unshift(A): 把A添加到數(shù)組的最前面
    shift(): 刪除數(shù)組的第一個(gè)元素
    splice(A,B): 刪除數(shù)組中的B個(gè)元素從A下標(biāo)開(kāi)始
    splice(A,B,C): 刪除數(shù)組中的B個(gè)元素從A下標(biāo)開(kāi)始 再添加C元素

合并
A.concat(B): 把B合并在A的后面

創(chuàng)建數(shù)組

    var arr = new Array()
    var arr = [....]

length 數(shù)組長(zhǎng)度
sort()排序

    function asc(a,b){if(a>b){return 1}esle{return-1}}
    function desc(a,b){if(a>b){return -1}esle{return 1}}

str.split("分隔符") 將字符分割為數(shù)組
arr.join(“連接符”) 將數(shù)組連接為字符串
arr.reverse() 反轉(zhuǎn)

對(duì)象

定義：多個(gè)鍵值對(duì)應(yīng)的集合，鍵是不重復(fù)
創(chuàng)建

    var obj1 = new Object()
    var obj2 = {....}

訪問(wèn)

    obj.key
    obj["key"]

寫(xiě)入

    obj.key=value
    obj["key"]=value

屬性也可以是函數(shù)

    obj.key = function(){};
    訪問(wèn) obj.key();

遍歷

    for(var key of arr){
            console.log("鍵:",key);
            console.log("值:",obj[key])
            }

json

定義：javascript對(duì)象表現(xiàn)方式超燃，本質(zhì)是字符串
前后端傳遞數(shù)據(jù)通常用json字符串格式

值：null区拳，true，false 意乓，Object樱调，String,Array,Number
JSON.stringify(obj) 把obj對(duì)象轉(zhuǎn)換為json字符串
JSON.parse(str) 把字符串轉(zhuǎn)換為javascript對(duì)象

DOM

選擇器

    document.getElementById（id）: 通過(guò)id來(lái)獲取html元素     單個(gè)
    document.getElementsByTageName（tag）: 通過(guò)tag標(biāo)簽名來(lái)獲取html元素（累數(shù)組  多個(gè)）
    document.getElementsByName（class）: 通過(guò)class類名來(lái)獲取html元素（累數(shù)組  多個(gè)）
    document.querySelectorAll（css選擇器）: 通過(guò)css選擇器來(lái)獲取html元素（累數(shù)組  多個(gè)）
    document.querySelectorcss（css選擇器）: 通過(guò)css選擇器來(lái)獲取html元素（單個(gè)）

獲取和改變層的內(nèi)容
獲取

        innerHTML : 獲取元素的內(nèi)容   包括標(biāo)簽
        innerText: 獲取元素的內(nèi)容  過(guò)濾標(biāo)簽

改變

        innerHTML:設(shè)置元素的html內(nèi)容 
        innerText: 設(shè)置元素的文本內(nèi)容

定義
當(dāng)瀏覽器去解析html標(biāo)簽完畢后會(huì)生成一個(gè)dom樹(shù)形構(gòu)
會(huì)有三種類型節(jié)點(diǎn)：
元素類型
文本類型
屬性類型
節(jié)點(diǎn)之間會(huì)用關(guān)系
父子
兄弟
附：

        操作html有三種方式
            html方式
            Dom 核心方式
            xml方式

屬性操作

    getAttribute（屬性名）
    setAttribute（屬性名，屬性值）

創(chuàng)建

    createElement（標(biāo)簽名）

添加

    parent.append（被添加的元素）
    parent.insertBefore(被提交的元素洽瞬，在之前)

刪除

    parent.removeChild(被刪除的元素)

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

    parentElement: 父元素節(jié)點(diǎn)
    Children: 子節(jié)點(diǎn)
    lastElementChild: 最后一個(gè)子節(jié)點(diǎn)
    firstElementChild: 第一個(gè)子節(jié)點(diǎn)
    nextElementSibling:下一個(gè)兄弟子節(jié)點(diǎn)
    previousElementSibling : 上一個(gè)兄弟子節(jié)點(diǎn)

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

    parentNode: 父節(jié)點(diǎn)
    firstChild: 第一個(gè)子節(jié)點(diǎn)
    lastChild : 最后一個(gè)子節(jié)點(diǎn)
    nextElementSibling : 下一個(gè)兄弟子節(jié)點(diǎn)

節(jié)點(diǎn)類型
nodeType:節(jié)點(diǎn)的類型
3 文本節(jié)點(diǎn)
1 元素節(jié)點(diǎn)
nodeValue : 節(jié)點(diǎn)的值
nodeName : 節(jié)點(diǎn)的名稱

table表格操作
table.insertRow(0) :插入行
tr.insertCell（0）:插入列
tr.rowIndex :獲取是第幾行
table.deleteRow（index）: 刪除行
間隔調(diào)用

  setInterval（fn本涕，time）
  clearInterval()

延遲調(diào)用

      setTimeout（fn；time）
      clearTimeout()

事件

    onclick
    focus  獲取焦點(diǎn)
    blur  失去焦點(diǎn)
    submite  提交

window

screen : 屏幕

    width : 寬
    height : 高
    availWidth   可用寬
    availWidth   可用高

history: 歷史記錄

    back（）后退
    forWard（）前進(jìn)
    go（2）前進(jìn)兩步
    go（-3） 后退三步
    length 歷史記錄的長(zhǎng)度

location

    屬性: href地址
    方法
        reload（）刷新
        assign()  跳轉(zhuǎn)  有歷史記錄
        replace（）跳轉(zhuǎn)   沒(méi)有歷史記錄
        location.href="  ";

navigator

useAgent 瀏覽器頭信息 : 可識(shí)別當(dāng)前瀏覽器是什么瀏覽器
open（url伙窃，name菩颖，feature）: 打開(kāi)一個(gè)新窗口

    url  打開(kāi)的地址
    name  窗口名稱
    feature “ width=100，height=100,top=100,left = 100”

js css

行內(nèi)樣式: el.style.fontSize="18px"
傳統(tǒng)class改變: el.className="red",設(shè)置元素的類名為red

classList

    add（）添加
    remove（）刪除
    toggle（）切換

獲取到css最終值

    document.defaultView.getComputedStyle(el,null).css屬性

css中高度獲取

    clientHeight 元素內(nèi)容的高
    offsetHeight 元素內(nèi)容+邊框的高
    scrollHeight 元素內(nèi)容+滾動(dòng)區(qū)域的高

滾動(dòng)距離獲取

    scrollTop 元素滾動(dòng)頂部的距離
    scrollLeft 元素滾動(dòng)左側(cè)的距離

元素在頁(yè)面中個(gè)位置

    el.getBoundingClientRect()
        top : 距瀏覽器可視區(qū)域頂部的距離
        left
        width
        height

el.offsetTop
e.offsetLeft
距離已定位的父親（body）元素距離

事件

事件
事件流:冒泡为障、捕獲
阻止冒泡

        e.stopPropagation()

阻止默認(rèn)事件

        e.preventDefault()

常用事件
鍵盤(pán)

        onkeydown：按下
        onkeyup：彈起
        onkeypress：鍵盤(pán)按下

窗口

        onscroll：滾動(dòng)
        onresize：調(diào)整大小

        onload：加載
        onunload：卸載

鼠標(biāo)

        右鍵菜單：oncontextMenu
        鼠標(biāo)滾動(dòng)：onmousewheel
            wheelDelta
                            向下 -150
                            向上 150

鼠標(biāo)拖放

            ondragstart：開(kāi)始拖動(dòng)
            ondragover：拖放在元素上面
            ondrop：拖放松開(kāi)

        鼠標(biāo)單擊 onclick
        雙擊 ondblclick
        鼠標(biāo)經(jīng)過(guò) onmouseover
        鼠標(biāo)離開(kāi) onmouseout

表單

        onchange表單發(fā)生改變
        onblur 失去焦點(diǎn)
        onfocus 獲取焦點(diǎn)
        onsubmit 提交

事件參數(shù)

    target 目標(biāo)
    srcElement事件元素

x,y

        pageX：相對(duì)于頁(yè)面的偏移
        client：相對(duì)于視口的偏移
        offset：相對(duì)于當(dāng)前元素的偏移
    wheelDelta：鼠標(biāo)滾動(dòng)值（判斷方向）
    keyCode鍵盤(pán)值：是哪個(gè)鍵被按下了
    stopPropagation()：阻止事件冒泡
    preventDefault（）：阻止默認(rèn)事件

拖動(dòng)事件的參數(shù)

        dataTransfer數(shù)據(jù)傳遞器
        setData(k,v)：設(shè)置傳輸數(shù)據(jù)
        getData(k)：獲取傳輸數(shù)據(jù)

事件的綁定

1 html標(biāo)簽 調(diào)用：

    < div onclick="func()">

2.script DOM 1 級(jí)：

  el.onclick=function(e){} 匿名

el.onclick=fun; 函數(shù)名式：

    function fun(){}

3.script DOM2

    el.addEventListener("click",function(){})
    el.addEventListener("click",fun);
    function fun(){}

區(qū)別
標(biāo)簽調(diào)用 可操作性小晦闰， 方便理解
DOM1 后面的調(diào)用與前面代碼一致，會(huì)覆蓋前面
DOM2 最好：
1.控制事件冒泡捕獲
2.可以取消綁定
匿名函數(shù)式 復(fù)用性低
本地存儲(chǔ)

cookie：

        1. 保存在客戶的小量數(shù)據(jù)（2k）
        2. 有時(shí)間限制 會(huì)過(guò)期
        3. 服務(wù)器端可以修改鳍怨，瀏覽器端（前端）也可以修改
        4. 每次發(fā)送http請(qǐng)求都會(huì)攜帶cookie
        5. cookie有域名限制呻右，只能獲取同一個(gè)域名的cookie
        cookie  
            名稱=值：name=value;
            過(guò)期時(shí)間=日期：;expires = d;
            訪問(wèn)路徑=路徑：;path=/;

sessionStorage

localStorage
|本地存儲(chǔ)

        定義
            1. 可以存5M內(nèi)容 （各瀏覽器不一樣）
            2. 不會(huì)過(guò)期，不會(huì)銷毀
            3. 不會(huì)被發(fā)送到服務(wù)器
            4. api完善 操作簡(jiǎn)單
        setItem(name,value)：存儲(chǔ)數(shù)據(jù)
        getItem(name)：獲取本地?cái)?shù)據(jù)
        removeItem(name)：刪除本地?cái)?shù)據(jù)
        clear()：清空當(dāng)前域名所有本地?cái)?shù)據(jù)

類型隱式轉(zhuǎn)換：布爾值

定義:當(dāng)非布爾類型的數(shù)據(jù)要參與布爾運(yùn)算時(shí)候會(huì)被自動(dòng)換行為布爾

    數(shù)字
        0 為false
        非0 為true
    字符串
        空 為false
        非空 為true
    undefined 轉(zhuǎn)為false
    null 轉(zhuǎn)換為false
    數(shù)組 都會(huì)被轉(zhuǎn)換為true
    函數(shù)的參數(shù)有形參鞋喇，沒(méi)有實(shí)參  運(yùn)行的時(shí)候 值為undefined 轉(zhuǎn)布爾為false

類型隱式轉(zhuǎn)換声滥，轉(zhuǎn)字符串
類型隱式轉(zhuǎn)換，轉(zhuǎn)數(shù)字
字符串模板

    定義用 ``
    變量用 ${變量名}

sessionStorage
功能與方法與localStorage一致但是關(guān)閉瀏覽器 數(shù)據(jù)清空
正則RegExp

作用
匹配侦香，捕獲有規(guī)律的字符串
創(chuàng)建

        表達(dá)式  /表達(dá)式/
        實(shí)例化Reg   new RegExp(表達(dá)式,修飾符)

正則修飾符

        g  全局匹配
        i 忽略大小寫(xiě)
        m 多行

正則的方法

        re.test(str)：字符串是否匹配正則
        re.exec(str) ：匹配捕獲匹配到字符串
            匹配到字符串
            index：字符串所在字符的下標(biāo)
            input：字符串
        如果re是全局正則落塑，exec可以循環(huán)執(zhí)行多次 匹配不到返回null

字符串與正則相關(guān)方法
match
非全局：

        匹配到字符串
        index：字符串所在字符的下標(biāo)
        input：字符串

全局

        返回一個(gè)匹配到的字符串?dāng)?shù)組
        replace(正則,新的的字符)：$0-$1

正則元字符

\d 數(shù)字
\w  0-9 a-z A-Z _
\s 空白 空格
\D 非\d  除了數(shù)字
\W  除了\w
\S   除了\s
.   任意字符（除了\n之外）
\ 轉(zhuǎn)義特殊字符
|  或者
()  分組
\n 換行
\b : 匹配邊界 字符串的開(kāi)頭和結(jié)尾 空格的兩邊都是邊界 =>不占用字符串位數(shù)
 ^ : 限定開(kāi)始位置 => 本身不占位置
 $ : 限定結(jié)束位置 => 本身不占位置
[a-z] : 任意字母 []中的表示任意一個(gè)都可以
[^a-z] : 非字母 []中^代表除了
 [abc] : abc三個(gè)字母中的任何一個(gè) [^abc]除了這三個(gè)字母中的任何一個(gè)字符

正則次數(shù)

? 0次或者1次
* 0次或者多次
+ 一次或者多次
{n} : 正好n次；
{n,} : n到多次
{n,m} : n次到m次

boostrap
引入文件

1. bootstrap.css
2. jquery
3.bootstrap.js