JQuery + Bootstrap 學習告一段落

JQuery + Bootstrap 學習告一段落，，做了一個簡單的本地儲存的增删改查系統。今天就做個自我總結。

首先Bootstrap的應用：

1.運用了導航欄.

2.dl，dt清單

3.各種按鈕的使用

4.模态框，及其不能同時顯示在一個頁面中的問題的解決。

詳情模态框沖突問題解決

總結：感覺Bootstrap也是隻有要用的時候才回去查詢。掌握其用法就好

JQuery的應用

1.常用的得節點事件。click（）等等

2.增加節點 ：append（）。删除節點：remove（），其中remove（）是删除這個節點及其所有子節點。

而empty（）是删除這個節點下的所有子節點。

3.擷取子節點，父節點。children（）。parents（）。以及它的過濾篩選，更加友善的直接篩選。與js的方式不同。

4.擷取input中的值。val（）；

5.delegate（）的使用，對未來事件的處理。

$("#dj_good_ul").delegate(".delect", "click", function () {
    let number = $(".delect").index(this);
    getA(number);
  })
           

6.jquery中對于css樣式的使用：css（）。

7.let的使用，就不用考慮閉包的問題。

8.splice（）的使用

用法：The splice() method changes the contents of an array by removing or replacing existing elements and/or adding new elements in place.

for (let j = 0; j < arrthings.length; j++) {
      if (bbname == arrthings[j].itemname) { 
        arrthings.splice(j, 1);        //删除數組arrthings中的arrthings[j]。1表示一個資料。
        localStorage.setItem("items", JSON.stringify(arrobj1));
      }
    }
           

總結：jquery用起來，代碼量比js看着減少了些。但是有時候也會有些功能無法實作。最後隻能用js去實作。

Localstroge的使用

本地存儲用了localstroge

主要的知識就是，存儲，查詢，删除。

// 擷取存儲庫中的資料
        let objarr = localStorage.getItem("items");
// 存儲資料
  localStorage.setItem("items", JSON.stringify(d)); //以字元串形式存入localstorage
// 删除某條資料
localStorage.removeItem('myCat');
// 删除所有資料
localStorage.clear();
           

還有就是怎麼存儲圖檔，相信很多人存儲圖檔是都會報錯：fakepath的圖檔路徑。

這裡我也寫了自己的解決辦法：詳情戳：input【type=“file”】上傳圖檔，浏覽器路徑出現“fakepath”的解決方法

JSON的使用

// 1.先把資料通過json轉化為字元串存儲到localstorage

// 2.通過json把localstorage的資料轉化為對象，就可以用h5來擷取

// 3.通路localstroge中的資料的時候需要先把資料轉化為js對象，然後擷取到數組，對數組進行讀取

因為用到了本地存儲localstroge，就需要運用json來做資料的轉換。

json的一般使用方法如下

let objnum = JSON.parse(allobj).things;
      // 把資料轉化為js對象
localStorage.setItem("items", JSON.stringify(d)); //以字元串形式存入localstorage
           

over。