Javascript BOM DOM編程

#BOM 和 DOM
#####瀏覽器內核：
①渲染引擎：webkit;
② JS引擎：V8引擎（谷歌）
DOM瀏覽器：對DOM的支持高於IE（包括谷歌）。
###怎麼在瀏覽器裏面寫JS代碼:
    方法1：外聯JS
    <script src="路徑 "></script>   能夠引多個JS，從上往下指行。

    方法2：內部書寫
    <script>
    let a = 100;       // 這個a是全局變量，整個網頁均可以通用。
    consle.log(a);        // 100
    </script>

    方法3：內嵌  內嵌做用域全局儘可能避免
    <a  herf = " javasript:console.log(內嵌JS) " 執行JS</a>      console.log(內嵌JS)它是一個代碼塊。
    <input type = "button" value onclick = "console.log('click')">   console.log('click') 它是一個代碼塊。


    <script>
     window.onload = function (){            //後面是的會覆蓋前面的
     let a = 100;                   // 局部的a ,定義在函數裏的變量就是局部的。
     console.log("a",a)
    }
    </script>

    window.addEventListener  ("load",function(){});    不會覆蓋前面的。


##BOM
    window表明一個窗口
    window 對象有哪些屬性和方法：
    BOM ：Bowser(瀏覽器) Object（對象） Moder （模式）
    屬性：
    innerWidth    innerheight       // 可視區域的寬度
    outerWidth   outerHeight)      //瀏覽器的寬和高

     window.screenX      window.screenY    // screenX  窗口至關於屏幕的X軸；screenY窗口至關於屏幕的Y軸   相似雪碧圖

    （window裏面的屬性：就是window.屬性）

    方法：alert("警告")；  若是出現框，若是不關掉，會阻止代碼，下面的代碼不會執行。
    let  flag = confirm ("確認")；
        console.log(flag);
    let value = prompt("請輸入：")
     console.log(value);

    時間函數：異步通常用在動畫中
    1.    setTimeout()給定一個時間，等時間時間到了以後，執行且執行一次這個方法。
    例：let timeId = setTimeout ( function(){
    console.log("timeout");
    },200);
    cleartimeout(timeoutId);

    2. setInterval()   每隔多長時間後，不斷的間隔執行方法。
    let  count  =0;
    let intervalId = setInterval( function(){
        count++;
        if(count>5){
        clearInterval(inderId)    //用來結束循環
        }
        console.log("interval",count);
    }

    隊例：先進先出
    open（""）  打開一個新窗口，裏面寫地址，彈出一個標籤頁。
    open（"地址","name","width=0,height=30" ）; 子頁面的寬高

    Screen 對象屬性
    screen.availWidth      screen.availHeight
        //電腦屏幕的寬度和高度  ，高度不加上下邊的任務欄  。"screen.avail:",  能夠不寫它只是在終端顯示出來，方便咱們知道它是那個對象的屬性。
    screen.width    screen.height         /電腦屏幕的總寬度和總高度   。高度要加上下邊的任務欄

    location 對象屬性（經過location能夠訪問網站的任何一部分）
    location.herf = "http:"   ";   跳轉到指定頁面

    http://www.baidu.com:80/index.com/#xx?name:xxx

#DOM
##docunment(文檔)Object（對象）Moder（模式）
DOM(文檔樹) ： html根節點  {head , body是子節點}(head , body裏面的元素是子節點)


##點擊事件  格式： n.onclick= function(){ }

DOM節點分三種：

                                 nodeType       nodeName       nodeValue

                1.  元素節點 :       1          元素名           null
                2.  屬性節點：      2          屬性名           屬性值
                3.  文本節點：       3          #text           文本內容    例：<h1> 標題 <h1>
##獲取節點的方法：（方法要調用）
1.  getElementById("")；   (獲取節點)
2.  getElementsByTagName("元素名")；    根據元素獲取多個節點（集合、數組）
3.  getElementsByName("元素名")；    根據內容屬性獲取
4.  doucument.querySelector("css選擇器")；       根據css的選擇器獲取一個節點（只得一個，第一個節點）
5.  doucument.querySelectorAll("css選擇器")；       根據css的選擇器獲取所有節點
##屬性用來遍歷節點：（.屬性）
1. firstChild第一個節點
2. lastChild 最後一個節點
3. nextSibing 下一個節點（兄弟查找）
4. previousSibing上一個節點（兄弟查找）
5. parentNale 父節點
6. childNodes全部的節點
##建立節點
建立元素節點：createElement("")；
建立屬性節點：createAttribute("")；   也能夠直接用格式：newNode.id = " ";
建立文本節點：createTextNode("")；
##DOM 的方法：對整個節點的增改查刪  進行操做。
添加：n.appendChild( )； - 添加新的子節點（元素）   （）括號裏寫新節點
插入父節點：n.insertBefore(新節點，舊節點 )；   新節點會插入到舊節點的前面
刪除：n.removeChild()；  刪除子節點（元素）  例：(n.lastChild)從最後一個開始刪除
修改節點（替換節點）：  n.replaceChild();   括號裏面填(newnode新節點，n.firstChild.nexSibing舊節點)；首先要先建立一個新的節點。
##innerHTML屬性  ：能夠獲取或改變任意HTML元素，包括（HTML和BODY）。（把獲取的內容以字符串的形式返回） input id = "innerHTMLBth" type= "button" value

innerHTMLBth.onclick = function (){

      .innerHTML = "<p>新增元素</p>"；     替換以前的元素

      .innerHTML += "<p>新增元素</p>" ；   添加在以前元素的後面

      .innerHTML = "<p>新增元素</p>" +    .innerHTML；     添加在以前元素的前面
}

.innerHTML設置的內容會被瀏覽器解析，而innerText的內容不會被解析，原樣的顯示出來。

###IE瀏覽器的限制：
1.    不容許tr,td經過innerHTML添加到table 裏面
2.    不容許option經過innerHTML添加到select裏面。

##事件：在某一刻發生的事情
##事件流：在一個標籤上觸發了一個事件後，沿着這個方向進行傳播

###事件流的分類：

1.    事件冒泡：（IE僅支持冒泡）從裏到外；
2.    事件捕獲：（網景瀏覽器僅支持）從外到裏
3.    DOM事件流：（及支持冒泡也支持捕獲）。
默認狀況下瀏覽器都是事件冒泡

###DOM處理事件的方法：
1. 內嵌事件直接在標籤上綁定事件（儘可能避免，它在全局找）
2. DOM0 傳統處理事件：
     優勢：兼容瀏覽器，以on開頭後加屬性名，全部的字母都是小寫。
     缺點：只能爲一個事件添加一個處理方法。
3. DOM2  優勢：爲一個事件，添加多個處理方法。
        缺點：IE不兼容
       IE的處理方法：
###DOM2 的增長刪除
    增長：.addEventListener("事件"，function){    }
    刪除：.removeEventListener("事件"，function){   }
###IE瀏覽器的增長刪除
    增長：.addEventListener("事件"，show);
    刪除：.removeEventListener("事件"，show);
###DOM0 的增長刪除
    增長：.事件 = function (){}
    刪除：.事件=null;
###事件處理的類型：
    鼠標經常使用的：onclick點擊    ondbliclick雙擊    oncontextmenu右鍵
    鍵盤： onkeydown 按下    onkeyup 鬆開  onkeypress 按下鬆開
###事件對象：Event 每個事件被觸發後，就會產生一個對象，用形參來接收這個事件。
    IE :    e= window.event || e
    DOM  :   e.

    clientX    clientY  鼠標頂部到可視區域的距離
    screenX    screenY   電腦屏幕區域的距離   IE用e.screenX  e.screenY
    pageY     pageX     鼠標頂部到body頂部的距離

###阻止事件的冒泡：
    IE方法：cansel Bubble = true
    DOM瀏覽器方法： stopProgation()方法    通常用於作複雜的動畫

###阻止事件的默認行爲：不是每個事件都有默認行爲
    IE：returnValue = false
    DOOM : preventDafault ()方法
###事件委託：適用於同時爲不少標籤綁定事件。（子元素不處理，委託父元素統一處理）
怎麼肯定是子元素：
event.target.parentNode.

##消除閉包
產生閉包的兩個條件：1.一個函數的內部函數在訪問外部變量
                2.在此函數外部引用了這個內部函數
```js
let arr = [1,2,3,4,5]
for(var i = 0; i < arr.length; i++){
    (function(index){
        lis[index].onclick = function(){
            console.log(index);
        }
    })(i)
    }
//解決辦法就是：使用當即調用函數，傳形參，不讓它訪問外部變量
```

###獲取表單：
1. DOM方法 document.getElementById("");

BOM方法：
2. document.forms[0];              // [下標]
3.  document.forms[""];         // ["ID名"]
  document.forms["f"+"m"];            //["f"+"m"]字符串拼接，
4.  document.name(名)

###獲取表單域對象/表單字段：
1. let a = document.getElementById("a");
2. fm(form的Id名).elements(表單元素)    // 例：let a = fm.elements[0]
3. let a = fm.elements[「」]；  //   [「Id名」]
4. let a = fm.a          //    .id或者  . name 均可以
5. let a = fm[""]      // ["ID名"]
6. let a = fm[0]      //   [下標]

form表單能夠用標籤提交，也能夠用JS方法提交
<input type="button">這是一個普通按鈕，不具有提交功能，可是用JS方法也能夠具有提交功能
<input type="rest">    返回初始狀態（默認狀態）
<input type="image" src = "地址">   具備提交功能
表單名.onsubmit = function （）{}     當利用標籤提交時會觸發onsubmit事件，若是用JS提交就不會觸發onsubmit事件。重置標籤和重置方法都會觸發onrest.
###特殊屬性  ：
多選     multipe
關閉，禁用     disabled       沒法提交到服務器  ，可是能夠用JS（false,true）方法能夠取消禁用，可是標籤不能夠取消
只讀    readlyonly     只有輸入框有readlyonly只讀，單行和多行也能夠有
選中   checked
添加元素：父級點. Option.add(Ls);   //(Ls)增長的內容
獲取選中的元素：父級點.onchange = function (){}  改變事件      [父級點. selectedIndex].innerHTML
刪除元素：父級點.ption.remove();   刪除一個
        父級點.ptions.length = 0;  清空
獲取焦點事件： .onfocus  = function (){}
離開/失去焦點事件：  .onblur = function (){}           改變了值，而且離開纔會觸發焦點事件
              .oninput 只要改變了值之後，當即觸發的事件。

###HTML5設置的JS方法
1. 視頻
```js
<video>
    <source src = "" type = "video/mp4">
</video>
```
ontimeupdate   當時間改變時觸發      //音頻/視頻的位置發生改變
ID名.play()    播放當前音頻/視頻
ID名.pause()       暫停當前音頻/視頻
controls   特殊屬性   控制

2. 音頻

3. canvas 標籤
```html
        <canvas> </canvas>     //設置寬度，高度引用屬性，而且不加px
        例:<canvas width = "800" height = "400"  id = "cs">

```
```js
    let cs = document.getelementById("cs");/獲取畫板
    let ctx = cs.getContext("2d");      //獲取畫筆
    ctx.fillRect(0,0,200,50)//     矩型，有顏色填充
    ctx.fillStyle = "red"//     變換畫筆顏色（默認爲黑色）
    ctx.strokeStyle = "blue"無顏色填充
    ctx.lineCap ()設置直線
    ctx.arc(圓心X座標，圓心Y座標，半徑，起始角位置，結束角，true/false(可選寫))
      例：ctx.arc  （ 100，75， 50，2*Math.PI）;    //畫圓  若是半圓就把（2*Math.PI改爲Math.PI）；若是要逆時針的半圓就在第六個屬性寫true  ,順時針 false）

    ctx.beginPath();        //開始新的路徑
    ctx.lineWidth = 20;
    ctx.moveTo(20,20);    //起始座標（從那個地方開始   。初始化）
    ctx.lineTo(20,150);    //結束座標  （要移動到的那個位置）
    ctx.closePath();    //關閉路徑
```

4. 引入圖片

```js
    let image = new Image();
    image.src = "images/地址/路徑";
    image.onload = function(){      //等加載完以後
        ctx.rotate(Math.PI);
        ctx.drawImage(image,-125,-125,250,250)
    }
```

若是作旋轉之類的動畫：
先  .save(),    //保存  狀態；
完了再   .restore（）    //恢復；
.translate（X,Y）    //改變原點位置；

###HTML5 內聯SVG   全稱（SVG可伸縮矢量圖形）
1. 位圖：有一個個的像素塊構成。
優勢：圖片色彩豐富
缺點：若是圖片不等比例縮放會失真。
2. 矢量圖：經過一系列的算法算出來的。（它不是html5 的規範，它本身自己就是一個規範）
優勢：不會失真，可伸縮。可經過編輯器來建立和修改。
缺點：色彩不夠豐富。
3. SVG 優勢:
可伸縮矢量圖形
用於定義用於網絡的基於矢量的圖形
使用XML格式定義圖形
SVG是萬維網的標準
SVG可被搜索、索引
4. canvas 和SVG的區別：

Canvas  ：

依賴分辨率

不支持事件處理器

弱的文本渲染能力

可以以 .png 或 .jpg 格式保存結果圖像

最適合圖像密集型的遊戲，其中的許多對象會被頻繁重繪

SVG:

不依賴分辨率

支持事件處理器

最適合帶有大型渲染區域的應用程序（好比谷歌地圖）

複雜度高會減慢渲染速度（任何過分使用 DOM 的應用都不快）

不適合遊戲應用

SVG教程：
cx和cy屬性定義圓點的x和y座標。若是省略cx和cy，圓的中心會被設置爲(0, 0)
r屬性定義圓的半徑
```js
  例：<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <circle cx="100" cy="50" r="40" stroke="black"      //畫圓
  stroke-width="2" fill="red" />
</svg>
```

CX屬性定義的橢圓中心的x座標
CY屬性定義的橢圓中心的y座標
RX屬性定義的水平半徑
RY屬性定義的垂直半徑
```js
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <ellipse cx="300" cy="80" rx="100" ry="50"          //橢圓
  style="fill:yellow;stroke:purple;stroke-width:2"/>
</svg>
```

元素能夠安排任何分小組與<tspan> 元素的數量。每一個<tspan> 元素能夠包含不一樣的格式和位置。幾行文本(與 <tspan> 元素
//幾行文本共同組成的
```js
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <text x="10" y="20" style="fill:red;">Several lines:
    <tspan x="10" y="45">First line</tspan>
    <tspan x="10" y="70">Second line</tspan>
  </text>
</svg>

```

###HTML的拖拽
draggable = "true"   容許拖拽，標籤跟着鼠標移動
拖放事件：
ondragstart   開始
ondragend  結束
ondrag
要有拖放目標：
ondragenter 進入拖放目標，有響應事件（觸發）
ondragleave  離開時觸發
ondragover  移動，一直在觸發
ondrop 會受到干擾，若是讓ondrop觸發，首先要阻止 ondragover的默認行爲，放開時纔會觸發。
e.preventDefault()  阻止默認行爲。

###HTML5 web存儲
cookie：服務器會發給瀏覽器一些簡短的東西（例登錄）   不屬於HTML5
容量小： 4KB
安全性：容易被截獲

HTML5開始的，存放在瀏覽器裏面的對象。
sessionStorage 和 localStorage   本地存儲，不會提交給瀏覽器

區別：
localStorage  存放時間長除非本身刪除，不然一直存放   用法同樣

sessionStorage   打開瀏覽器開始，關閉瀏覽器結束。存放範圍短，用法同樣

方法: 保存數據   二者存進去的都是字符串，不是字符串會轉成字符串。

JOSN.stringify();存入的是對象，先轉成字符串

JOSN.parse();取還原成數組

屬性：
保存數據：localStorage.setItem(key,value);

讀取數據：localStorage.getItem(key);

刪除單個數據：localStorage.removeItem(key);

刪除全部數據：localStorage.clear();

獲得某個索引的key：localStorage.key(index);

#jQuery

jquery:函數庫，簡化開發
特色：
1. 簡單，小巧
2. 兼容全部的瀏覽器

jquery版本：
      1.X版本任兼容IE8如下的版本
      3.X 以 2.X開始徹底放棄IE9如下的版本
###一引入jquery
jquery的用法：
先獲得jquery對象:jquery("選擇器")  ; 在jquery中 $ = jquery ，因此能夠寫成$("選擇器")   例：$("#d1")
###二 jquery對象如何轉化成原生
方法1：.get        例： $("選擇器").get(0).innerHTML ="hello";   (0)下標
方法2. []    例: $("#d1")[0].innerHTMl = "hello";
###三原生對象轉化成jquery對象
$()
   例：let d1 = document.getElementById("d1");
    $(d1).html("hello");
###四 jquery對象裏循環對象的方法  (遍歷出來的都是數組，須要轉換成jquery)
1.  for
2.   for of
3.   map
4.   reduce
5.   for in
6.   forEach
7.   filter
8.   jquery each
###五jquery選擇器
例：$("#d1").css("color","red");

atter通常用作普通屬性的設置
prop通常用做特殊屬性的設置
toggleClass:切換
###文檔處理：
#####添加節點:
添加
方法1 父級. append 子級點   添加在父級的後面   例：$("選擇器")（"<p>增長節點</p>"）
方法2 子級 . appendTo 父級    添加在父級的後面    例：$("<p>增長節點</p>") . appendTo("選擇器")
添加在前面   ：$("選擇器") . prepend （"增長的節點"）
加到對應的選擇器後面： $("選擇器").before  （"增長的節點"）
加到對應的選擇器前面： $("選擇器"). after  （"增長的節點"）

#####包裹節點：
$("選擇器").mrap("<div></div>")   向每一個選擇器加入父節點
$("選擇器").mrapAll("<div></div>")   向整個選擇器加入父節點
$("選擇器").mrapInner("<div></div>")   向每一個選擇器內容加入一個節點

#####修改/替換節點：
方法1：$("選擇器").replaceWidth("節點")
方法2：$("節點").replaceWidth("選擇器")

#####刪除節點;
$("選擇器").remove()     清空全部的內容，包括事件，標籤，內容 //$("選擇器")被刪除
$("選擇器").detach()
$("選擇器").empty()    還剩一個標籤

###操做CSS
一個屬性的書寫格式：$("選擇器").css(backgroundColor:red);
多個屬性的:
$("選擇器").css ({
backgroundColor:red,
border:1px solid red

})
###篩選
prev() 用於篩選前一個同輩元素
prevAll()查找當前元素以前的全部同輩元素

###其餘：
$("選擇器").offset.left/top     ：相對可視區域（有2個屬性left/top ）

("選擇器").position :返回相對於父元素

width  height   設置的寬/高
innerWidth   innerHeihgt     還包含padding 和border
outerWidth    outerHeight        還包含padding 和border和 margin

###語法糖：on("事件類型"，回調函數)   能夠解決全部事件
格式：$("選擇器"). on ("事件類型"，function(){

})

事件委託點擊事件：$("父級").delegate("指定哪個子元素作委託"，"事件"，function(){

})

###面試常問的;
on  能夠解決全部事件
bind       如今幾乎不用了，轉向on
live      用來作委託事件，過期了
delegate     用來作委託事件，如今還在用

怎麼在瀏覽器裏寫jquery代碼：
$(window).on("load",function(){

});  能夠添加多個事件。DOM加載完成，等整個頁面加載完成後執行   儘可能使用這個

而以前的window.oload = function(){}   只能夠添加一個事件

$(document).ready(function(){
});    頁面加載完成，等DOM加載完成後執行。  可簡寫（語法糖）：$(function(){  })  這兩個若是一塊兒寫，他們的執行順序是叢書到下的

###鏈式操做
  例：$("選擇器").css({
            width:100,
            height:100,
            border：「1px  solid  red 」
    }).atter("title","標題").html("<p>段落</p>")     //  1. 鏈式操做的寫法：不換行的寫法
    2.普通操做的寫法： $("").atter("name","id")
    3.或：let $d1 = $("")     //他也是鏈式操做的寫法，換行的寫法。把選擇器先交給一個變                      $d1.css()                             量，而這個變量名咱們一般給它前面加一個$.
    （在篩選的方法中會破壞原有鏈條  .find    .end回到最近一次破壞性的操做）

###jquery動畫
show:顯示隱藏的匹配元素
hide:隱藏顯示的元素
toggle:用於綁定兩個或多個事件處理器函數，以響應被選元素的輪流的 click 事件。

若是元素是可見的，切換爲隱藏的；若是元素是隱藏的，切換爲可見的。
slideDown:從下到上
slideUp:從上到下
slideToggle:

###animate 第一個參數是JOSN，第二個參數是時間   （指定一個最終樣式，自動補充）
例：$("").animate({
    maginLeft:500,   //第一個參數僅限於數字（padding,top...）
    opcity:0,
    width:0,
    color:red

   },2000);
    $("").animate({

   },2000,function(){
    $("").stop(true ,false);
    }     //中止
   );

###中止動畫：
.finsh():中止當前正在運行的動畫，刪除全部排隊的動畫，完成最終的狀態。
.stop(參數1，參數2若是不寫默認false)
.stop（true,true）  //來到當前狀態
.stop（false,false）   //來到當前動畫，執行下一個動畫
.stop（true,false）     //停在原地
.stop（false,true）   //直接到當前動畫的最終狀態，執行下一個動畫
###性能的優化：
1. 應該老是從ID選擇器開始繼承   例;$("")
2. 儘可能在class前面加元素名    例：（"h1.tt"）
3. 儘可能使用ID選擇器來替代class選擇器
4. 在適當的時候使用jquery的鏈式操做
5. 將jquery對象緩存起來使用，賦值給一個變量，變量名前加$

例：  let $obj = $("");
      $obj.css();
      $obj.html();

例： let $ps = $("");
    for (let i = 0;i<$ps.length;i++){
    $ps.eq(i).html();
   }
6. 限制直接操做DOM的次數（循環的時候不要append,先用字符串拼裝，而後再一次型添加到節點上）。
7. 儘可能使用事件委託
8. JS代碼儘可能推遲到window.onload事件中進行
9. 使用事件委託時用delegate來替代live
10. 能用子代選擇器就不用後代選擇器。css