一、获取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类操作的更多相关文章

  1. HTML5 01. 布局、语义化标签、智能化表单、表单元素／标签／属性／事件、多媒体、类操作、自定义属性

    1.知识点 lang = “en”   所用语言是英文 文档结构更简洁 IE8一下不支持h5c3 书写更宽松 div没有语义 标签语义化:在合适的地方使用合适的标签 对seo优化友谊 网页经典布局 页 ...

  2. Arrays 类操作 Java 的数组排序

    使用 Arrays 类操作 Java 中的数组 Arrays 类是 Java 中提供的一个工具类,在 java.util 包中.该类中包含了一些方法用来直接操作数组,比如可直接实现数组的排序.搜索等( ...

  3. HTML5文件操作API

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

  4. .net使用SqlBulkCopy类操作DataTable批量插入数据库数据，然后分页查询坑

    在使用SqlBulkCopy类操作DataTable批量插入数据,这种操作插入数据的效率很高,就会导致每一条数据在保存的时间基本一样,在我们分页查询添加的数据是,使用数据的添加时间来排序就会出现每页的 ...

  5. PDF.NET数据开发框架实体类操作实例

    PDF.NET数据开发框架实体类操作实例(MySQL)的姊妹篇,两者使用了同一个测试程序,不同的只是使用的类库和数据库不同,下面说说具体的使用过程. 1,首先在App.config文件中配置数据库连接 ...

  6. 在Android下通过ExifInterface类操作图片的Exif信息

    什么是Exif 先来了解什么是Exif.Exif是一种图像文件格式,它的数据存储于JPEG格式是完全相同的,实际上Exif格式就是JPEG格式头插入了 数码照片的信息,包括拍摄的光圈.快门.平衡白.I ...

  7. 使用File类操作文件或目录的属性

    在学I/O流之前,我先总结一下使用File类操作文件或目录的属性. package com.File; import java.io.File; import java.io.IOException; ...

  8. jQuery - 02. 样式表属性操作/类操作、动画、显示隐藏、滑入、淡入、停止动画、节点操作、添加对象、清空节点

    样式表属性操作.css $("div").css({'width':100,'height':100,'background':'red'}); $("div" ...

  9. Java8 时间日期类操作

    Java8 时间日期类操作 Java8的时间类有两个重要的特性 线程安全 不可变类,返回的都是新的对象 显然,该特性解决了原来java.util.Date类与SimpleDateFormat线程不安全 ...

随机推荐

  1. Ubuntu下载搜狗输入法

    实在...因为百度上写的就很好了,所以这里就直接“链”了.. https://jingyan.baidu.com/article/2d5afd6933a67b85a2e28e9f.html

  2. Spring Cloud Stream如何消费自己生产的消息

    在上一篇<Spring Cloud Stream如何处理消息重复消费>中,我们通过消费组的配置解决了多实例部署情况下消息重复消费这一入门时的常见问题.本文将继续说说在另外一个被经常问到的问 ...

  3. SpringBoot项目启动不走内嵌容器

    一.问题 springboot项目java -jar启动不走内嵌容器,如下图,可以看到是直接走系统环境变量里配置的tomcat容器了 二.分析 我的pom.xml文件关键依赖: <depende ...

  4. aspnetcore 容器化部属到阿里云全过程记录

    第一次写博客,作为一个全栈er,记录一下从阿里云到产品运维上线的全过程 一.阿里云上的设置 购买阿里云ECS后: 进控制台查看实例公网IP 在控制台.网络与安全->安全组,配置规则 点击进去可以 ...

  5. 前端开发 vue，angular，react框架对比1

    转载自:https://www.cnblogs.com/hubgit/p/6633214.html 首先,我们先了解什么是MVX框架模式? MVX框架模式:MVC+MVP+MVVM 1.MVC:Mod ...

  6. 使用 Code First 数据库迁移

    当 Entity Framework Code First 的数据模型发生改变时,默认会引发一个System.InvalidOperationException 的异常.解决方法是使用DropCrea ...

  7. 第三章：JavaScript选择元素

    我们使用jQuery时,很常用的套路是“两步”第一步:选取元素第二步:对选中的元素执行需要的操作这一章我们重点研究第一步,如何使用jQuery选取元素以及对选取的结果进行“各种筛选”以满足我们的需求. ...

  8. c++线程同步之信号量

    // MutexExDlg.h : 头文件 // #pragma once // CMutexExDlg 对话框 class CMutexExDlg : public CDialogEx { // 构 ...

  9. Jmeter学习笔记（十二）——断言

    一.断言简介 jmeter中有个元件叫做断言(Assertion).用于检查测试中得到的响应数据等是否符合预期,用以保证性能测试过程中的数据交互与预期一致. 使用断言的目的:在request的返回层面 ...

  10. 如何获取jar包中resource下的文件

    maven工程打jar包,部署到服务器上以后,获取resource下文件的绝对路径是找不到该文件的 只能用流的方式获取,代码如下: import lombok.extern.slf4j.Slf4j; ...