zoukankan      html  css  js  c++  java
  • jQuery CSS 添加/删除类名

    addClass(class) — 为每个匹配的元素添加指定的类名。
    参数 : class — 一个或多个要添加到元素中的CSS类名,请用空格分开(String)
    示例 一 :
    为匹配的元素加上 'selected' 类
    HTML 代码:
    <p>Hello</p>
    jQuery 代码:
    $("p").addClass("selected");
    结果:
    [ <p class="selected">Hello</p> ]
    示例 二 :
    为匹配的元素加上 selected highlight 类
    HTML 代码:
    <p>Hello</p>
    jQuery 代码:
    $("p").addClass("selected highlight");
    结果:
    [ <p class="selected highlight">Hello</p> ]

    addClass(function(index, class)) — 为每个匹配的元素添加指定的类名。

    参数 : function(index, class) — 此函数必须返回一个或多个空格分隔的class名。接受两个参数,index参数为对象在这个集合中的索引值,class参数为这个对象原先的class属性值。(Function)
    示例 : 给li加上不同的class
    HTML 代码:
    <ul><li>Hello</li><li>Hello</li><li>Hello</li></ul>
    jQuery 代码:
    $('ul li:last').addClass(function() {
      return 'item-' + $(this).index();
    });

    removeClass([class]) — 从所有匹配的元素中删除全部或者指定的类。

    参数 : class (可选) — 一个或多个要删除的CSS类名,请用空格分开(String)
    示例 : 
    从匹配的元素中删除 'selected' 类
    HTML 代码:
    <p class="selected first">Hello</p>
    jQuery 代码:
    $("p").removeClass("selected");
    结果:
    [ <p class="first">Hello</p> ]

    删除匹配元素的所有类
    HTML 代码:
    <p class="selected first">Hello</p>
    jQuery 代码:
    $("p").removeClass();
    结果:
    [ <p>Hello</p> ]

    removeClass(function(index, class)) — 从所有匹配的元素中删除全部或者指定的类。
    参数 : function(index, class) — 此函数必须返回一个或多个空格分隔的class名。接受两个参数,index参数为对象在这个集合中的索引值,class参数为这个对象原先的class属性值。(Function)
    示例:
    删除最后一个元素上与前面重复的class
    jQuery 代码:
    $('li:last').removeClass(function() {
        return $(this).prev().attr('class');
    });

    toggleClass(class) — 如果存在(不存在)就删除(添加)一个类。
    参数 : class — CSS类名(String)
    示例 :
    为匹配的元素切换 'selected' 类
    HTML 代码:
    <p>Hello</p><p class="selected">Hello Again</p>
    jQuery 代码:
    $("p").toggleClass("selected");
    结果:
    [ <p class="selected">Hello</p>, <p>Hello Again</p> ]

    toggleClass(class, switch) — 如果开关switch参数为true则加上对应的class,否则就删除。
    参数 :
    class — 要切换的CSS类名(String)
    switch — 用于决定元素是否包含class的布尔值(Boolean)
    示例 :
    每点击三下加上一次 'highlight' 类
    HTML 代码:
    <strong>jQuery 代码:</strong>
    jQuery 代码:
      var count = 0;
      $("p").click(function(){
          $(this).toggleClass("highlight", count++ % 3 == 0);
      });

    toggleClass(function(index, class), [switch])— 如果开关switch参数为true则加上对应的class,否则就删除。
    参数 :
    function(index, class)— 返回class名的一个函数,接受两个参数,index为元素在集合中的索引位置,class为原先元素的class值(Function)
    switch — (可选)用于决定元素是否包含class的布尔值(Boolean)
    示例 :
    根据父元素来设置class属性
    jQuery 代码:
    $('div.foo').toggleClass(function() {
      if ($(this).parent().is('.bar') {
        return 'happy';
      } else {
        return 'sad';
      }
    });

  • 相关阅读:
    MySQL根据出生日期计算年龄的五种方法比较
    用于测试API并生文档的开发人员工具
    【实例】使用Eolinker工具进行接口测试时传递集合参数的方法
    如何克服API测试中的挑战
    关于API网关(一)性能
    为什么需要监控API
    比Swagger2更好用的自动生成文档工具?对比流程说话!
    如何通过3个步骤执行基本的API测试
    【学习】API接口测试用例编写规则
    微信小程序之蓝牙 BLE 踩坑记录
  • 原文地址:https://www.cnblogs.com/xupeiyu/p/4012730.html
Copyright © 2011-2022 走看看