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); //但是火狐 ...
随机推荐
- yum安装_yum命令的相关操作
2017年1月11日, 星期三 yum安装的四种方式 一.默认:从国外下载 二.国内:从阿里获取 http://mirrors.aliyun.com 1. cd /etc/yum.repos.d 2 ...
- hive介绍
我最近研究了hive的相关技术,有点心得,这里和大家分享下. 首先我们要知道hive到底是做什么的.下面这几段文字很好的描述了hive的特性: 1.hive是基于Hadoop的一个数据仓库工具,可以将 ...
- php设计模式-工厂设计模式
概念: 工厂设计模式提供获取某个对象的新实例的一个接口,同时使调用代码避免确定实际实例化基类步骤. 很多高级模式都是依赖于工厂模式.
- iOS二维码扫描的实现(Swift)
随着二维码的普遍使用,二维码扫描也成为了很多app的一个基本功能,本篇主要来介绍一下如何实现一个简单的二维码扫描功能.本文使用了XCode自带的AVFoundation 库,利用Swfit语言实现. ...
- 【leetcode 简单】 第六十九题 删除链表中的节点
请编写一个函数,使其可以删除某个链表中给定的(非末尾)节点,你将只被给定要求被删除的节点. 现有一个链表 -- head = [4,5,1,9],它可以表示为: 4 -> 5 -> 1 - ...
- Shell基础-通配符
* - 通配符,代表任意字符 ? - 通配符,代表一个字符 # - 注释 | - 分隔两个管线命令的界定 ; - 连续性命令的界定 ~ - 用户的根目录 $ - 变量前需要加的变量值 ! - 逻辑运算 ...
- http方式传递参数值转义或乱码的处理（base64）
如果通过http方式传递参数url编码了,可用urlEncode和urlDecode,这种方式不同开发语言编码出来的可能不同,所以不同开发语言最好用base64编码和解码来处理: base64加密: ...
- 适配器在JavaScript中的体现
适配器设计模式在JavaScript中非常有用,在处理跨浏览器兼容问题.整合多个第三方SDK的调用,都可以看到它的身影. 其实在日常开发中,很多时候会不经意间写出符合某种设计模式的代码,毕竟设计模式就 ...
- 20165320 第四次实验 Android开发
实验内容: Android程序设计-1 实验要求: - 参考<Java和Android开发学习指南(第二版)(EPUBIT,Java for Android 2nd)>第二十四章: - 参 ...
- Spring4笔记10--SSH整合1--Spring与Hibernate整合
SSH 框架整合技术: 1. Spring与Hibernate整合(对比Spring与JDBC模板): Service业务层代码和测试类都不变,添加实体类的映射配置文件: <?xml versi ...