<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>this的使用</title>
    <script src="jquery-3.4.1.min.js"></script>
    <style>
        .test{
            background: skyblue;
            color: snow;
        }
    </style>
</head>
<body>
    <button>aaa</button>
    <button>bbb</button>
    <button>ccc</button>
    <script>
        $(()=>{
             $("button").click(function(){
                $(this).addClass("test")//为当前元素增加test类
                $(this).siblings().removeClass("test")//获取元素的兄弟元素，并去掉他们的test类
            });
        })
    </script>
</body>
</html>

JS - this 操作 dom ， 添加样式的更多相关文章

  1. dom添加样式可以这样写

    1.原生 js添加样式很多时可以合并在一起写: var oPopwin = document.getElementById('vpage'); oPopwin.style.margin = 'init ...

  2. 原生js移除或添加样式

    样式效果如下,点击商品详情 添加样式active 代码 <!doctype html> <html lang="en"> <head> < ...

  3. JS/JQuery操作DOM元素笔记

    原因 自己目前在搭建一个.NET Core的框架,正在构建权限这块的东西,今天设置权限界面,需要使用JavaScript操作DOM元素,记录一下. 页面大概是酱紫的(我使用的AdminLTE和LayU ...

  4. 天坑之路：用js给选中文字添加样式

    前言 本例基于react,但是实际上就是用原生js做的.兼容性做到了IE9,但是按照这个思路做是可以做到IE8甚至更低的. 需求与最初的思路 当我拿到这个需求的时候以为很简单,就是可以给页面上的文章做 ...

  5. js动态操作DOM

    创建一个元素 createElement() 向元素末尾添加一个子节点 appendChild() 将新的元素插入到指定元素的前面 insertBefore(new,old); 删除一个子节点 rem ...

  6. js实现分页列表添加样式

    <script> var dUrl=window.location.href; var cUrl=(dUrl.substring(0, dUrl.indexOf('list_'))); v ...

  7. JavaScript操作DOM对象

    js的精华即是操作DOM对象 [1]先看代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8& ...

  8. JavaScript操作DOM的那些坑

    js在操作DOM中存在着许多跨浏览器方面的坑,本文花了我将近一周的时间整理,我将根据实例整理那些大大小小的“坑”. DOM的工作模式是:先加载文档的静态内容.再以动态方式对它们进行刷新,动态刷新不影响 ...

  9. JS 操作Dom节点之样式

    为了提高用户体验,我们经常会动态修改Dom节点的样式,各种浏览器差异比较大,我们如何应对?不断尝试,不断总结~! 1. style.getComputedStyle.currentStyle 内嵌样式 ...

  10. JS中的DOM操作怎样添加、移除、移动、复制、创建和查找节点

    DOM操作怎样添加.移除.移动.复制.创建和查找节点? (1)创建新节点 createDocumentFragment() //创建一个DOM片段 createElement() //创建一个具体的元 ...

随机推荐

  1. 【C#】【System.IO】关于拷贝文件夹以及（Directory和DirectoryInfo、File和FileInfo）的区别

    本次问题是想要拷贝文件夹,但是找了一圈发现只有File有Copy或者FileInfo的CopyTo,并没有Directory的拷贝操作方法. 针对C#中拷贝文件夹的方法就是先生成一个目标文件夹(des ...

  2. nginx-通过配置不同的虚拟主机实现，不同的uri访问不同资源

    先来一个配置 再来另外一个 这两个地址对应的域名都配置解析了,并且解析的ipv4地址是你的服务器ip,且上面配置文件中的内容都在服务器做了相应的配置,对应的路径下的资源是需要准备好的(比如网站或图片或 ...

  3. 面试官：说说JVM内存整体结构？

    Java JVM内存结构的面试常问知识 说说JVM内存整体的结构?线程私有还是共享的? JVM 整体架构,中间部分就是 Java 虚拟机定义的各种运行时数据区域. Java 虚拟机定义了若干种程序运行 ...

  4. Ubuntu 安装MySQL 8.0.23及以上版本

    首先如果当前linux中没有wget,那么我们可以考虑使用sudo apt-get install wget来安装wget命令 Ubuntu自带的源只能安装MySQL5.7版本,这里去MySQL官网安 ...

  5. 云图说｜交换数据空间Exchange Data Space

    本文分享自华为云社区<云图说|交换数据空间Exchange Data Space>,作者: 阅识风云. 阅识风云是华为云信息大咖,擅长将复杂信息多元化呈现,其出品的一张图(云图说).深入浅 ...

  6. 执行计划缓存，Prepared Statement性能跃升的秘密

    摘要:一起看一下GaussDB(for MySQL)是如何对执行计划进行缓存并加速Prepared Statement性能的. 本文分享自华为云社区<执行计划缓存,Prepared Statem ...

  7. GaussDB(for openGauss)让数据“存得下、算得快、算得准”

    摘要:本文从总体架构.数据分布方式.计算下推.数据强一致等方面进行介绍GaussDB(for openGauss). 1.前言 随着云计算规模越来越大,企业业务数据量呈指数级增长,传统数据库在海量数据 ...

  8. MySQL 数据库救火：磁盘爆满了，怎么办？

    摘要:当磁盘空间爆满后,MySQL会发生什么事呢?又应该怎么应对? 本文分享自华为云社区<[MySQL 数据库救火]- 磁盘突然爆满的处理方式>,原文作者:技术火炬手 . 大多数用户在对于 ...

  9. OpenSSF发布npm 最佳实践指南，应对开源依赖风险

    开源安全基金会(OpenSSF)发布了 npm 最佳实践指南,以帮助 JavaScript 和 TypeScript 开发人员降低使用开源依赖项相关的安全风险.OpenSSF Best Practic ...

  10. 火山引擎DataLeap的Catalog系统搜索实践 （二）：整体架构

    整体架构 火山引擎DataLeap的Catalog搜索系统使用了开源的搜索引擎Elasticsearch进行基础的文档检索(Recall阶段),因此各种资产元数据会被存放到Elasticsearch中 ...