Jquery重新学习之三[属性addClass(),removeClass(),toggleClass()]

1:属性.addClass(class|fn)及.removeClass(class|fn)

1.1 .addClass(class) 参数class一个或多个要添加到元素中的CSS类名，请用空格分开

    <style type="text/css">
        .DivStry
        {
            font: 14px;
            color: Red;
        }
        
        .DivTwo
        {
            background-color: Gray;
            border-color: Blue;
        }
    </style>
    <script type="text/javascript">
        $(function () {
            $("#My_Div").addClass("DivStry");
            $("#My_Div").addClass("DivStry DivTwo");
        })
    </script>

    <form id="form1" runat="server">
    <div id="My_Div">
        踏浪帅空间
    </div>

 

1.2 .addClass(fn) 参数function(index,class)此函数必须返回一个或多个空格分隔的class名。接受两个参数，index参数为对象在这个集合中的索引值，class参数为这个对象
原先的class属性值。

    <style type="text/css">
        .Div-0
        {
            font: 14px;
            color: Red;
        }
        
        .Div-1
        {
            background-color: Gray;
            border-color: Blue;
        }
    </style>
    <script type="text/javascript">
        $(function () {
            $('#My_Div').addClass(function() {
                return 'Div-' + $(this).index();
              });
        })
    </script>

    <div id="My_Div">
        踏浪帅空间
    </div>

 

1.3 removeClass() 无参数 直接删除其CSS类名

    <style type="text/css">
        .DivStry
        {
            font: 14px;
            color: Red;
        }
    </style>

    <script type="text/javascript">
        $(function () {
            $("#My_Div").removeClass();
        })
    </script>

    <div id="My_Div" class="DivStry">
        踏浪帅空间
    </div>

 

1.4 removeClass(class) 参数class一个或多个要删除的CSS类名，请用空格分开

    <style type="text/css">
        .DivStry
        {
            font: 14px;
            color: Red;
        }
    </style>

    <script type="text/javascript">
        $(function () {
            $("#My_Div").removeClass("DivStry");
        })
    </script>

    <div id="My_Div" class="DivStry">
        踏浪帅空间
    </div>

 

1.5 .removeClass(fn) 参数此函数必须返回一个或多个空格分隔的class名。接受两个参数，index参数为对象在这个集合中的索引值，class参数为这个对象原先的class属性值。

    <style type="text/css">
        .Div-0
        {
            font: 14px;
            color: Red;
        }
        
    </style>
    <script type="text/javascript">
        $(function () {
            $('#My_Div').removeClass(function() {
                return 'Div-' + $(this).index();
              });
        })
    </script>

    <div id="My_Div" class="Div-0">
        踏浪帅空间
    </div>

 

2:属性.toggleClass(class|fn[,sw])如果存在（不存在）就删除（添加）一个类。反向执行

2.1 .toggleClass(class) 要切换的CSS类名,如果存在（不存在）就删除（添加）一个类

    <style type="text/css">
        .DivStry
        {
            font: 14px;
            color: Red;
        } 
    </style>

    <script type="text/javascript">
        $(function () {
            $("li").toggleClass("DivStry");
        })
    </script>

    <ul>
        <li>第一个</li>
        <li class="DivStry">第二个</li>
        <li>第三个</li>
    </ul>

执行完Html变成:

    <ul>
        <li  class="DivStry">第一个</li>
        <li>第二个</li>
        <li  class="DivStry">第三个</li>
    </ul>

 

2.2 .toggleClass(fn) 回调函数 返回Css类名

$('My_Div').toggleClass(function() {
  if ($(this).parent().is('.bar') {
    return 'DivStry';
  } else {
    return 'Div-1';
  }
});