<!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. 【scikit-learn基础】--『监督学习』之 支持向量机回归

    在机器学习中,支持向量机(Support Vector Machine)算法既可以用于回归问题,也可以用于分类问题. 支持向量机(SVM)算法的历史可以追溯到1963年,当时前苏联统计学家弗拉基米尔· ...

  2. 9 个让你的 Python 代码更快的小技巧

    哈喽大家好,我是咸鱼 我们经常听到 "Python 太慢了","Python 性能不行"这样的观点.但是,只要掌握一些编程技巧,就能大幅提升 Python 的运 ...

  3. 2023-11-29：用go语言，给你一个字符串 s ，请你去除字符串中重复的字母，使得每个字母只出现一次。 需保证 返回结果的字典序最小。 要求不能打乱其他字符的相对位置)。 输入：s = “cba

    2023-11-29:用go语言,给你一个字符串 s ,请你去除字符串中重复的字母,使得每个字母只出现一次. 需保证 返回结果的字典序最小. 要求不能打乱其他字符的相对位置). 输入:s = &quo ...

  4. 文心一言 VS 讯飞星火 VS chatgpt （48）-- 算法导论6.1 6题

    值为<23,17,14,6,13,10,1,5,7,12>的数组是一个最大堆吗? 文心一言: 是的,这个数组是一个最大堆. 最大堆是一种特殊的二叉树,它满足以下性质:对于任意节点 x,其子 ...

  5. 关于Triple DES（3DES）对称加密算法

    一.引言 在网络安全领域,对称加密算法作为一种常见的加密手段,被广泛应用于保障数据传输的保密性和完整性.其中,DES(Data Encryption Standard)算法作为一种经典的对称加密算法, ...

  6. MySQL篇：bug1_navicat添加外键保存后不起作用（消失）

    问题 在Nacicat premium中添加外键一保存就消失 用SQL语句也显示创建成功,没有报错,可是在INSERT中又起不到约束作用 解决办法 参考一下资料发现可能是表的类型不支持外键 要在 My ...

  7. 面试官问我：CSS有哪些属性可以继承？

    摘要:本文带大家学习一下关于CSS属性的继承. 本文分享自华为云社区<关于CSS有哪些属性可以继承?>,作者:黛琳ghz. 前言 今天遇到一个很有意思的题目,通过题目可以顺便学习一下关于C ...

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

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

  9. 带你认识Flink容错机制的两大方面：作业执行和守护进程

    摘要:Flink 容错机制主要有作业执行的容错以及守护进程的容错两方面,前者包括 Flink runtime 的 ExecutionGraph 和Execution的容错,后者则包括 JobManag ...

  10. 云图说｜ASM灰度发布，让服务发布变得更敏捷、更安全

    阅识风云是华为云信息大咖,擅长将复杂信息多元化呈现,其出品的一张图(云图说).深入浅出的博文(云小课)或短视频(云视厅)总有一款能让您快速上手华为云.更多精彩内容请单击此处. 摘要:通常产品优化迭代的 ...