平时工作中的积累

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()替代该函数。

平时工作中的积累

猜你喜欢