<!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. Git和Github库详细使用教程

    SVN 是集中式或者有中心式版本控制系统,版本库是集中放在中央服务器的; Git 是分布式版本控制系统,那么它就没有中央服务器的,每个人的电脑就是一个完整的版本库,这样,工作的时候就不需要联网了,因为 ...

  2. Linux：LVM磁盘扩容实战

    1.列出分区表 命令:fdisk -l 查看到目前挂载了 vda1.vda2.vda3,并且查看到还有vdb 100G没有挂载,以及现在的LV大小仅为29G root@JumpServer-DB-T0 ...

  3. 记录：excel导入导出js-xlsx，处理合并

    效果 前情提要 后端传excel坐标数据,前端自己处理模板,找资料后,选择直接载入xlsx方式. 准备工作 npm i xlsx import * as XLSX from 'xlsx' 方法一:数据 ...

  4. 技术实践丨PostgreSQL开启Huge Page场景分析

    PostgreSQL用户经常发现,服务端在连接数较大的情况下,会出现系统内存消耗过多的情况,严重者可能会造成OOM.但是服务端配置的共享内存(shared_buffers,wal_buffers等)是 ...

  5. 云图说｜初识云数据库GaussDB（for Cassandra）

    摘要:不用再为数据不一致苦恼,因为强一致的Cassandra来了,DBA们不用加班修数据了.GaussDB(for Cassandra)是一款基于华为自主研发的计算存储分离架构的分布式云数据库服务,是 ...

  6. 数仓出现“wait in ccn queue”的时候，怎么迅速定位处理？

    摘要:现网在使用动态负载管理的时候,经常出现很多wait in ccn的情况,大家处理起来就会认为是hung住或者怎么着了,很着急,但wait ccn其实就是一个等待资源的状态,在此总结一个ccn问题 ...

  7. vue3，对比 vue2 有什么优点？

    摘要:Vue3新版本的理念成型于 2018 年末,当时的 Vue 2 已经有两岁半了.比起通用软件的生命周期来这好像也没那么久,Vue3在2020年正式推出,在源码和API都有较大变化,性能得到了显著 ...

  8. JS引擎(0):JavaScript引擎群雄演义—起底JavaScript引擎

    JavaScript 既是一个 面向过程的语言 又是一个 面向对象的语言.在 JavaScript 中,通过在运行时给空对象附加方法和属性来创建对象,与编译语言如 C++ 和 Java 中常见的通过语 ...

  9. allowedOrigins cannot contain the special value "*"

    Spring Boot的版本高于 2.4以后 ,原来的配置已经不适合目前的版本 将代码中的allowedOrigins改为allowedOriginPatterns @Configuration pu ...

  10. IntelliJ IDEA lombok log 报红

    pom文件中引用了  lombok 插件,但Intellij 代码里仍然是红色提示,具体操作如下 Mac