<button>切换</button>
    <div class="div1">123</div>
    <script src="./jquery.min.js"></script>
    <script>
        // JavaScript中,设定class的属性值,会将之前的属性值也覆盖掉
        // 如果需要添加新的 class属性值,需要先获取之前的属性值,再拼接上新的属性值
        // 如果需要删除其中的某一个属性值,先获取所有的属性值,字符串替换,将要删除的属性值替换为空字符串
        // const oDiv = document.querySelector('div');
        // oDiv.className = 'div2';
        // 在jQuery中有非常灵活简便的class属性值操作方法
        // 1,新增标签class属性值
        $('div').addClass('div2');
        $('div').addClass('div3 div4');
        // 2,删除标签class属性值
        $('div').removeClass('div3');
        $('div').removeClass('div4 div2');
        // 3,切换标签class属性值
        // 有,删除 没有,新增
        const oBtn = document.querySelector('button');
        oBtn.addEventListener( 'click' , ()=>{
            $('div').toggleClass('div10');
        })
        // 4,判断是否有这个class属性值
        console.log( $('div').hasClass('div1') );
        // addClass()     原有基础上,新增class
        // removeClass()  原有基础上,删除class
        // toggleClass()  有就删除,没有就新增
 
 
 <style>
        div{
            width: 100px;
            height: 100px;
            background: pink;
            border:1px solid #000;
        }
    </style>
</head>
<body>
    <div style="color:red;">123</div>
    <script src="./jquery.min.js"></script>
    <script>
        // css样式操作
        // jQuery中不用考虑兼容性,所有的语法都不需要考虑浏览器兼容性
        // jQuery都会给你处理好
        // $().css(属性)          获取属性的属性值  结果有px单位
        // $().css(属性,属性值)    设定属性的属性值
        // 获取
        console.log( $('div').css('color') );
        console.log( $('div').css('border') );
        console.log( $('div').css('background') );
        console.log( $('div').css('width') );
        // 设定
        // 语法形式1,设定一个属性和属性值
        $('div').css('color' , 'blue');
        // $('div').css('fontSize' , '100px');
        // $('div').css('font-size' , '100px');
        $('div').css('font-size' , 100);
        // 语法形式2,可以通过一个对象,同时设定多个属性以及对应的属性值
        $('div').css({
            width : 400,
            height : 200,
            fontSize : 50,
            'background-color' : 'orange',
        })

