<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="node_modules/jquery/dist/jquery.min.js"></script>

    <style>

        .active{

            background: yellow;

            color: red;

        }

    </style>

</head>

<body>

    <div id="box">active</div>

    <ul>

        <li>1111111</li>

        <li class="active">1111111</li>

        <li>1111111</li>

        <li>1111111</li>

        <li>1111111</li>

        <li>1111111</li>

        <li>1111111</li>

    </ul>

</body>

</html>

<script>

    $('#box').addClass('active')    // 添加

    $('#box').removeClass('active') // 删除

    $('ul li').addClass('active')

    $('ul li').removeClass('active')

    // 链式和隐式的同时使用

    $('ul li').removeClass('active').eq(3).addClass('active')

    // 或

    $('ul li').eq(3).addClass('active').siblings().removeClass('active')

    // hasClass 判断有没有

    console.log($('ul li').eq(1).hasClass('active'))

    // toggleClass  切换：有则去掉；没有，则加上

    $('ul li:eq(1)').toggleClass('active')

</script>

　　

jquery操作class的更多相关文章

  1. 对jquery操作复选框

    摘要:jquery操作复选框.使用更简洁易懂,思路清晰,逻辑更明了,很实用 <!DOCTYPE html> <html> <head> <meta chars ...

  2. jquery操作表格 合并单元格

    jquery操作table,合并单元格,合并相同的行 合并的方法 $("#tableid").mergeCell({ cols:[X,X] ///参数为要合并的列}) /** * ...

  3. input jquery 操作

    本文章主要为了总结开发常用的input等常见html的jquery操作,不是为了展示自己多么菜,只为了积累知识,勿喷!!!不断更新中 $(function () { $("input[nam ...

  4. 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式

    本系列文章导航 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式 一.摘要 本篇文章讲解如何使用jQuery获取和操作元素的属性和CSS样式. 其中DOM属性和元素属性的区分值得 ...

  5. Jquery操作cookie，实现简单的记住用户名的操作

     一.jquery.cookie.js介绍  jquery.cookie.js是一个基于jquery的插件,一个轻量级的cookie 插件,可以读取.写入.删除 cookie. jquery.cook ...

  6. jQuery入门（2）使用jQuery操作元素的属性与样式

    jQuery入门(1)jQuery中万能的选择器 jQuery入门(2)使用jQuery操作元素的属性与样式 jQuery入门(3)事件与事件对象 jQuery入门(4)jQuery中的Ajax()应 ...

  7. Jquery操作select,左右移动,双击移动 取到所有option的值

    $(function () { function MoveItem(fromId, toId) { $("#" + fromId + " option:selected& ...

  8. 解决jquery操作checkbox全选全不选无法勾选问题

    最近在学习中使用jquery操作checkbox,使用下面方法进行全选.反选:$("input[name='checkbox']").attr("checked" ...

  9. jquery 操作

    Jquery使用时要引用,引用时放在最前. Jquery: $代表选择器, $(document) ready(function(e){}):找到页面,页面加载完成后执行. JS选取元素操作内容操作属 ...

  10. jQuery操作Table tr td常用的方法

    虽然现在DIV+CSS进行页的布局大行其道,但是很多地方使用table还是有很多优势,用table展示数据是比较方便的,下面汇总了jQuery操作Table tr td常用的方法,熟记这些操作技巧,下 ...

随机推荐

  1. VUE：引入腾讯地图并实现轨迹动画

    腾讯位置服务JavaScript API 效果: 引入步骤: 在 html 中通过引入 script 标签加载API服务 在一个盒子元素 div 中预先准备地图容器,并在CSS样式中定义地图(容器)显 ...

  2. Chrome 浏览器缓存的问题

    浏览器缓存的问题 Chrome 在浏览器中设置: 1 Ctrl + Shift + Delete 2 Ctrl + F5 强制刷新 3 F12 打开控制台 ---> Network ---> ...

  3. k8s-ingress配置websocket支持

    具体来说,使用的ingress-controller不一样,有关的设置也不太一样 Kubernetes Ingress Controller (k8s官方) 参考 http://github.com/ ...

  4. 使用shell做http web接口，可以传递参数--废弃

    此文章废弃,参考另一篇 参考网址: https://me.jinchuang.org/archives/114.html https://www.cnblogs.com/jinchuang/p/142 ...

  5. Grafana配置Alert监控告警

    1.添加告警途径 这里以slack为例 测试是否可用 在slack上收到告警通知了 安装插件 # grafana-cli plugins install grafana-image-renderer ...

  6. （四）JPA - JQPL 实现增删改查

    (一)JPA的快速入门 建议在需要使用时,看看之前的文章,先把环境搭起来. 5.JPQL JPQL和SQL 1.JPQL和SQL很像,查询关键字都是一样的 2.唯一的区别是:JPQL是面向对象的 JP ...

  7. linux安装node和达梦数据库8

    PS.本次测试只是为了项目需要,但是在部署和启动程序的时候发生了一系列的报错,由此记录下来为日后作参考 安装达梦数据库 1. 达梦数据库(DM8)简介 达梦数据库管理系统是武汉达梦公司推出的具有完全自 ...

  8. Notebook交互式完成目标检测任务

    摘要:本文将介绍一种在Notebook中进行算法开发的新方式,新手也能够快速训练自己的模型. 目标检测是计算机视觉中非常常用且基础的任务,但是由于目标检测任务的复杂性,往往令新手望而却步.本文将介绍一 ...

  9. PAT (Basic Level) Practice 1006 换个格式输出整数 分数 15

    让我们用字母 B 来表示"百".字母 S 表示"十",用 12...n 来表示不为零的个位数字 n(<10),换个格式来输出任一个不超过 3 位的正整数. ...

  10. 在vue中的form表单中下拉框中的数据来自数据库查询到的数据

    文章目录 1.实现的效果: 2.前端html代码 3.js中的代码 4.后端的方法 1.实现的效果: 增加一个新的类型到数据库 2.前端html代码 需要注意的部分:prop后边是表单中的字段 v-m ...