jQuery的data() 和 h5 的 dataset()

最新推荐文章于 2023-09-15 14:21:26 发布

dfn97351

最新推荐文章于 2023-09-15 14:21:26 发布

阅读量158

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/Candy-li/p/9989763.html

版权

作用：获取自定义属性

命名规则：驼峰命名法　data-user==>user data-user-name==>userName

区别：jQuery：操作内存 h5：操作DOM

jQuery修改自定义属性后，在DOM看不到改变，而h5可以

用法：

使用场景：Tab切换（通过自定义属性与内容相关联，内容可以打乱顺序）

 1 <body>
 2 <ul class="nav">
 3     <!--在渲染的时候  大小的属性会转换成小写 -->
 4     <li data-content-id="content01">菜单1</li>
 5     <li data-content-id="content02" class="active">菜单2</li>
 6     <li data-content-id="content03">菜单3</li>
 7     <li data-content-id="content04">菜单4</li>
 8 </ul>
 9 <ul class="box">
10     <li id="content01">内容1</li>
11     <li id="content03">内容3</li>
12     <li id="content04">内容4</li>
13     <li id="content02" class="show">内容2</li>
14 </ul>
15 <!-- css序号选择器伪类选择器  E:first-child-->
16 <!-- 查找顺序：
17 通过E确定父元素
18 通过父元素找到所有的子元素
19 再去找第一个子元素
20 找到第一个子元素之后再去匹配类型是不是E  不是：无效选择器
21 ul:last-child
22 -->
23 <script>
43     /*tab切换*/
44     window.onload = function () {
45         document.querySelector('.nav').onclick = function (e) {
46             var currentLi = e.target;
47             /*已经选中 停止操作*/
48             if(currentLi.classList.contains('active')) return false;
49 
50             var oldLi = document.querySelector('.nav li.active');
51             /*1.更改样式*/
52             oldLi.classList.remove('active');
53             currentLi.classList.add('active');
54             /*2.根据选中的页签去显示对应的内容*/
55             /*隐藏之前的*/
56             var oldContent = document.querySelector('#'+oldLi.dataset.contentId);
57             oldContent.classList.remove('show');
58             /*显示当前的*/
59             var currentContent = document.querySelector('#'+currentLi.dataset.contentId);
60             currentContent.classList.add('show');
61         }
62     }
63 </script>
64 </body>

转载于:https://www.cnblogs.com/Candy-li/p/9989763.html

dfn97351

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery的data() 和 h5 的 dataset()

作用：获取自定义属性命名规则：驼峰命名法　data-user==>user data-user-name==>userName区别：jQuery：操作内存 h5：操作DOMjQuery修改自定义属性后，在DOM看不到改变，而h5可以　　　　　　　　　　用法：使用场景：Tab切换（通过自定义属性与内容相关联，内容...
复制链接

扫一扫