<!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. ElasticSearch之Close index API

    关闭指定的索引. 索引关闭之后: 停止对读.写操作的响应. 停止检索操作的响应. 在索引关闭前,允许执行的操作,关闭之后均不允许执行. ElasticSearch取消对索引的相关维护操作,包含内存中的 ...

  2. vulnhub - tornado - wp

    coverY: 0 tornado 信息收集 目标开放了80,22端口. 访问80网页,是默认页面: 目录枚举 用dirsearch没有什么发现,换gobuster发现了一个bluesky目录.访问如 ...

  3. vue3 + vite + ts 配置 @ 别名

    第一步 npm install @types/node -D 第二步 这是原 vite.config.ts文件 import { defineConfig } from 'vite' import v ...

  4. 让当前元素的width或者height达到父元素的尺寸

    double.infifinity 和double.maxFinite可以让当前元素的width或者height达到父元素的尺寸: 区别: 我想成为我的父母所允许的最大的(double.infinit ...

  5. 连Python都不熟也能跑通AI人脸识别？“隐藏Boss”竟是它！

    摘要:先把AI人脸识别跑起来,然后研究它是如何实现的,整个过程中确实收获不少.所谓先跟着做,再跟着学,实践与理论结合,自己感觉有理解了一些基础概念入个门,在此分享一下自己的捣鼓经验. 1.买台小&qu ...

  6. KubeEdge发布云原生边缘计算威胁模型及安全防护技术白皮书

    摘要:本文将基于KubeEdge项目详细分析云原生边缘计算业务过程的威胁模型并给出对应的安全加固建议. 本文分享自华为云社区<KubeEdge发布云原生边缘计算威胁模型及安全防护技术白皮书> ...

  7. 云图说｜ModelArts Pro：让AI开发更简单

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

  8. linux centos8 安装php nginx mysql 运行phpcms网站

    重新换vps,用centos8,重新配置系统环境,记下笔记: 安装nginx与php 首先安装nginx php ,安装默认版本的nginx,php默认安装7 yum install nginx ph ...

  9. Unity3D 导出的apk进行混淆加固、保护与优化原理（防止反编译）

    ​ Unity3D 导出的apk进行混淆加固.保护与优化原理(防止反编译) 目录 前言: 准备资料: 正文: 1:打包一个带有签名的apk 2:对包进行反编译 3:使用ipaguard来对程序进行加固 ...

  10. Solon 开发进阶，五、全局异常订阅

    Solon 开发进阶 一.插件扩展机制 二.体外扩展机制 三.常用配置说明 四.启动参数说明 五.全局异常订阅 所谓"全局异常",是指通过事件总线发布的异常.目前框架会把未吃掉的异 ...