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); //但是火狐 ...
随机推荐
- shell学习1---基本的shell命令
基本脚本 反引号: `` 反引号里面的内容是命令行,通过反引号用户可以将shell命令的输出赋给变量,比如: test=`date +%y%m%d` echo "The time is : ...
- Header File Dependencies
[Header File Dependencies] 什么时候可以用前置声明替代include? 1.当 declare/define pointer&reference 时. 2.当 dec ...
- Linux学习2-fork
复制进程映像 fork() 要想让进程同时执行多个函数,我们可以使用线程或从源程序中创建一个完全分离的进程,后者就像init的做法一样,而不像exec调用那样用新程序替换当前指向的线程. 我们可以通过 ...
- CF264B Good Sequences
传送门 Description: 松鼠丽丝特别喜欢n个她称之为“好整数”的整数:a1,a2,……,an.(会输入) 现在,她对“好序列”很感兴趣.如果一个序列x1,x2,...,xk能够满足一下三个条 ...
- 某大型网络社区传播性XSS分析
某大型网络社区传播性XSS分析 这个XSS存在于天涯某个不起眼的子论坛,通过发布新帖子可以触发. 漏洞分析 论坛针对XSS有一定过滤措施,例如转义单双引号,过滤左右尖括号等等.所 ...
- weblogica domain目录 环境变量 如何启动weblogic server
手工启动weblogic server
- java 判断上传文件大小
/** * 判断文件大小 * * @param file * 文件 * @param size * 限制大小 * @param unit * 限制单位(B,K,M,G) * @return */ pu ...
- ParameterizedType获取java泛型参数类型
ParameterizedType getClass().getGenericSuperclass() 返回表示此 Class 所表示的实体(类.接口.基本类型或 void)的直接超类的 Type,然 ...
- Ubuntu下使用Nginx+uWSGI+Flask(初体验)
Ubuntu 18.04,Nginx 1.14.0, uWSGI 2.0.17.1,Flask, 前言 Windows不支持uWSGI!为了上线自己的项目,只能选择Linux. 自己前面开发了一个Fl ...
- MFC中CString.Format类详解
在MFC程序中,使用CString来处理字符串是一个很不错的选择.CString既可以处理Unicode标准的字符串,也可以处理ANSI标准的字符串.CString的Format方法给我们进行字符串的 ...