JQuery---toggleClass()

最新推荐文章于 2023-10-22 17:58:30 发布
最新推荐文章于 2023-10-22 17:58:30 发布
阅读量2.4k 收藏
点赞数
分类专栏： JQuery 文章标签： border table function html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhvsby/article/details/5908336
版权

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <title>Disco Zebra Stripes!</title>
    <script type="text/javascript" src="../scripts/jquery-1.2.1.js">
    </script>
    <script type="text/javascript">
      $(function() {
        $("table tr:nth-child(even)").addClass("striped");
      });

      function swap() {
        $('tr').toggleClass('striped');
      }
    </script>
    <style>
      body,td {
        font-size: 10pt;
      }
      table {
        background-color: black;
        border: 1px black solid;
        border-collapse: collapse;
      }
      th {
        border: 1px outset silver;
        background-color: maroon;
        color: white;
      }
      tr {
        background-color: white;
        margin: 1px;
      }
      tr.striped {
        background-color: coral;
      }
      td {
        padding: 1px 8px;
      }
    </style>
  </head>

  <body>
    <table οnmοuseοver="swap()" οnmοuseοut="swap()">
      <tr>
        <th>Year</th>
        <th>Make</th>
        <th>Model</th>
      </tr>
      <tr>
        <td>1965</td>
        <td>Ford</td>
        <td>Mustang</td>
      </tr>
      <tr>
        <td>1970</td>
        <td>Toyota</td>
        <td>Corolla</td>
      </tr>
      <tr>
        <td>1979</td>
        <td>AMC</td>
        <td>Jeep CJ-5</td>
      </tr>
      <tr>
        <td>1983</td>
        <td>Ford</td>
        <td>EXP</td>
      </tr>
      <tr>
        <td>1985</td>
        <td>Dodge</td>
        <td>Daytona</td>
      </tr>
      <tr>
        <td>1990</td>
        <td>Chrysler</td>
        <td>Jeep Wrangler Sahara</td>
      </tr>
      <tr>
        <td>1995</td>
        <td>Ford</td>
        <td>Ranger</td>
      </tr>
      <tr>
        <td>1997</td>
        <td>Chrysler</td>
        <td>Jeep Wrangler Sahara</td>
      </tr>
      <tr>
        <td>2000</td>
        <td>Chrysler</td>
        <td>Jeep Wrangler Sahara</td>
      </tr>
      <tr>
        <td>2005</td>
        <td>Chrysler</td>
        <td>Jeep Wrangler Unlimited</td>
      </tr>
      <tr>
        <td>2007</td>
        <td>Dodge</td>
        <td>Caliber R/T</td>
      </tr>
    </table>
  </body>
</html>

说明：toggleClass()来回切换样式

