作用：获取自定义属性

命名规则：驼峰命名法 　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. Reading table information for completion of table and column names You can turn off this feature to get a quicker startup with -A

    问题: 当我们打开数据库,即use dbname时,要预读数据库信息,当使用-A参数时,就不预读数据库信息. 解决方法:mysql -hhostname -uusername -ppassword - ...

  2. CSS基础之选择器

    一:CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素. 当浏览器读到,一个样式表时,就会按照. 二:CSS语法 每个CSS有两部分组成:选择器和声明 ...

  3. hdu 1716 排列2（DFS搜索）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1716 排列2 Time Limit: 1000/1000 MS (Java/Others)    Me ...

  4. 查看GCC的内置宏定义

    开发过程中我们常常需要使用宏定义.. 为了尽可能多的使用GCC为我们提供的特性,首先我们需要知道gcc提供了那些特性... gcc -dM -E - < /dev/null 没错,就这么一句话就 ...

  5. dropload的使用记录

    这次做一个H5的页面,需要用到上拉加载,下拉刷新的功能,在网上看到ximen写的dropload.js可以满足需求(此处致谢作者),但是用的时候还是踩了一些坑,这里记录下来备忘. 一些小问题:1. m ...

  6. plsql链接数据库配置

    一. 目录结构 D:\install\PLSQL        |-- instantclient_11_2            |-- tnsnames.ora        |-- PLSQL ...

  7. [Ubuntu 14.04] 安装Flash && 安装QQ

    一.安装Flash 打开Firefox浏览器弹出的Flash安装提醒早都烦死了,那么Ubuntu14.04怎么安装Flash呢? 1.32位系统命令行安装: 第一步 更新库: sudo apt-get ...

  8. python（13）多线程：线程池，threading

    python 多进程:多进程 先上代码: pool = threadpool.ThreadPool(10) #建立线程池,控制线程数量为10 reqs = threadpool.makeRequest ...

  9. Explorer : 发布一个key-value存储系统，带有客户端和服务器端

    Explorer 一个key-value存储系统,带有客户端和服务器端.使用非常方便. 使用B+树作为存储引擎,客户端和服务器端使用TCP协议进行通信. 代码采用C++实现,底层将客户端和服务器通信封 ...

  10. 最短路径之迪杰斯特拉（Dijkstra)算法

    对于网图来说,最短路径,是指两顶点之间经过的边上权值之和最少的路径,并且我们称路径上的第一个顶点为源点,最后一个顶点为终点.最短路径的算法主要有迪杰斯特拉(Dijkstra)算法和弗洛伊德(Floyd ...