认识data-xxx 的属性

最新推荐文章于 2023-07-17 15:12:50 发布

转载最新推荐文章于 2023-07-17 15:12:50 发布 · 158 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/zhuji/p/7146653.html

文章标签：

#javascript #ViewUI

本文介绍了HTML5中的data-*属性的应用，特别是在Bootstrap框架中如何利用这些属性来触发特定的JavaScript行为。文章深入探讨了jQuery 1.6及之后版本中对于data-*属性的支持，并通过源码解析了jQuery如何处理这些属性值。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

认识data-xxx 的属性

如, 在bootstrap之data-toggle="table", 不加这个属性，就不能实现框架自带的js效果.

1.它属于 HTML5 的 data-* attribute 知识范畴

2. 在jQuery 1.6中，针对属性字面包含内嵌破折号的情况进行了更改，以符合W3C HTML5规范。

The treatment of attributes with embedded dashes was changed in jQuery 1.6 to conform to the W3C HTML5 specification.

1.1 进一步理解

当使用.data()获取值时,jQuery会首先尝试将获取的字符串值转化成JS类型,请参考

jQuery中data函数源码

function dataAttr(elem, key, data) {
    // If nothing was found internally, try to fetch any 
    // data from the HTML5 data-* attribute 
    if (data === undefined && elem.nodeType === 1) {
        // rmultiDash = /([A-Z])/g 
        var name = "data-" + key.replace(rmultiDash, "-$1").toLowerCase();
        data = elem.getAttribute(name);
        if (typeof data === "string") {
            try {
                /*.data(key)方法尝试将获取的值转化成JS类型，包括布尔值，null，数字，对象，数组*/
                data = data === "true" ? true :
                data === "false" ? false :
                data === "null" ? null :
                // Only convert to a number if it doesn't change the string 
                +data + "" === data ? +data :
                /*rbrace = /(?:\{[\s\S]*\}|\[[\s\S]*\])$/,*/
                rbrace.test(data) ? jQuery.parseJSON(data) :
                data;
            } catch (e) { }
            // Make sure we set the data so it isn't changed later 
            jQuery.data(elem, key, data);
        } else {
            data = undefined;
        }
    }
    return data;
}