作用：获取自定义属性

命名规则：驼峰命名法 　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. -webkit-css

    WebKit CSS: 1.“盒模型”的具体描述性质的包围盒块内容,包括边界,填充等等. .test{ -webkit-border-bottom-left-radius: radius; -webk ...

  2. [问题]通过IIS宿主发布WCF服务，客户端添加服务引用出错的解决办法

    环境配置:Web服务器:Windows Server 2008,iis7.5,.net4.0客户端:XPsp3 vs2010 sp1 问题描述:1.确定WCF服务访问地址  http://servic ...

  3. linux 自定义yum仓库、repo文件 yum命令

    目录 自定义yum仓库:createrepo 自定义repo文件 使用yum命令安装httpd软件包 卸载httpd软件包:yum –y remove 软件名 清除yum缓存:yum clean al ...

  4. pentaho bi server 配置MySQL数据库

    软件版本: jdk 1.7 MySQL 5.5 biserver-ce-6.1.0.1-196 (选择右下方的所有选项See All Activities) 一.前置环境安装 1.安装jdk(略) 2 ...

  5. 2016.5.16——leetcode:Reverse Bits（超详细讲解）

    leetcode:Reverse Bits 本题目收获 移位(<<  >>), 或(|),与(&)计算的妙用 题目: Reverse bits of a given 3 ...

  6. 【codeforces】【比赛题解】#854 CF Round #433 (Div.2)

    cf一如既往挺丧 看丧题点我! [A]分数 Petya是数学迷,特别是有关于分数的数学.最近他学了所谓一个分数被叫做“真分数”当且仅当其分子小于分母,而一个分数被叫做“最简分数”当且仅当其分子分母互质 ...

  7. 4 - django-orm基本使用

    目录 1 数据库与ORM 2 orm的配置 2.1 引擎和配置 2.2 mysql驱动程序 3 orm 表模型 3.1 创建表对象 3.2 Django字段类型 3.3 常用字段参数说明 3.4 特殊 ...

  8. 生成Word/ATU报表提示 font family not found

    1.先从你本机 C:\Windows\Fonts 拷贝或者网络上下载你想要安装的字体文件(*.ttf文件)到 /usr/share/fonts/chinese/TrueType 目录下(如果系统中没有 ...

  9. ASP.NET MVC 5使用Filter过滤Action参数防止sql注入，让你代码安全简洁

    在开发程序的过程中,稍微不注意就会隐含有sql注入的危险.今天我就来说下,ASP.NET mvc 5使用Filter过滤Action参数防止sql注入,让你代码安全简洁.不用每下地方对参数的值都进行检 ...

  10. linux常用命令总结->1

    文件查看命令 cat //查看文件内容 示例:cat /etc/passwd 示例:cat -n /etc/passwd //-n参数行号 示例:cat >> xuliangwei.txt ...