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 1894
操作类名 假设我们有如下HTML标签，接下来的几个方法都会用到这些标签： <h1>Hello jQuery</h1> <h1>Hello jQuery</h1> <h1>Hello jQuery</h1> addClass( ) 为集合中的每个元素添加类名。 // 使用 addClass() 为 jQ 集合...
jquery动画之toggle()方法
weixin_45846303的博客
05-21 601
toggle方法特别实用，很多时候在页面中都会用到，例如： 点击切换位置、显示隐藏元素 其实就是无限的来回切换0和1两种状态，使用起来比if好用太多了！ 例如： 点击切换标签的背景颜色 //记得载入jQuery库 <script src="js/jquery-1.3.1.min.js" type="text/javascript" charset="utf-8"></script> <p>点我切换</p>
jQuery-3
qq_44588612的博客
04-16 615
文章の目录 学习の目标 一、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 1443
内容来自慕课网：点击打开链接     巩固基础知识还是很有用的jQuery对象与DOM对象对于才开始接触jQuery库的初学者，我们需要清楚认识一点：jQuery对象与DOM对象是不一样的可能一时半会分不清楚哪些是jQuery对象，哪些是DOM对象，下面重点介绍一下jQuery对象，以及两者相互间的转换。通过一个简单的例子，简单区分下jQuery对象与DOM对象：&lt;p id=”imooc”&...
jQuery-css类
最新发布
m0_73839298的博客
10-22 19
作用:用于向被选元素添加一个或多个类，通过定义css样式的class类名来调用。作用:用于对被选元素进行添加/删除类的切换操作。作用:用于从被选元素删除一个或多个类。
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 4674
<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 2591
<br />$.grep(array,callback,invert)<br />使用过滤函数过滤数组元素。<br />      此函数至少传递两个参数：待过滤数组和过滤函数。过滤函数必须返回 true 以保留元素或 false 以删除元素。<br /> invert(Boolean) :(可选) 如果 "invert" 为 false 或为设置，则函数返回数组中由过滤函数返回 true 的元素，当"invert" 为 true，则返回过滤函数中返回 false 的元素集。<br /><br />若想要筛
实现放大，下坠消失，扩散消失效果
zhvsby的专栏
10-05 912
<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
显示show()隐藏hide()
zhvsby的专栏
10-05 807
<br />show()---用来显示包装集里的元素<br />hide()---用来隐藏包装集里的元素<br />首先$通过将style属性的display值改为none来完成元素隐藏，如果包装集里一个元素已经隐藏，它将保持隐藏状态，但依然被返回给$链。<br />其次 若初始化时将style属性的display值显示设置为none而是元素隐藏，则调用show()命令后，元素的display值将总是被设置为block。<br />因此在初始化时不要利用元素的style属性隐藏元素，而应该在页面的就绪处理程
wrapInner()
zhvsby的专栏
10-05 786
This is a paragraph.This is another paragraph.加粗段落中的所有内容--------------------------
jQuery.map
zhvsby的专栏
10-05 774
返回值<br />Array参数<br />array (Array) : 待转换数组。<br />callback (Function) : 为每个数组元素调用，而且会给这个转换函数传递一个表示被转换的元素作为参数。函数可返回任何值。另外，此函数可设置为一个字符串，当设置为字符串时，将 视为“lambda-form”（缩写形式？），其中 a 代表数组元素。如“a * a”代表“function(a){ return a * a; }”。示例<br />将原数组中每个元素加 4 转换为一个新数组。 <br
wrapAll()
zhvsby的专栏
10-05 728
wrapAll()于wrap()是不同的，wrap()为每一个匹配的元素都包裹一次。而wrapAll()则是把每一个匹配的元素合成相邻元素再进行全部包裹。经过HTML代码段：A
remove() empty() after()
zhvsby的专栏
10-05 719
<br />remove()----从页面DOM里删除包装集所有元素。需要注意的是从DOM里删除的元素仍然被该包装集引用着。<br />empty()-----清空匹配集里所有dom元素的内容<br />after()-------after() 方法在被选元素后插入指定的内容。<br />如：<br /><html><br /><head><br /><script type="text/javascript" src="/jquery/jquery.js"></script><br /><script
jquery-ul-li实现分页功能 转载仅供交流
05-20
好的，下面是使用 jQuery 实现 ul-li 分页功能的代码示例： HTML 代码： ```html <div id="pagination"> <ul> <li class="prev"><a href="#">Prev</a></li> <li class="page"><a href="#">1</a></li> <li class="page"><a href="#">2</a></li> <li class="page"><a href="#">3</a></li> <li class="page"><a href="#">4</a></li> <li class="page"><a href="#">5</a></li> <li class="next"><a href="#">Next</a></li> </ul> </div> ``` CSS 代码： ```css #pagination { text-align: center; } #pagination ul { display: inline-block; margin: 0; padding: 0; } #pagination li { display: inline-block; margin: 0; padding: 0; } #pagination li a { display: inline-block; margin: 0 5px; padding: 5px 10px; border: 1px solid #ccc; text-decoration: none; color: #333; } #pagination li.active a { background-color: #333; color: #fff; } ``` JavaScript 代码： ```javascript $(document).ready(function() { var pageSize = 10; // 每页显示的记录数 var pageCount = 5; // 分页栏显示的页码数 var $pagination = $('#pagination ul'); var $prev = $pagination.find('.prev'); var $next = $pagination.find('.next'); var $pages = $pagination.find('.page'); // 计算总页数 var totalRecords = 100; // 总记录数 var totalPages = Math.ceil(totalRecords / pageSize); // 初始化分页栏 function initPagination() { $pages.hide(); $pages.filter(':lt(' + pageCount + ')').show(); $pagination.find('.active').removeClass('active'); $pages.eq(0).addClass('active'); $prev.addClass('disabled'); $next.toggleClass('disabled', totalPages <= pageCount); } // 显示指定页码的记录 function showPage(page) { var start = (page - 1) * pageSize; var end = start + pageSize; // 显示分页数据 // ... } // 点击分页栏页码 $pages.click(function() { var $this = $(this); if (!$this.hasClass('active')) { var page = $this.text(); showPage(page); $pagination.find('.active').removeClass('active'); $this.addClass('active'); $prev.toggleClass('disabled', page == 1); $next.toggleClass('disabled', page == totalPages); if (page > pageCount && page < totalPages) { $pages.hide(); $pages.filter(':lt(' + (pageCount - 2) + ')').show(); $pages.filter(':eq(0),:eq(-1)').show(); } else if (page >= totalPages - pageCount + 2) { $pages.hide(); $pages.filter(':gt(' + (totalPages - pageCount - 1) + ')').show(); $pages.filter(':eq(0),:eq(-1)').show(); } } }); // 点击上一页 $prev.click(function() { var $this = $(this); if (!$this.hasClass('disabled')) { var page = $pagination.find('.active').text(); showPage(page - 1); $pagination.find('.active').removeClass('active').prev().addClass('active'); $prev.toggleClass('disabled', page == 2); $next.toggleClass('disabled', false); if (page > pageCount && page <= totalPages) { $pages.hide(); $pages.filter(':lt(' + (pageCount - 2) + ')').show(); $pages.filter(':eq(0),:eq(-1)').show(); } } }); // 点击下一页 $next.click(function() { var $this = $(this); if (!$this.hasClass('disabled')) { var page = $pagination.find('.active').text(); showPage(parseInt(page) + 1); $pagination.find('.active').removeClass('active').next().addClass('active'); $prev.toggleClass('disabled', false); $next.toggleClass('disabled', page == totalPages - 1); if (page >= 1 && page < totalPages - pageCount + 1) { $pages.hide(); $pages.filter(':gt(' + (page - 2) + '):lt(' + (pageCount - 2) + ')').show(); $pages.filter(':eq(0),:eq(-1)').show(); } } }); // 初始化分页栏和显示第一页数据 initPagination(); showPage(1); }); ``` 这段代码实现了一个简单的分页功能，其中 `totalRecords` 变量表示总记录数，`pageSize` 变量表示每页显示的记录数，`pageCount` 变量表示分页栏显示的页码数，可以根据实际情况进行调整。在 `showPage` 函数中可以实现分页数据的显示逻辑，具体实现可以根据实际情况进行编写。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值