<!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. MagicArray基本使用方法

    MagicArray致力于让研发不再卷,这个灵感来源于php语言,可能多少年以后,php可能不会有太多人记得.但是在一个年代里,如果论坛里里常见最火爆的帖子无疑是:php是世界上最好的编程语言.由此可 ...

  2. 尚医通项目学习若依+springboot+springsecurity+redis+fastjson

    尚医通 [基于若依快速开发医疗系统] 主要内容 学习目标 项目简介 一款医疗平台. 系统包含:系统管理.药品进销存管理.看病就诊.收费管理.检查管理.数据统计等. 涉及技术 SpringBoot.My ...

  3. 大四jsp实训项目技术总结

    crm项目总结 ①静态资源疯狂报错?很有可能是后端的问题,后端出了问题,服务器取不出来资源. 记住:只要服务器取不到某个资源,很有可能导致所有资源都取不出来. 一个经典案例:某个数据库映射文件 ICu ...

  4. 构建健康游戏环境：DFA算法在敏感词过滤的应用

    现在的游戏有敏感词检测这一点,相信大家也不陌生了,不管是聊天,起名,签名还是简介,只要是能让玩家手动输入的地方,一定少不了敏感词识别,至于识别之后是拒绝修改还是星号替换,这个就各有各的做法了,但是绕不 ...

  5. PySimpleGUI 使用浅谈

    1. 背景 PySimpleGUI是一个简单易用的Python GUI库,它提供了一种直观且快速创建图形用户界面的方式. 2. 安装 pip install PySimpleGUI 3. PySimp ...

  6. java中获取内网IP

    package com.dashan.utils.iputils; import org.apache.commons.lang.StringUtils; import javax.servlet.h ...

  7. Flume快速入门

    Flume快速入门 一.简介 高可用.高可靠,分布式的海量日志采集.聚合和传输系统,基于流式架构,灵活简单. event:事件 source:数据源 sink:目标 channel:数据管道 通过获取 ...

  8. 第十三部分_awk

    一.awk介绍 1. awk概述 awk是一种编程语言,主要用于在linux/unix下对文本和数据进行处理,是linux/unix下的一个工具.数据可以来自标准输入.一个或多个文件,或其它命令的输出 ...

  9. KubeEdge在边缘计算领域的安全防护及洞察

    摘要:着重介绍Kubeedge在安全防护方面的实践,并介绍OpenSSF在开源软件安全方面的计划与目标. 本文分享自华为云社区<KubeEdge在边缘计算领域的安全防护及洞察>,作者:华为 ...

  10. 深度克隆从C#/C/Java漫谈到JavaScript真复制

    如果只想看js,直接从JavaScript标题开始. 在C#里面,深度clone有System.ICloneable.创建现有实例相同的值创建类的新实例 克隆原理 值类型变量与引用类型变量 如果我们有 ...