平時工作中的積累

1. DOM物件的dataset屬性
   在寫富盈專案的時候遇到了這一段程式碼，因為接收富盈的時候已經有一小部分是公司前輩寫的，（在這裡我想說，寫別人寫過的專案，好也不好，好處是別人寫的專案有些需求可能出現了bug，或者是需求需要小小的改動，這樣你都是要研究下別人的程式碼，然後進行修改，這樣可能就會發現你之前沒遇到過的寫法，和技術，然後你仔細研究之後對你會收益頗深，尤其是我這種沒有經驗的人，我的工作中技術提升也就是收益與這一點。不好的一點是遇到那種邏輯性很強，你要很仔細地去跟著別人的邏輯思考，確定確實很頭疼。廢話不多說了，趕快進入正題。）
   1. dataset
   1、 什麼是dataset
   html5中我們可以使用data-字首設定我們需要的自定義屬性,來進行一些資料的存放,例如我們要在一個文字按鈕上存放相應的id:

<a href="javascript:;" data-id="2312">測試</a>

這裡的data-字首就被稱為data屬性,其可以通過指令碼進行定義,也可以應用css屬性選擇器進行樣式設定.數量不受限制,在控制和渲染資料的時候提供了非常強大的控制.

<div id="day-meal-expense" data-drink="tea" data-food="noodle" data-meal="lunch">$18.3</div>

要想獲取某個屬性的值,可以像下面這樣使用dataset物件:

 var expenseday=document.getElementById('day-meal-expense');
 var typeOfDrink=expenseday.dataset.drink;
 console.log(typeOfDrink);//tea
 console.log(expenseday.dataset.food);//noodle
 console.log(expenseday.dataset.meal);//lunch
 

2、為何要使用dataset
如果使用傳統的方法獲取屬性值應該會類似下面:

var typeOfDrink=document.getElementById('day-meal-expense').getAttribute('data-drink');

現在,如果我們要獲得多個自定義的屬性值,就要用下面N行程式碼來實現了:

var attrs=expenseday.attributes, expense={},i,j;
for (i=0,j=attrs.length;i<j;i++){
  if(attrs[i].name.substring(0,5)=='data-'){
    expense[attrs[i].name.substring(5)]=attrs[i].value;
  }
}

 

而使用dataset屬性,我們根本不需要任何迴圈去獲取你想要的那個值,直接一行秒殺:

expense=document.getElementById('day-meal-expense').dataset;
delete expenseday.dataset.meal;
console.log(expenseday.dataset.meal)//undefined

3、dataset的操作：
可以像下面這樣操作名-值對:

charInput=[];
  for(var item in expenseday){
    charInput.push(expenseday[item]);
  }

上面這幾千程式碼的作用是讓所有的自定義屬性塞到一個數組中.
如果你想刪除一個data屬性,可以這麼做:

delete expenseday.dataset.meal;
  console.log(expenseday.dataset.meal)//undefined

如果你想給元素新增一個屬性,可以這麼做:

expenseday.dataset.dessert='icecream';
  console.log(expenseday.dataset.dessert);//icecream

*2 delegate ***
delegate()函式用於為指定元素的一個或多個事件繫結事件處理函式。
例如：
/ 上傳圖片 */

    $("#js_tupian").delegate("#upload-image", "click", function () {
        $('#upload-img').trigger('click');
    });

此外，你還可以額外傳遞給事件處理函式一些所需的資料。
即使是執行delegate()函式之後新新增的元素，只要它符合條件，繫結的事件處理函式仍然對其有效。
此外，該函式可以為同一元素、同一事件型別繫結多個事件處理函式。觸發事件時，jQuery會按照繫結的先後順序依次執行繫結的事件處理函式。

要刪除通過delegate()繫結的事件，請使用undelegate()函式。
從jQuery 1.7開始，請優先使用事件函式on()替代該函式。