zoukankan      html  css  js  c++  java
  • jQuery 属性操作

    实例

    对设置和移除所有

    元素的 "main" 类进行切换:

    $("button").click(function(){
      $("p").toggleClass("main");
    });
    
    <html>
    <head>
    <script type="text/javascript" src="/jquery/jquery.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
      $("button").click(function(){
        $("p").toggleClass("main");
      });
    });
    </script>
    
    <style type="text/css">
    .main
    {
    font-size:120%;
    color:red;
    }
    </style>
    </head>
    
    <body>
    <h1 id="h1">This is a heading</h1>
    <p>This is a paragraph.</p>
    <p>This is another paragraph.</p>
    <button class="btn1">切换段落的 "main" 类</button>
    </body>
    

    定义和方法

    toggleClass() 对设置或移除被选元素的一个或多个类进行切换。

    该方法检查每个元素中指定的类。如果不存在则添加类,如果已设置则删除之。这就是所谓的切换效果。

    不过,通过使用 "switch" 参数,您能够规定只删除或只添加类。

    语法

    $(selector).toggleClass(class,switch)
    

    参数

    参数 描述
    class

    必需。规定添加或移除 class 的指定元素。

    如需规定若干 class,请使用空格来分隔类名。

    switch 可选。布尔值。规定是否添加或移除 class。

    使用函数来切换类

    $(selector).toggleClass(function(index,class),switch)
    

    例子

    <html>
    <head>
    <script type="text/javascript" src="/jquery/jquery.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
      $("button").click(function(){
        $('ul li').toggleClass(function(){
          return 'listitem_' + $(this).index();
        });
      });
    });
    </script>
    <style type="text/css">
    .listitem_1, .listitem_3
    {
    color:red;
    }
    .listitem_0, .listitem_2
    {
    color:blue;
    }
    </style>
    </head>
    
    <body>
    <h1 id="h1">This is a heading</h1>
    <ul>
    <li>Apple</li>
    <li>IBM</li>
    <li>Microsoft</li>
    <li>Google</li>
    </ul>
    <button class="btn1">添加或移除列表项的类</button>
    </body>
    </html>
    

    参数

    参数 描述
    function(index,class)

    必需。规定返回需要添加或删除的一个或多个类名的函数。

    • index - 可选。接受选择器的 index 位置。
    • class - 可选。接受选择器的当前的类。
    switch 可选。布尔值。规定是否添加(true)或移除(false)类。
  • 相关阅读:
    .net Dapper 学习系列(1) ---Dapper入门
    ASP.NET WebApi 学习与实践系列(2)---WebApi 路由请求的理解
    ASP.NET WebApi 学习与实践系列(1)---如何创建 WebApi
    Sqlserver 总结(2) 存储过程
    Image.Save出错 GDI 一般错误
    python导入模块的两种方式
    从1KW条数据中筛选出1W条最大的数
    C# EF更新当前实体报错 ObjectManager无法管理具有相同键值的多个对象
    微信小程序 异步请求拿数据+使用外部js库
    微信小程序入门 第一个页面搭建
  • 原文地址:https://www.cnblogs.com/ccorz/p/jQuery-shu-xing-cao-zuo--toggleClass--fang-fa.html
Copyright © 2011-2022 走看看