jQuery的data() 和 h5 的 dataset()
作用：获取自定义属性
命名规则：驼峰命名法 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()的更多相关文章
- jquery中data()和js中dataset属性的区别
INTRO html的标签属性data-允许用户自定义属性.原生javascript和jquery分别定义了dataset属性和data()方法对标签中的data属性进行操作. 取值: 如我们定义这样 ...
- jQuery.data() 与 jQuery(elem).data()源码解读
之前一直以为 jQuery(elem).data()是在内部调用了 jQuery.data(),看了代码后发现不是.但是这两个还是需要放在一起看,因为它们内部都使用了jQuery的数据缓存机制.好吧, ...
- HTML 5 的自定义 data-* 属性和jquery的data()方法的使用
人们总喜欢往HTML标签上添加自定义属性来存储和操作数据.但这样做的问题是,你不知道将来会不会有其它脚本把你的自定义属性给重置掉,此外,你这样做也会导致html语法上不符合Html规范,以及一些其它副 ...
- jQuery 中 data 方法的实现原理
前言:jQuery 作为前端使用最多最广泛的 JS 库,其源码每个 JSer 都应该研究一下.早就打算看却一直被各种事拖着,上次某公司面试时被问到 jQuery 中 data 方法是如何实现的,结果答 ...
- html5的自定义data-＊属性和jquery的data()方法的使用示例
人们总喜欢往HTML标签上添加自定义属性来存储和操作数据. 但这样做的问题是,你不知道将来会不会有其它脚本把你的自定义属性给重置掉,此外,你这样做也会导致html语法上不符合Html规范,以及一些其它 ...
- jQuery 的.data()方法
jQuery文档对.data()方法的描述: As of jQuery 1.4.3 HTML 5 data- attributes will be automatically pulled in to ...
- html5的自定义data-*属性与jquery的data()方法的使用
人们总喜欢往HTML标签上添加自定义属性来存储和操作数据.但这样做的问题是,你不知道将来会不会有其它脚本把你的自定义属性给重置掉,此外,你这样做也会导致html语法上不符合Html规范,以及一些其它副 ...
- html5的自定义data-*属性和jquery的data()方法的使用
人们总喜欢往HTML标签上添加自定义属性来存储和操作数据.但这样做的问题是,你不知道将来会不会有其它脚本把你的自定义属性给重置掉,此外,你这样做也会导致html语法上不符合Html规范,以及一些其它副 ...
- Jquery下控制backgroundPosition位置的问题/jquery查找data id相等的元素
1:想通过控制backgroundPosition 来实现动态效果: $(this).animate({"background-positionY":-13},1); //但是火狐 ...
随机推荐
- javamail模拟邮箱功能获取邮件内容-中级实战篇【内容|附件下载方法】（javamail API电子邮件实例）
引言: JavaMail jar包下载地址:http://java.sun.com/products/javamail/downloads/index.html 此篇是紧随上篇文章而封装出来的,阅读本 ...
- MongoDB 及 Mysql 背后的 B/B+树
索引是数据库常见的数据结构,每个后台开发人员都应该对索引背后的数据结构有所了解. 本文通过分析B-Tree及B-/+Tree数据结构及索引性能分析及磁盘存取原理尝试着回答一下问题: 为什么B-Tree ...
- ArcGis10.1 Feature Class Properties无法编辑
被这个问题困扰了很久,最后从官网帮助中查询到资料解决了 先看一下截图: 这种问题一般是FratureClass被锁,被mxd引用,并且发布服务有实例在运行,但我新创建一个FeatureClass也无法 ...
- LintCode 204: Singleton
LintCode 204: Singleton 题目描述 单例是最为最常见的设计模式之一.对于任何时刻,如果某个类只存在且最多存在一个具体的实例,那么我们称这种设计模式为单例.例如,对于class M ...
- 【CodeForces】700 D. Huffman Coding on Segment 哈夫曼树+莫队+分块
[题目]D. Huffman Coding on Segment [题意]给定n个数字,m次询问区间[l,r]的数字的哈夫曼编码总长.1<=n,m,ai<=10^5. [算法]哈夫曼树+莫 ...
- BZOJ3994 约数个数和
3994: [SDOI2015]约数个数和 Time Limit: 20 Sec Memory Limit: 128 MB Description 设d(x)为x的约数个数,给定N.M,求 I ...
- HDU 1074 Doing Homework (dp+状态压缩)
题目链接 Problem Description Ignatius has just come back school from the 30th ACM/ICPC. Now he has a lot ...
- 34、Collections工具类简介
Collections工具类简介 就像数组中的Arrays工具类一样,在集合里面也有跟Arrays类似的工具类Collections package com.sutaoyu.Collections; ...
- 我应该记录一下我不太了解的一些c语言函数
当然,现在还不分类 fmemopen getpagesize()
- 【杂谈】需要mark的一些东西
https://riteme.github.io/blog/2017-10-28/oi-coding-guidelines.html https://www.luogu.org/blog/34238/ ...