jQuery9(操作类选择器,开关灯)_jquery 开关-CSDN博客

本文链接：https://blog.csdn.net/xbc1213/article/details/50639626

类选择器的添加及移除

添加类选择器
关键字:addClass()
语法:$(‘#p1’).addClass(‘cls’);
意义:给id为p1的元素添加类 cls

移除类选择器
关键字:removeClass()
语法:$(‘#p1’).removeClass(‘cls’);
意义:为id为p1的元素移除类名为cls的类.注意,如果这里不写.则移除该元素所有的类样式!!!

实例:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="jquery-1.8.3.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $('#btn').click(function () {
                //为某个元素添加类选择器的样式
                $('#p1').addClass('cls');
            });
            //移除指定的类样式
            $('#btnRem').click(function () {
                $('#p1').removeClass('cls');
            });
            //移除所有的类样式
            $('#btnRem').click(function () {
                $('#p1').removeClass();
            });
        });
    </script>
    <style type="text/css">
        .cls
        {
            background-color: Yellow;
        }
    </style>
</head>
<body>
    <input type="button" name="name" value=" " id='btn' />
    <p id='p1'>
        这是p
    </p>
    <input type="button" name="name" value=" " id='btnRem' />
</body>
</html>

开关灯

是否有该元素
关键字:hasClass('cls');
语法实例:if($('body').hasClass('cls'))
意义:判断房钱body中是否有类名为cls的类

开关灯
关键词:toggleClass
翻译:toggle:开关
语法实例:$('body').toggleClass('cls');

实例:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="jquery-1.8.3.js" type="text/javascript"></script>
    <script type="text/javascript">
        //这是麻烦的写法
        //其中使用hasclass 判断
        //        $(function () {
        //            $('#btn').click(function () {
        //                if ($('body').hasClass('cls')) {
        //                    $('body').removeClass('cls');
        //                } else {
        //                    $('body').addClass('cls');
        //                }
        //            });
        //        });
        $(function () {
            $('#btn').click(function () {
                $('body').toggleClass('cls');
            });
        });
    </script>
    <style type="text/css">
        .cls
        {
            background-color: Black;
        }
    </style>
</head>
<body>
    <input type="button" name="name" value=" " id='btn' />
</body>
</html>