zhvsby
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery---操作类名
qq_45802159的博客
11-25 1887
操作类名 假设我们有如下HTML标签，接下来的几个方法都会用到这些标签： <h1>Hello jQuery</h1> <h1>Hello jQuery</h1> <h1>Hello jQuery</h1> addClass( ) 为集合中的每个元素添加类名。 // 使用 addClass() 为 jQ 集合...
jQuery-黑马笔记
desson
04-09 1421
系列文章目录 提示：这里可以添加系列文章的所有文章的目录，目录需要自己手动添加 例如：第一章 Python 机器学习入门之pandas的使用 提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录系列文章目录一、jQuery介绍及常用API1.jQuery的概述2.jQuery的使用3.jQuery的入口函数4.jQuery的顶级对象 $5.jQuery对象和dom对象二、jQuery常用API1.jQuery选择器2.jQuery样式操作3.jQuery筛选选择器4.jQuery的
jQuery-3
qq_44588612的博客
04-16 603
文章の目录 学习の目标 一、jQuery 事件注册 二、jQuery 事件处理2.1 事件处理 on() 绑定事件 2.2 事件处理 off() 解绑事件2.3 事件处理 trigger() 自动触发事件 三、jQuery 事件对象 四、jQuery 拷贝对象 五、jQuery 多库共存 六、jQuery 插件 6.1 瀑布流插件（重点讲解） 6.1.1 瀑布流插件使用步骤演示 6.2 图片懒加载插件 6.2.1 图片懒加载插件使用步骤演示 6.3 全屏滚动插件 6
JQuery-样式篇
wust_cyl的博客
05-09 1440
内容来自慕课网：点击打开链接     巩固基础知识还是很有用的jQuery对象与DOM对象对于才开始接触jQuery库的初学者，我们需要清楚认识一点：jQuery对象与DOM对象是不一样的可能一时半会分不清楚哪些是jQuery对象，哪些是DOM对象，下面重点介绍一下jQuery对象，以及两者相互间的转换。通过一个简单的例子，简单区分下jQuery对象与DOM对象：&lt;p id=”imooc”&...
jQuery-css类
最新发布
m0_73839298的博客
10-22 18
作用:用于向被选元素添加一个或多个类，通过定义css样式的class类名来调用。作用:用于对被选元素进行添加/删除类的切换操作。作用:用于从被选元素删除一个或多个类。
jQuery-初识-操作(章节一)
可可的博客
12-14 658
jQuery-函数对象、特有选择器、操作样式(章节一) 引入jQuery文件 jquery-1.11.0.min.js 语法:$("h1"); //返回的对象并不是原生的dom对象，而是jquery封装的dom对象，但是可以通过索引值获取原生的dom对象 <script> var $ = function(selector){ var domList = document.querySelectorAll(selector); domList.__pr
Jquery-day01
weixin_50519232的博客
04-26 1472
jquery是一个js工具库，它是对js的封装形成工具类。 jquery选择器： 一. jquery操作DOM 1.如何获取dom get()获取到的是一个dom对象 console.log($("tr").get(1)); jquery转dom jq[0] dom转化为jquery $(js对象) con...
JQuery -01 基础代码
m0_59214979的博客
01-24 687
本节：jquery的基础代码 jQuery jQuery 是为事件处理特别设计的。 1.隐藏所有元素，显示元素 <script> $(document).ready(function(){ $("button").click(function(){ $("*").hide();//$("*")是所有元素，hide()是隐藏 }); }); $("#show").click(function(){ $("p").show(); ...
jQuery-样式操作
wsssq_的博客
03-11 78
操作css、设置类
jquery-1.11.3.min.js —— jquery库
热门推荐
ZT1090258642的博客
03-12 1万+
转载地址:https://www.cnblogs.com/SongHuiJuan/p/8058217.html jquery-1.11.3.min.js —— jquery库 /*! jQuery v1.11.3 | (c) 2005, 2015 jQuery Foundation, Inc. | jquery.org/license */ ! function(a, b) { "o...
jquery-3.4.1.min.zip
08-15
4. **CSS操作**：jQuery提供了一系列方法来操作CSS属性，如`css()`, `addClass()`, `removeClass()`, `toggleClass()`等。 5. **动画效果**：`fadeIn()`, `fadeOut()`, `slideToggle()`等方法可以轻松创建过渡动画...
jquery-ui.min1.12.1.zip
09-10
$(this).toggleClass("ui-state-active"); // 添加/移除激活状态 $(this).children("ul").slideToggle(); // 使用滑动效果展开/折叠子菜单 } }); ``` 至此，你已经成功地使用jQuery UI 1.12.1创建了一个层级菜单...
jQuery-1.7.js
08-06
`.addClass()`, `.removeClass()`, `.toggleClass()`则方便地管理CSS类。 4. **事件处理**：利用`.on()`进行事件绑定，例如`$('element').on('click', function() { ... })`。 5. **动画效果**：`.fadeIn()`, `....
JQuery-API
08-10
- `toggleClass()`: 切换元素的类。 5. **动画效果** - `fadeIn()`: 淡入效果。 - `fadeOut()`: 淡出效果。 - `slideToggle()`: 滑动切换显示/隐藏。 - `animate()`: 自定义动画，可以改变CSS属性。 6. **...
Jquery-Basics
05-11
$(this).parent().toggleClass("completed"); }); ``` 这个例子展示了如何在点击“添加任务”按钮后，将新的待办事项添加到列表中，并允许用户通过点击按钮标记任务为已完成。 通过以上讲解，你已经掌握了jQuery...
jQuery.inArray(value,array)
zhvsby的专栏
10-05 4673
<br /><br /><br />      确定第一个参数在数组中的位置(如果没有找到则返回 -1 )。<br /><br />      返回值：jQuery<br /><br />      参数：<br />      value(Any) :用于在数组中查找是否存在。<br />      array(Array) :待处理数组。<br /><br />      示例：<br />      删除重复 div 标签。<br />      jQuery 代码:<br />       程序代
对数组进行筛选
zhvsby的专栏
10-05 2587
<br />$.grep(array,callback,invert)<br />使用过滤函数过滤数组元素。<br />      此函数至少传递两个参数：待过滤数组和过滤函数。过滤函数必须返回 true 以保留元素或 false 以删除元素。<br /> invert(Boolean) :(可选) 如果 "invert" 为 false 或为设置，则函数返回数组中由过滤函数返回 true 的元素，当"invert" 为 true，则返回过滤函数中返回 false 的元素集。<br /><br />若想要筛
实现放大，下坠消失，扩散消失效果
zhvsby的专栏
10-05 908
<br /><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><br /><html><br />  <head><br />    <title>Custom Effects Demo</title><br />    <link rel="stylesheet" type="text/css" href="../common.css"><br />    <script ty
jquery-ul-li实现分页功能 转载仅供交流
05-20
好的，下面是使用 jQuery 实现 ul-li 分页功能的代码示例： HTML 代码： ```html <li class="prev"><a href="#">Prev</a></li> <li class="page"><a href="#">1</a></li> <li class="page"><a href="#">2...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值