jquery的class操作 css样式操作的更多相关文章

  1. JQuery中操作Css样式的方法

    JQuery中操作Css样式的方法//1.获取和设置样式 $("#tow").attr("class")获取ID为tow的class属性 $("#tw ...

  2. jQuery操作css样式

    jQuery操作css样式 css操作的分类: css操作 位置操作 尺寸操作 css操作之css css代码: html代码: jQuery代码: 效果如下: css操作之位置操作 css代码: h ...

  3. JQuery DOM操作 、属性和CSS样式操作、其他函数

    DOM操作 1.在div1内部最后追加一个节点 $("#div1").append("<img src='../01-HTML基本标签/img/Male.gif'/ ...

  4. 【转发】JQuery中操作Css样式的方法

    JQuery中操作Css样式的方法 //1.获取和设置样式 $("#tow").attr("class")获取ID为tow的class属性 $("#t ...

  5. jquery操作css样式的方法

    jquery操作css样式的方法(设置和获取)

  6. jQuery学习之旅 Item3 属性操作与样式操作

    本节将Dom元素的操作:属性操作.样式操作.设置和获取HTML,文本和值.Css-Dom操作. 1.属性操作 <input type="text" name="us ...

  7. jq选择器（jq 与 js 互相转换），jq操作css样式 / 文本内容， jq操作类名，jq操作全局属性,jq获取盒子信息,jq获取位置信息

    jq选择器(jq 与 js 互相转换) // 获取所有的页面元素jq对象 $('css3选择器语法'); var $box = $(".box:nth-child(1)"); 获取 ...

  8. 11-13 js操作css样式

    1.Js操作css样式 Div.style.width=”100px”.在div标签内我们添加了一个style属性,并设定了width值.这种写法会给标签带来大量的style属性,跟实际项目是不符. ...

  9. js css样式操作代码（批量操作）

    js css样式操作代码(批量操作) 作者: 字体:[增加 减小] 类型:转载 时间:2009-10-09   用js控制css样式,能让网页达到良好的的用户体验甚至是动画的效果.并且考虑到效率.   ...

  10. js操作css样式、js的兼容问题

    一.js操作css样式 div . style . width="200px" 在div标签内我们添加了一个style属性,并设定width值.这种写法会给标签带来大量的style ...

随机推荐

  1. Node 中的 Stream ？应用场景？

    一.是什么 流(Stream),是一种数据传输手段,是端到端信息交换的一种方式,是有顺序的,是逐块读取数据.处理内容,用于顺序读取输入或写入输出 在很多时候,流(Stream)是字节流(Byte St ...

  2. 牛客网-SQL专项训练14

    ①通过子查询的方式从衬衫表SHIRTABLE中选取出销售单价shirt_price高于全部衬衫的平均价格的衬衫名字:B 解析: 题目要求需要用到子查询,故排除AC选项,而D选项在where子句中使用了 ...

  3. 深度解析｜基于 eBPF 的 Kubernetes 一站式可观测性系统

    ​简介:阿里云 Kubernetes 可观测性是一套针对 Kubernetes 集群开发的一站式可观测性产品.基于 Kubernetes 集群下的指标.应用链路.日志和事件,阿里云 Kubernete ...

  4. 阿里云发布第四代神龙架构，提供业界首个大规模弹性RDMA加速能力

    ​简介:10月20日,2021年杭州云栖大会上,阿里云发布第四代神龙架构,升级至全新的eRMDA网络架构,是业界首个大规模弹性RDMA加速能力. 10月20日,2021年杭州云栖大会上,阿里云发布第四 ...

  5. 淘宝推荐、视频搜索背后的检索技术竟是它！深度揭秘达摩院向量检索引擎Proxima

    简介: 淘宝搜索推荐.视频搜索的背后使用了什么样的检索技术?非结构化数据检索,向量检索,以及多模态检索,它们到底解决了什么问题?今天由阿里巴巴达摩院的科学家从业务问题出发,抽丝剥茧,深度揭秘达摩院内部 ...

  6. 基于 Scheduled SQL 对 VPC FlowLog 实现细粒度时间窗口分析

    简介: 针对VPC FlowLog的五元组和捕获窗口信息,在分析时使用不同时间窗口精度,可能得到不一样的流量特征,本文介绍一种方法将原始采集日志的时间窗口做拆分,之后重新聚合为新的日志做分析,达到更细 ...

  7. 时序数据库永远的难关 — 时间线膨胀(高基数 Cardinality)问题的解决方案

    ​简介: 本文主要讨论 influxdb 在遇到写入的数据出现高基数 Cardinality 问题时,一些可行的解决方案. 作者 | 徐建伟 (竹影) 前序 随着移动端发展走向饱和,现在整个 IT 行 ...

  8. 快手基于 Flink 构建实时数仓场景化实践

    简介: 一文了解快手基于 Flink 构建的实时数仓架构,以及一些难题的解决方案. 本文整理自快手数据技术专家李天朔在 5 月 22 日北京站 Flink Meetup 分享的议题<快手基于 F ...

  9. [FAQ] crontab 执行curl xxx 好像没有执行 ?

      如果你的crontab任务中的curl命令没有执行,可能有几个原因需要检查: 1. 检查命令路径:确保你在crontab任务中指定了正确的curl命令路径.你可以使用 which curl 命令来 ...

  10. SemanticFunction 融合 LLM 和传统编程

    本文将继续和大家介绍 SemanticKernel 神奇的魔法,将使用 LLM 大语言模型编写的自然语言函数和传统的编程语言编写的函数融合到一起的例子.通过本文的例子,大家可以看到 SemanticK ...