zoukankan      html  css  js  c++  java
  • jQuery css()与class()的用法

    一.css()用法:
       1.设置css
        // css(name, value)
        // 修改单个样式
        // name:样式名 value:样式值
        $("li")
          .css("backgroundColor", "pink")
          .css("color", "red")
          .css("fontSize", "32px");
    
        
        //css(obj)
        //修改多个样式
    
        $("li").css({
          backgroundColor:"pink",
          color: "red",
          fontSize:"32px",
          border: "1px solid black"
        });

        2.获取css样式:

        //获取样式
        //css(name)
        //name:想要获取的样式
        $("li").eq(0).css("fontSize");
    

    二.class()的用法:

      1.class()设置

    addClass()方法向匹配的元素增加指定的类名(一个或多个)
    注意:对于元素来说,class属性可以有多个值.该方法不会移除已经存在的值,而是在原有的基础上追加一个或多个class属性.
    实例:$('li').addClass('basic');
    //为li元素追加一个basic类

      2.删除class

      $('li').removeClass('basic');//移除basic这个类样式
      $('li').removeClass();//移除li元素的全部类样式

      3.判断class

         // hasClass()方法是用来检查被选择的元素是否包含指定的class名
          //返回一个布尔值true或者false
          $('li').hasClass("basic");//其中class是必须的值,规定需要在指定元素中查找的类名。
          $('li').hasClass("basic className");//判断多个类
          //与.is()一样
          $('li').is('.basic')//同样检查是否包含指定的class名 注意带上点类名
          $('li').is("basic className")//判断多个类

      4.切换类:

    //判断li有没有basic类,如果有,就移除他,如果没有,添加他
                $("li").toggleClass("basic");
    
                //$(selector).toggleClass(function(index,class),switch)
                //函数定义返回需要添加或删除的一个或多个类名
                //index - 可选,接受选择器的索引位置。
                //class - 可选,接受选择器的当前的类。
                //switch - 可选。布尔值,为true则加上对应的class,否则就删除。
                $('input').click(function () {
                  $("li").toggleClass(function () {
                      return "basic";          
                })
  • 相关阅读:
    python note 30 断点续传
    python note 29 线程创建
    python note 28 socketserver
    python note 27 粘包
    python note 26 socket
    python note 25 约束
    Sed 用法
    python note 24 反射
    python note 23 组合
    python note 22 面向对象成员
  • 原文地址:https://www.cnblogs.com/wanguofeng/p/10756477.html
Copyright © 2011-2022 走看看