作用：获取自定义属性

命名规则：驼峰命名法 　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. python学习笔记3--set

    #int string list tuple dict bool float set #集合:天生去重 s=set() #空的集合 s2={'} ls=[1,2,3,4,5,6,7,1,2,3,4] ...

  2. js便携小方法，你值得拥有

    引言: 本章没有深奥的讲解js一些底层原理,比如this指针.作用域.原型啦,涉及的都是一些有利于平时开发时简化代码,提高执行效率,或者说可以当做一种经验方法来使用,篇幅都不长,小步快跑的让你阅读完整 ...

  3. highCharts使用记录

    公司的架构师让我做一个mockup,要用到highCharts,,以前想接触的,没时间学习,也没有用过,正好工作可以用上了,可以边学边做了. 环境 <script src="./js/ ...

  4. nginx client ip配置

    server { listen 80; server_name localhost; location /{ root html; index index.html index.htm; proxy_ ...

  5. 并发编程(三) IO模型

    五 IO模型 常用的IO模型有4种: 阻塞IO 非阻塞IO IO多路复用 异步IO 不常用的有: 驱动信号 5.1 阻塞IO.非阻塞IO 阻塞IO:进程不能做其他的事情 非阻塞IO:等待数据无阻塞 阻 ...

  6. 【leetcode 简单】 第一百零八题 找到所有数组中消失的数字

    给定一个范围在  1 ≤ a[i] ≤ n ( n = 数组大小 ) 的 整型数组,数组中的元素一些出现了两次,另一些只出现一次. 找到所有在 [1, n] 范围之间没有出现在数组中的数字. 您能在不 ...

  7. php array转化为utf-8编码以便于转化为json数据

    php中转化为json时,字符串或数组编码必须为utf-8编码. 在网上找到了一个方法可以比较简单的转化,在此记录: 利用var_export()和eval()方法var_export():输出或返回 ...

  8. 使用转义防御XSS

    使用转义防御XSS 在输出的时候防御XSS即对用户输入进行转义,XSS的问题本质上还是代码注入,HTML或者javascript的代码注入,即混淆了用户输入的数据和代码.而解决这个问题,就需要根据用户 ...

  9. socket系统调用

    SYSCALL_DEFINE3(socket, int, family, int, type, int, protocol) { int retval; struct socket *sock; in ...

  10. linux 获取时间后--自定义时间格式

    自定义时间格式 =================================-===================================== #include <stdio.h ...