js data-自定义属性

template

<div class="dataCharacter" data-dataMsg="handy">
    <ul>
        <li class="one" data-other-msg="one">1</li>
        <li class="two" data-other-msg="two">2</li>
        <li class="three" data-oter-msg="three">3</li>
        <li class="four" data-other-msg="four">4</li>
        <li class="five" data-other-msg="five">5</li>
        <li class="six" data-other-msg="six">6</li>
    </ul>
</div>

data-* 中属性名全都是小写，中间可以用 - 隔开
如果使用了大写字母，在渲染时也会被替换成小写的

获取/修改data属性值使用dataset

获取属性值

1. 若属性名中间有‘-’，则使用驼峰命名法获取
2. 若html中使用了大写字母后渲染成小写的，就只能使用全小写来获取
   

新增属性&修改属性值

1. 通过js新增属性，使用全小写或驼峰命名法
   
2. 修改属性值的方法是在获取属性后设置
   
   

jquery设置属性&获取属性值

1. 可使用$.data的方式设置属性，但设置后不会渲染在页面上
2. 使用什么命名就通过什么来获取即可
3. 如果使用驼峰或者‘-’方式命名，则获取属性值时可以使用两种中的任意一种，即可以互换，建议使用同种方法啦，避免混淆