@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <link href="~/Content/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet" />
    <title>ChapterThreeOppClass</title>
    <style>
        .divStyle {
            width:400px;
            height:200px;
            margin:10px auto;
            border:1px solid #aaa;
        }
        .backRed {
            background-color:#ea4823;
        }
        .backBlue {
            background-color:#5985d3;
        }
    </style>
</head>
<body>
    <div class="divStyle" id="mydiv"> </div>
    <div class="text-center">
        <button class="btn btn-primary" onclick="AddClass()" id="btnAddClass">addClass()</button>
        <button class="btn btn-primary" onclick="RemoveClass()" id="btnRemoveClass">RemoveClass()</button>
        <button class="btn btn-primary" onclick="ToggleClass()" id="btnToggleClass">ToggleClass()</button>
    </div>
    <script src="~/Content/bootstrap-3.3.7-dist/js/jquery-3.2.1.min.js"></script>
    <script>
        //jQuery的属性与样式之增加样式.addClass()
        /*通过动态改变类名（class），可以让其修改元素呈现出不同的效果。在HTML结构中里，多个class以空格分隔，当一个节点（或称为一个标签）含有多个class时，DOM元素响应的className属性获取的不是class名称的数组，而是一个含有空格的字符串，这就使得多class操作变得很麻烦。同样的jQuery开发者也考虑到这种情况，增加了一个.addClass()方法，用于动态增加class类名
        .addClass( className )方法
            1、.addClass( className ) : 为每个匹配元素所要增加的一个或多个样式名
            2、.addClass( function(index, currentClass) ) : 这个函数返回一个或更多用空格隔开的要增加的样式名
            注意事项：
            .addClass()方法不会替换一个样式类名。它只是简单的添加一个样式类名到元素上
        
        */
        function AddClass()//设置背景颜色为红色
        {
            $("#mydiv").addClass("backRed");
            console.log($("#mydiv").attr("class"));
        }
        function RemoveClass()//移除.backRed
        {
            $("#mydiv").removeClass("backRed");
        }
        function ToggleClass()//蓝色背景切换
        {
            $("#mydiv").toggleClass("backBlue");
        }
        //jQuery的属性与样式之删除样式.removeClass()
        /*.removeClass( )方法
            .removeClass( [className ] )：每个匹配元素移除的一个或多个用空格隔开的样式名
            .removeClass( function(index, class) ) ： 一个函数，返回一个或多个将要被移除的样式名
            注意事项
        如果一个样式类名作为一个参数,只有这样式类会被从匹配的元素集合中删除 。如果没有样式名作为参数，那么所有的样式类将被移除*/


        //jQuery的属性与样式之切换样式.toggleClass()
        /*在做某些效果的时候，可能会针对同一节点的某一个样式不断的切换，也就是addClass与removeClass的互斥切换，比如隔行换色效果

        jQuery提供一个toggleClass方法用于简化这种互斥的逻辑，通过toggleClass方法动态添加删除Class，一次执行相当于addClass，再次执行相当于removeClass

        .toggleClass( )方法：在匹配的元素集合中的每个元素上添加或删除一个或多个样式类,取决于这个样式类是否存在或值切换属性。即：如果存在（不存在）就删除（添加）一个类

        .toggleClass( className )：在匹配的元素集合中的每个元素上用来切换的一个或多个（用空格隔开）样式类名
        .toggleClass( className, switch )：一个布尔值，用于判断样式是否应该被添加或移除
        .toggleClass( [switch ] )：一个用来判断样式类添加还是移除的 布尔值
        .toggleClass( function(index, class, switch) [, switch ] )：用来返回在匹配的元素集合中的每个元素上用来切换的样式类名的一个函数。接收元素的索引位置和元素旧的样式类作为参数
        注意事项：
        toggleClass是一个互斥的逻辑，也就是通过判断对应的元素上是否存在指定的Class名，如果有就删除，如果没有就增加
        toggleClass会保留原有的Class名后新增，通过空格隔开*/
    </script>
</body>
</html>