求js的封装问题，dataset

[zhangyyy_10]

<input name="birthdate" class="datepicker" data-defaultdate="-20y" readonly="readonly"/>


$(".datepicker").each(function(){
var param = {
autoSize : true,
changeMonth : true,
changeYear : true,
dateFormat : "yy-mm-dd"
};
if (this.dataset && this.dataset.defaultdate)
param.defaultDate = this.dataset.defaultdate;
else
param.minDate = 1;
$(this).datepicker(param);
});



代码如上，data-defaultdate="-20y" 的值使用this.dataset.defaultdate 的值来获得，请问这是什么语法，this.dataset 是什么意思呀？？

非常感谢！！！

[螃蟹k3179]

这个 datepicker 是 jqueryui 里的一个组件吧。。 他应该把传过来的 data值付给了这个 jquery个体。 所以 data-xxx="nnn" 这种值应该都能以 this.dataset.xxx 得到相应的值。 当然，应该也可以通过 this.data('xxx') 来得到。 以上是我的猜测，具体的还请楼下来解答，或者直接看 jqueryui的代码。。

[阿鱼]

（1）dataset是HTML5中为html元素添加的一个新属性，这个属性的值是一个对象(该对象是html元素通过‘data-’方式添加的属性名及属性值的集合)。 比如你提到的input：

<input name="birthdate" class="datepicker" data-defaultdate="-20y" readonly="readonly"/>
//接下来取一下input.dataset并验证
var ele=document.getElementsByTagName('input')[0],
    obj=ele.dateset;
    console.log(typeof obj);//浏览器控制台显示结果为：object
    console.log(obj);//浏览器控制台显示结果为：{defaultdate: "-20y"}

再回到你的例子中，'if (this.dataset && this.dataset.defaultdate)'的用法就很简答明了了，同理如果input标签中还有其他的data-name=value，在js中都可以通过this.dataset.name来获取value。 （2）不过通过dataset获取到的对象并不是js传统意义上的对象，它在HTML5中的名称是DomStringMap,它有许多有用且有意思的特性，但是它的兼容性不太好，楼主可以自行google一下。

[螃蟹k3179]

引用 2 楼 qwklove 的回复:

（1）dataset是HTML5中为html元素添加的一个新属性，这个属性的值是一个对象(该对象是html元素通过‘data-’方式添加的属性名及属性值的集合)。 比如你提到的input：

<input name="birthdate" class="datepicker" data-defaultdate="-20y" readonly="readonly"/>
//接下来取一下input.dataset并验证
var ele=document.getElementsByTagName('input')[0],
    obj=ele.dateset;
    console.log(typeof obj);//浏览器控制台显示结果为：object
    console.log(obj);//浏览器控制台显示结果为：{defaultdate: "-20y"}

再回到你的例子中，'if (this.dataset && this.dataset.defaultdate)'的用法就很简答明了了，同理如果input标签中还有其他的data-name=value，在js中都可以通过this.dataset.name来获取value。 （2）不过通过dataset获取到的对象并不是js传统意义上的对象，它在HTML5中的名称是DomStringMap,它有许多有用且有意思的特性，但是它的兼容性不太好，楼主可以自行google一下。

谢谢纠错。 难道这是因jquery的用法而新出的标准？

[阿鱼]

引用 3 楼 k3179 的回复:

[quote=引用 2 楼 qwklove 的回复:] （1）dataset是HTML5中为html元素添加的一个新属性，这个属性的值是一个对象(该对象是html元素通过‘data-’方式添加的属性名及属性值的集合)。 比如你提到的input：

<input name="birthdate" class="datepicker" data-defaultdate="-20y" readonly="readonly"/>
//接下来取一下input.dataset并验证
var ele=document.getElementsByTagName('input')[0],
    obj=ele.dateset;
    console.log(typeof obj);//浏览器控制台显示结果为：object
    console.log(obj);//浏览器控制台显示结果为：{defaultdate: "-20y"}

