HTML5类操作
一、获取DOM的方式
①通过类名获取元素，以伪数组形式存在
document.getElementsByClassName("class");
②通过css选择器获取元素，符合匹配条件的第1个元素
document.querySelector("selector");
③通过css选择器获取元素，以伪数组形式存在
document.querySelectorAll("selector");
二、jQuery操作类的方法(参考文章jQuery相关方法2)
①增加 addClass( )
②删除 removeClass( )
③切换 toggleClass( )
④判断 hasClass( )
三、HTML5操作类的方法（通过classList这个对象调用方法，classList获取的是这个DOM元素上的所有class）
①增加一个类样式 dom.classList.add( )
②删除一个类样式 dom.classList.remove( )
③切换类样式dom.classList.toggle( )
④判断类样式是否存在 dom.classList.contains( )
注意：这些方法更多的运用于移动端，在移动端，jQuery的方法使用的更少（杀鸡焉用牛刀！）
四、案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML5类操作</title>
<style>
ul{
list-style: none;
}
li{
width: 100px;
height: 40px;
line-height: 40px;
text-align: center;
color: #fff;
background: black;
float: left;
cursor: pointer;
}
li.active{
background: red;
}
</style>
</head>
<body>
<ul>
<li>菜单1</li>
<li class="active">菜单2</li>
<li>菜单3</li>
<li>菜单4</li>
</ul>
<script>
window.onload=function(){
// 切换当前样式的效果
document.querySelector("ul").onclick=function(e){
// 当前的li
var currentLi=e.target;
//如果已经被选中,程序停止
if(currentLi.classList.contains("active")) return false;
// 如果没有被选中,之前的去除,再给当前的加上
document.querySelector("li.active").classList.remove("active");
currentLi.classList.add("active");
}
}
</script>
</body>
</html>
HTML5类操作的更多相关文章
- HTML5 01. 布局、语义化标签、智能化表单、表单元素／标签／属性／事件、多媒体、类操作、自定义属性
1.知识点 lang = “en” 所用语言是英文 文档结构更简洁 IE8一下不支持h5c3 书写更宽松 div没有语义 标签语义化:在合适的地方使用合适的标签 对seo优化友谊 网页经典布局 页 ...
- Arrays 类操作 Java 的数组排序
使用 Arrays 类操作 Java 中的数组 Arrays 类是 Java 中提供的一个工具类,在 java.util 包中.该类中包含了一些方法用来直接操作数组,比如可直接实现数组的排序.搜索等( ...
- HTML5文件操作API
HTML5文件操作API 一.文件操作API 在之前我们操作本地文件都是使用flash.silverlight或者第三方的activeX插件等技术,由于使用了这些技术后就很难进行跨平台.或 ...
- .net使用SqlBulkCopy类操作DataTable批量插入数据库数据，然后分页查询坑
在使用SqlBulkCopy类操作DataTable批量插入数据,这种操作插入数据的效率很高,就会导致每一条数据在保存的时间基本一样,在我们分页查询添加的数据是,使用数据的添加时间来排序就会出现每页的 ...
- PDF.NET数据开发框架实体类操作实例
PDF.NET数据开发框架实体类操作实例(MySQL)的姊妹篇,两者使用了同一个测试程序,不同的只是使用的类库和数据库不同,下面说说具体的使用过程. 1,首先在App.config文件中配置数据库连接 ...
- 在Android下通过ExifInterface类操作图片的Exif信息
什么是Exif 先来了解什么是Exif.Exif是一种图像文件格式,它的数据存储于JPEG格式是完全相同的,实际上Exif格式就是JPEG格式头插入了 数码照片的信息,包括拍摄的光圈.快门.平衡白.I ...
- 使用File类操作文件或目录的属性
在学I/O流之前,我先总结一下使用File类操作文件或目录的属性. package com.File; import java.io.File; import java.io.IOException; ...
- jQuery - 02. 样式表属性操作/类操作、动画、显示隐藏、滑入、淡入、停止动画、节点操作、添加对象、清空节点
样式表属性操作.css $("div").css({'width':100,'height':100,'background':'red'}); $("div" ...
- Java8 时间日期类操作
Java8 时间日期类操作 Java8的时间类有两个重要的特性 线程安全 不可变类,返回的都是新的对象 显然,该特性解决了原来java.util.Date类与SimpleDateFormat线程不安全 ...
随机推荐
- Typora语法使用说明
目录 文本 标题 超链接 锚点 列表 引用 插入图片 脚注 代码 LaTex公式 插入表情 任务列表 高亮 注脚 文本 代码: *斜体* **粗体** ***斜体加粗体*** ~~删除线~~ < ...
- jQuery无缝轮播图思路详解-唯品会
效果图如上: 需求:图片自动轮播,鼠标移上停止播放,离开恢复播放,箭头切换图片. html代码 <!--轮播图大盒子开始--> <div class="wrap" ...
- UOJ343 清华集训2017 避难所 构造、打表
传送门 玄学题 考虑构造三个数\(p_1p_2,p_1p_2,p_1p_2\)满足贪心分解会分解为\(p_1^3,p_2,p_2,p_2\),那么需要满足条件 1.\(p_1 , p_2 \in Pr ...
- java.lang.ClassNotFoundException: org.springframework.boot.bind.RelaxedPropertyResolver 错误解决
1.今天在搭建SpringBoot整合 pageHelper的时候报错如下 1.1 引入依赖如下: <!-- 分页插件 --> <dependency> <groupId ...
- webpack--splitChunksPlugin配置学习随笔
该配置用于代码抽离.官方文档 官方默认配置: module.exports = { //... optimization: { splitChunks: { chunks: 'async', // 异 ...
- Fortify漏洞之Dynamic Code Evaluation: Code Injection（动态脚本注入）和 Password Management: Hardcoded Password（密码硬编码）
继续对Fortify的漏洞进行总结,本篇主要针对 Dynamic Code Evaluation: Code Injection(动态脚本注入) 和 Password Management: Har ...
- 笔谈OpenGL ES（一）
现在图形类.视频类app越来越多,学习OpenGL ES是很有必要的,作为程序员是有必要做技术积累的.现在做播放器开发的工作,正好也涉及这块,那就好好学一学. CSDN上有套教程不错,OpenGL E ...
- MySQL Case--应用服务器性能瓶颈导致慢SQL
在分析优化慢SQL时,除考虑慢SQL对应执行计划外,还需要考虑 1. 慢SQL发生时间点的数据库服务器性能 2.慢SQL发生时间点的应用程序服务器性能 3. 慢SQL发生时间点数据库服务器和应用服务器 ...
- 关于MySql升级JDBC架包导致时区问题报错（The server time zone value '?й???????' is unrecognized or represents more than one time zone）
报错信息: The server time zone value '?й???????' is unrecognized or represents more than one time zone. ...
- MySQL学习总结 （InnoDB）
主要内容: 存储结构 索引 锁 事务 存储结构 表 索引组织表:表是根据主键顺序组织存放的.如果表中没有非空惟一索引,引擎会自动创建一个6字节大小的指针. 主键的索引是定义索引的顺序,而不是建表时列的 ...