<!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. GPT Zero 是什么？

    from https://openaigptguide.com/gptzero/ 在人工智能技术飞速发展的今天,人们对于文字内容的准确性和可信度要求越来越高.例如在学术研究领域,防止抄袭和造假是非常重 ...

  2. ACTF flutter逆向学习

    参考了许多大佬的博客,在此特别诚挚感谢oacia大佬和其他大佬的博客和指导! 1.flutter和apk基础结构介绍 首先下载附件,是一个apk文件,用jadx打开 可以看见flutter字样,而fl ...

  3. IIS通过ARR实现负载均衡

    一.实现整体方式介绍 项目中部署在windows服务器上的项目,需要部署负载均衡,本来想用nginx来配置的,奈何iis上有几个项目,把80端口和443端口占用了,nginx就用不了了(因为通过域名访 ...

  4. Python——第一章：循环语句while

    循环语句可以让我们的代码重复的去执行 while循环: while 条件:        代码 过程: 判断while循环的条件是否为真, 如果真, 执行代码. 然后再次判断条件.....直到条件为假 ...

  5. Asp .Net Core 系列： 集成 Consul 实现 服务注册与健康检查

    目录 什么是 Consul? 安装和运行 Consul Asp .Net Core 如何集成 Consul 实现服务注册和健康检查 Consul.AspNetCore 中的 AddConsul 和 A ...

  6. 文心一言 VS 讯飞星火 VS chatgpt （55）-- 算法导论6.3 1题

    文心一言 VS 讯飞星火 VS chatgpt (55)-- 算法导论6.3 1题 一.参照图6-3 的方法,说明 BUILD-MAX-HEAP在数组 A=(5,3,17,10,84,19,6,22, ...

  7. Java 设置PDF文档过期时间（有效期）

    有些文档具有一定时效性,需在规定时间段内才可阅读查看,针对此类文档,需要设置文档的过期日期.时间等.下面以Java示例演示为例如何给PDF文档设置过期时间.需使用PDF类库, Free Spire.P ...

  8. Serverless遇到 FinOps: Economical Serverless

    摘要:本文基于FunctionGraph在Serverless 领域的FinOps探索和实践,提出业界首个Serverless函数总成本估计模型 历川:华为云Serverless研发专家 平山:华为云 ...

  9. 教你用ab命令进行并发与压力测试

    摘要:今天给大家分享一篇如何使用ab进行并发与压力测试的文章 本文分享自华为云社区<[高并发]如何使用ab进行并发与压力测试?>,作者:冰 河. 今天给大家分享一篇如何使用ab进行并发与压 ...

  10. 火山引擎 DataTester：如何用 A/B 测试做产品增长？

    技术交流.求职机会,欢迎关注字节跳动数据平台微信公众号,回复[1]进入官方交流群 随着如今越来越高的获客成本,用户拉新变得不再容易:而且由于获客成本的增高,让用户留存也变得更加重要.同时,一个产品的使 ...