作用：获取自定义属性

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

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

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

　　　　

　　　　　　

用法：

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

 <body>

 <ul class="nav">

     <!--在渲染的时候  大小的属性会转换成小写 -->

     <li data-content-id="content01">菜单1</li>

     <li data-content-id="content02" class="active">菜单2</li>

     <li data-content-id="content03">菜单3</li>

     <li data-content-id="content04">菜单4</li>

 </ul>

 <ul class="box">

     <li id="content01">内容1</li>

     <li id="content03">内容3</li>

     <li id="content04">内容4</li>

     <li id="content02" class="show">内容2</li>

 </ul>

 <!-- css序号选择器伪类选择器  E:first-child-->

 <!-- 查找顺序：

 通过E确定父元素

 通过父元素找到所有的子元素

 再去找第一个子元素

 找到第一个子元素之后再去匹配类型是不是E  不是：无效选择器

 ul:last-child

 -->

 <script>

     /*tab切换*/

     window.onload = function () {

         document.querySelector('.nav').onclick = function (e) {

             var currentLi = e.target;

             /*已经选中 停止操作*/

             if(currentLi.classList.contains('active')) return false;

             var oldLi = document.querySelector('.nav li.active');

             /*1.更改样式*/

             oldLi.classList.remove('active');

             currentLi.classList.add('active');

             /*2.根据选中的页签去显示对应的内容*/

             /*隐藏之前的*/

             var oldContent = document.querySelector('#'+oldLi.dataset.contentId);

             oldContent.classList.remove('show');

             /*显示当前的*/

             var currentContent = document.querySelector('#'+currentLi.dataset.contentId);

             currentContent.classList.add('show');

         }

     }

 </script>

 </body>

jQuery的data() 和 h5 的 dataset()的更多相关文章

  1. jquery中data()和js中dataset属性的区别

    INTRO html的标签属性data-允许用户自定义属性.原生javascript和jquery分别定义了dataset属性和data()方法对标签中的data属性进行操作. 取值: 如我们定义这样 ...

  2. jQuery.data() 与 jQuery(elem).data()源码解读

    之前一直以为 jQuery(elem).data()是在内部调用了 jQuery.data(),看了代码后发现不是.但是这两个还是需要放在一起看,因为它们内部都使用了jQuery的数据缓存机制.好吧, ...

  3. HTML 5 的自定义 data-* 属性和jquery的data()方法的使用

    人们总喜欢往HTML标签上添加自定义属性来存储和操作数据.但这样做的问题是,你不知道将来会不会有其它脚本把你的自定义属性给重置掉,此外,你这样做也会导致html语法上不符合Html规范,以及一些其它副 ...

  4. jQuery 中 data 方法的实现原理

    前言:jQuery 作为前端使用最多最广泛的 JS 库,其源码每个 JSer 都应该研究一下.早就打算看却一直被各种事拖着,上次某公司面试时被问到 jQuery 中 data 方法是如何实现的,结果答 ...

  5. html5的自定义data-＊属性和jquery的data()方法的使用示例

    人们总喜欢往HTML标签上添加自定义属性来存储和操作数据. 但这样做的问题是,你不知道将来会不会有其它脚本把你的自定义属性给重置掉,此外,你这样做也会导致html语法上不符合Html规范,以及一些其它 ...

  6. jQuery 的.data()方法

    jQuery文档对.data()方法的描述: As of jQuery 1.4.3 HTML 5 data- attributes will be automatically pulled in to ...

  7. html5的自定义data-*属性与jquery的data()方法的使用

    人们总喜欢往HTML标签上添加自定义属性来存储和操作数据.但这样做的问题是,你不知道将来会不会有其它脚本把你的自定义属性给重置掉,此外,你这样做也会导致html语法上不符合Html规范,以及一些其它副 ...

  8. html5的自定义data-*属性和jquery的data()方法的使用

    人们总喜欢往HTML标签上添加自定义属性来存储和操作数据.但这样做的问题是,你不知道将来会不会有其它脚本把你的自定义属性给重置掉,此外,你这样做也会导致html语法上不符合Html规范,以及一些其它副 ...

  9. Jquery下控制backgroundPosition位置的问题/jquery查找data id相等的元素

    1:想通过控制backgroundPosition 来实现动态效果: $(this).animate({"background-positionY":-13},1); //但是火狐 ...

随机推荐

  1. 巧妙使用CSS创建可以打印的页面

    用CSS创建打印页面,不必为打印而专门建立一个HTML文件,可以节省一些体力,其前提是按“WEB标准”用CSS+DIV布局HTML页面. 第一.在HTML页面加入为打印机设置的CSS文件 <li ...

  2. WPF控件收集

    1.Extended WPF Toolkit 2.Fluent Ribbon Control Suite 3.WPF Ribbon Control 4.Telerik RadControls for ...

  3. LintCode 387: Smallest Difference

    LintCode 387: Smallest Difference 题目描述 给定两个整数数组(第一个是数组A,第二个是数组B),在数组A中取A[i],数组B中取B[j],A[i]和B[j]两者的差越 ...

  4. jquery $.post() 向php传值 实现简单的二级联动

    更多内容推荐微信公众号,欢迎关注: 1 其中selectid是一个下拉菜单的id $().ready(function () { $("#selectid").change(fun ...

  5. IIS8.0 配置应用程序初始化功能

    IIS进程回收后,第一次访问会超级慢,这对于用户是不能接受的,怎么解决这个问题? 我们不能设置IIS不回收进程,因为这样可能会导致IIS内存泄漏.有效的方法时,尽量在业务空闲时间回收进程,回收后立刻预 ...

  6. Spring4笔记11--SSH整合2--SpringWeb

    SSH 框架整合技术: 2. Spring 在 Web 项目中的使用(建立在Spring与Hibernate整合的基础上): 在 Web 项目中使用 Spring 框架,首先要解决在 Servlet ...

  7. 【算法学习】【洛谷】cdq分治 & P3810 三维偏序

    cdq是何许人也?请参看这篇:https://wenku.baidu.com/view/3b913556fd0a79563d1e7245.html. 在这篇论文中,cdq提出了对修改/询问型问题(Mo ...

  8. python的面对对象

    创建类 使用 class 语句来创建一个新类,class 之后为类的名称并以冒号结尾: class ClassName: '类的帮助信息' #类文档字符串 class_suite #类体 类的帮助信息 ...

  9. linux nginx大量TIME_WAIT的解决办法--转

    netstat -n | awk '/^tcp/ {++S[$NF]} END {for(a in S) print a, S[a]}' TIME_WAIT 8535 CLOSE_WAIT 5 FIN ...

  10. IIC串行总线的组成及其工作原理

    ------------------最近项目上用到了一款美信的DS1308RTC芯片,由于是挂在了Zynq的PS MIO上,需要软件人员协助才能测试:觉得太麻烦了,想通过飞线,然后在Vivado中调用 ...