再回到你的例子中，'if (this.dataset && this.dataset.defaultdate)'的用法就很简答明了了，同理如果input标签中还有其他的data-name=value，在js中都可以通过this.dataset.name来获取value。 （2）不过通过dataset获取到的对象并不是js传统意义上的对象，它在HTML5中的名称是DomStringMap,它有许多有用且有意思的特性，但是它的兼容性不太好，楼主可以自行google一下。

谢谢纠错。 难道这是因jquery的用法而新出的标准？[/quote] 现在的web变得越来越复杂，需求也越来越多，原来DOM中的api在实现需求的时候会显得麻烦，效率低甚至无法满足需求只好借助js。因此，HTML5针对这种情况新增加了诸多特性，希望通过完善DOM使其尽可能的通过自身的元素以及API高效地完成文档操作，js可以更专注与程序（各司其职）。 所以，dataset的产生应该是基于一个这样的大的需求，具体到它被添加到新标准中，应该主要是为了简化节点属性操作以便与配合js实现更多的功能。楼主的日历插件就是个很好的例子。 jquery也只是js类库中的一个，这些新东西的添加可以说是和js的发展有关系，说是因为jquery而添加还是牵强一些。

[zhangyyy_10]

引用 4 楼 qwklove 的回复:

[quote=引用 3 楼 k3179 的回复:] [quote=引用 2 楼 qwklove 的回复:] （1）dataset是HTML5中为html元素添加的一个新属性，这个属性的值是一个对象(该对象是html元素通过‘data-’方式添加的属性名及属性值的集合)。 比如你提到的input：

<input name="birthdate" class="datepicker" data-defaultdate="-20y" readonly="readonly"/>
//接下来取一下input.dataset并验证
var ele=document.getElementsByTagName('input')[0],
    obj=ele.dateset;
    console.log(typeof obj);//浏览器控制台显示结果为：object
    console.log(obj);//浏览器控制台显示结果为：{defaultdate: "-20y"}

再回到你的例子中，'if (this.dataset && this.dataset.defaultdate)'的用法就很简答明了了，同理如果input标签中还有其他的data-name=value，在js中都可以通过this.dataset.name来获取value。 （2）不过通过dataset获取到的对象并不是js传统意义上的对象，它在HTML5中的名称是DomStringMap,它有许多有用且有意思的特性，但是它的兼容性不太好，楼主可以自行google一下。

谢谢纠错。 难道这是因jquery的用法而新出的标准？[/quote] 现在的web变得越来越复杂，需求也越来越多，原来DOM中的api在实现需求的时候会显得麻烦，效率低甚至无法满足需求只好借助js。因此，HTML5针对这种情况新增加了诸多特性，希望通过完善DOM使其尽可能的通过自身的元素以及API高效地完成文档操作，js可以更专注与程序（各司其职）。 所以，dataset的产生应该是基于一个这样的大的需求，具体到它被添加到新标准中，应该主要是为了简化节点属性操作以便与配合js实现更多的功能。楼主的日历插件就是个很好的例子。 jquery也只是js类库中的一个，这些新东西的添加可以说是和js的发展有关系，说是因为jquery而添加还是牵强一些。[/quote] 说的不错！！<input name="birthdate" class="datepicker" defaultdate="-20y" readonly="readonly"/> $(this).attr('defaultdate');这样也可以获得 -20y，只是这样是用了js对吧。那段代码中this和$(this) 又有什么区别呢？ 是否 this是js对象，$(this)是jqury对象？另外html的标准在哪里找啊？ 谢谢仁兄！

[zhangyyy_10]

html5的标准有没有官方文档啊？？

[街头小贩]

引用 6 楼 zhangyyy_10 的回复:

html5的标准有没有官方文档啊？？

http://www.w3.org/TR/2011/WD-html5-20110525/

[阿鱼]

引用 5 楼 zhangyyy_10 的回复:

