一、自定义属性（html5标准）data-属性名称="属性值"

  • 自定义属性的名称驼峰式命名规则需要用-隔开
  • 自定义属性名称如果连在一起写，大写会自动转为小写
    data-user="eric"======>属性名称是user

    data-user-name="eric"===>属性名称是userName

    data-userName="eric"=====>属性名称是username

二、jquery的方式操作自定义属性，jQuery方式操作的是内存

三、HTML5的方式获取自定义属性，HTML5操作的是DOM

四、案例：tab切换

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>HTML5自定义属性</title>

    <style>

        ul{

            list-style: none;

            width: 400px;

        }

        .nav li{

            width: 100px;

            height: 40px;

            line-height: 40px;

            text-align: center;

            color: #fff;

            background: black;

            float: left;

            cursor: pointer;

        }

        ul:first-child li.active{

            background: red;

        }

        .box li{

            width: 400px;

            height: 400px;

            background: pink;

            display: none;

        }

        .box li.show{

            display: block;

        }

    </style>

</head>

<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="content02" class="show">内容2</li>

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

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

    </ul>

    <script>

        window.onload=function(){

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

                // nav部分

                var currentLi=e.target;

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

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

                oldLi.classList.remove("active");

                currentLi.classList.add("active");

                // content部分

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

                oldContent.classList.remove("show");

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

                currentContent.classList.add("show");

            }

        }

    </script>

</body>

</html>

HTML5自定义属性操作的更多相关文章

  1. Jquery 操作HTML5自定义属性data-*

    HTML5自定义属性规范的写法<a data-roleid="12"></a>,也可以直接写<a roleid="12">& ...

  2. HTML5自定义属性对象Dataset简介

    一.html5 自定义属性介绍 我之前翻译的“你必须知道的28个HTML5特征.窍门和技术”一文中对于HTML5中自定义合法属性data-已经做过些介绍,就是在HTML5中我们可以使用data-前缀设 ...

  3. DOM自定义属性操作

        DOM标准     (一)核心DOM 可以操作一切结构化文档的API,包括HTML和XML,核心DOM是万能的,但又是繁琐的. (二)HTML DOM 专门操作HTML文档的简化版DOM AP ...

  4. HTML5文件操作API

    HTML5文件操作API       一.文件操作API 在之前我们操作本地文件都是使用flash.silverlight或者第三方的activeX插件等技术,由于使用了这些技术后就很难进行跨平台.或 ...

  5. HTML5 自定义属性 data-*属性名一定要小写吗？

    最近学习 javascript ,参考书籍是< javascript 高级程序设计>第三版,在介绍自定义元素属性时书中给出了一个例子,如下:<div id="myDiv&q ...

  6. HTML5类操作

    一.获取DOM的方式 ①通过类名获取元素,以伪数组形式存在 document.getElementsByClassName("class"); ②通过css选择器获取元素,符合匹配 ...

  7. js 自定义属性操作

    自定义属性操作     element.属性 获取内置属性值     element.getAttribute("属性") 我们自己添加的属性叫自定义属性     element. ...

  8. HTML5自定义属性之data-*

    HTML5 增加了一项新功能是 自定义数据属性 ,也就是  data-* 自定义属性.在HTML5中我们可以使用以 data- 为前缀来设置我们需要的自定义属性,来进行一些数据的存放.当然高级浏览器下 ...

  9. HTML5 自定义属性 data-*介绍

    在HTML5之前HTML4我们也可以自定义属性通过setAttribute去设置或者直接写在HTML标签里面那么HTML5新增data-*(*可以替换成你喜欢的任意名字)属性有什么用呢? 更便的捷操作 ...

随机推荐

  1. Nginx惊群问题

    Nginx惊群问题 "惊群"概念 所谓惊群,可以用一个简单的比喻来说明: 一群等待食物的鸽子,当饲养员扔下一粒谷物时,所有鸽子都会去争抢,但只有少数的鸽子能够抢到食物, 大部分鸽子 ...

  2. Java CPU占用过高问题排查,windows和Linux

    LINUX系统: linux系统比较简单: 1.使用命令 ps -ef | grep 找出异常java进程的pid.  找出pid为 20189 2. top -H -p 20189,所有该进程的线程 ...

  3. idea: unable to import maven project

    新搭建的maven环境,使用idea创建maven项目时,一直提示 unable to import maven project,百度良久未解决 有说关闭防火前的,亲测无效,后看到说是maven-3. ...

  4. SQL Server修改表的模式schema

    use myDBgo create schema myschema --先建立go alter schema myschema transfer dbo.myTable --移动对象至建立的schem ...

  5. JAVA相关知识

    1.CopyOnWrite (1).在写操作的线程,会将数组复制出来一份进行操作.而原本的数组不会做改变. (2)读线程则不会受到影响,但是可能读到的是一个过期的数据. 在juc(java.util. ...

  6. 【转载】C#中string.IsNullOrEmpty和string.IsNullOrWhiteSpace区别

    在C#中判断字段是否为空或者Null的时候,我们一般会使用到string.IsNullOrEmpty和string.IsNullOrWhiteSpace方法,这两个方法在大部分情况下判断的结果是一致的 ...

  7. JavaScript 数组 遍历方法 map( ) 和 forEach( )

    let arr = [1, 3, 7, 6, 9]; 不用知道元素的个数,即不用设置开始下标和结束下标. 1:forEach( )会把数组中的每个值进行操作,没有返回值,undefined let j ...

  8. Multipath 多路径配置说明

    查看主机或者存储交换机上的www号,在存储上将LUN映射给需要的主机 cat  /sys/class/fc_host/host*/port_name 0x2002d0431efb7f5d 6d 该ww ...

  9. RabbitMQ-python应用

    介绍 官方文档:https://www.rabbitmq.com/tutorials/tutorial-one-python.html RabbitMQ是一个基于AMQP协议的消息代理.它的工作就是接 ...

  10. Delphi INI 文件读写

    delphi中,配置文件的相关操作. () INI文件的结构: ;这是关于INI文件的注释部分 [节点] 关键字=值 ... INI文件允许有多个节点,每个节点又允许有多个关键字, “=”后面是该关键 ...