<!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. minio集群部署

    minio集群部署 1.说明: 安装前需要再添加一个磁盘后将磁盘挂载到/opt/minio目录,minio集群部署需要独占磁盘分区,不能使用文件夹代替. 运行分布式 MinIO 实例的服务器时间差不应 ...

  2. Java使用HttpUtil.request方法可以发送请求即【Java访问url得到响应数据】

    Java使用HttpUtil.request方法可以发送请求即[Java访问url得到响应数据] 注:这个工具类可以在网上找,也可以自己手写 ,手写的话需要用到以下依赖: <dependency ...

  3. ElasticSearch之cat allocation API

    查看各节点上各个shard的硬件使用情况,命令样例如下: curl -X GET "https://localhost:9200/_cat/allocation?v=true&pre ...

  4. java漏洞学习平台搭建

    java漏洞平台搭建 项目地址 : https://github.com/j3ers3/Hello-Java-Sec 配置mvn 先配置一下mvn,下载后解压 proxychains wget htt ...

  5. CentOS7部署后优化配置

    1.安装必要的组件.升级 yum -y install wget vim cd /etc/yum.repos.d/ rm -rf /etc/yum.repos.d/*.repo wget http:/ ...

  6. LLM增强LLM；通过预测上下文来提高文生图质量；Spikformer V2；同时执行刚性和非刚性编辑的通用图像编辑框架

    文章首发于公众号:机器感知 LLM增强LLM:通过预测上下文来提高文生图质量:Spikformer V2:同时执行刚性和非刚性编辑的通用图像编辑框架 LLM Augmented LLMs: Expan ...

  7. QRCoder1.4.3生成二维码，不依赖System.Drawing，解决"未能找到类型或命名空间名QRCode"，"及ImageFormatPng仅在windows上受支持"

    生成二维码1(简单) 包引用: <PackageReference Include="QRCoder" Version="1.4.3" /> usi ...

  8. 微信小程序数组

    常用函数 concat(): 连接两个或多个数组,返回连接后的新数组. 示例:const arr1 = [1, 2, 3]; const arr2 = [4, 5, 6]; const arr3 = ...

  9. 云小课｜手把手教您在PyCharm中连接云端资源进行代码调试

    摘要:让我们看看如何在PyCharm中连接云端资源进行代码调试吧! 本文分享自华为云社区<[云小课]EI第54课 手把手教您在PyCharm中连接云端资源进行代码调试>,作者:Hello ...

  10. 面试官：说一下Jena推理

    摘要:本文介绍了Jena的推理子系统,并构建了一个简单的RDF图.基于该RDF图,我们搭建了一个Jena推理引擎,并进行自动化推理. 本文分享自华为云社区<知识推理之基于jena的知识推理(三) ...