[quote=引用 4 楼 qwklove 的回复:] [quote=引用 3 楼 k3179 的回复:] [quote=引用 2 楼 qwklove 的回复:] （1）dataset是HTML5中为html元素添加的一个新属性，这个属性的值是一个对象(该对象是html元素通过‘data-’方式添加的属性名及属性值的集合)。 比如你提到的input：

<input name="birthdate" class="datepicker" data-defaultdate="-20y" readonly="readonly"/>
//接下来取一下input.dataset并验证
var ele=document.getElementsByTagName('input')[0],
    obj=ele.dateset;
    console.log(typeof obj);//浏览器控制台显示结果为：object
    console.log(obj);//浏览器控制台显示结果为：{defaultdate: "-20y"}

再回到你的例子中，'if (this.dataset && this.dataset.defaultdate)'的用法就很简答明了了，同理如果input标签中还有其他的data-name=value，在js中都可以通过this.dataset.name来获取value。 （2）不过通过dataset获取到的对象并不是js传统意义上的对象，它在HTML5中的名称是DomStringMap,它有许多有用且有意思的特性，但是它的兼容性不太好，楼主可以自行google一下。

谢谢纠错。 难道这是因jquery的用法而新出的标准？[/quote] 现在的web变得越来越复杂，需求也越来越多，原来DOM中的api在实现需求的时候会显得麻烦，效率低甚至无法满足需求只好借助js。因此，HTML5针对这种情况新增加了诸多特性，希望通过完善DOM使其尽可能的通过自身的元素以及API高效地完成文档操作，js可以更专注与程序（各司其职）。 所以，dataset的产生应该是基于一个这样的大的需求，具体到它被添加到新标准中，应该主要是为了简化节点属性操作以便与配合js实现更多的功能。楼主的日历插件就是个很好的例子。 jquery也只是js类库中的一个，这些新东西的添加可以说是和js的发展有关系，说是因为jquery而添加还是牵强一些。[/quote] 说的不错！！<input name="birthdate" class="datepicker" defaultdate="-20y" readonly="readonly"/> $(this).attr('defaultdate');这样也可以获得 -20y，只是这样是用了js对吧。那段代码中this和$(this) 又有什么区别呢？ 是否 this是js对象，$(this)是jqury对象？另外html的标准在哪里找啊？ 谢谢仁兄！[/quote] （1）嗯，$(this)是jquery对象，但是this不是js对象，是dom对象。 还是用你的代码来说吧：

$(".datepicker").each(function(){
    	 var param = {
    	    autoSize : true,
            changeMonth : true,
            changeYear : true,
    	    dateFormat : "yy-mm-dd"
    	 };
        //下面的this指的就是input元素对应的dom对象，即：document.getElementsByTagName('input')[0]
        //也正是因为是dom对象，所以具有dataset属性。如果换做$(this).dataset就会报错，因为$(this)
        //是jquery对象，没有这样的属性。
    	 if (this.dataset && this.dataset.defaultdate)
    	  param.defaultDate = this.dataset.defaultdate;
    	 else
    	  param.minDate = 1;
       //下面的$(this)就是input元素对应的jquery对象，
       //html元素对应的jquery对象有很多jquery已经写好的方法可以调用比如.css()设置样式，
       //.attr()读取属性等等。除了这些jquery自带方法外，网上还有很多插件（也就是别人写好的方法）
       //供jquery对象调用。你用的datepicker就是一个插件（新方法）。
       //同理如果是this.datepicker()也会报错，因为只有jquery对象（$(this)）才能调用该方法。
    	  $(this).datepicker(param);
    });

（2）HTML5虽然有很多好的特性和便捷的用法，但只是趋势尚未成标准，浏览器的支持也不尽人意，因此实际开发中很少会用到，个人觉得大体了解下即可。至于官方文档，本人也未曾仔细研究过，基本都是在W3c上看的，楼主可以参考下。 http://www.w3school.com.cn/html5/index.asp