jquery的样式操作，类操作（添加删除 css）-蒲公英云

jquery的样式操作，类操作（添加删除 css）

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
        }
        .current {
            background-color: red;
        }
    </style>
    <script src = jquery-1.11.1.js></script>
    <script>
        $(function () {
//-------------------------------样式操作方法--------------------------------
            //样式操作方法1(设置样式)：  css(json);
//            $("div").css({"width":100,"height":100,"background-color":"pink"});
            //样式操作方法2(设置样式)：  css(属性，值);
            $("div").css("background-color","red");
            //样式操作方法2(获取样式)：  css(属性);
            //获取的时候如果有很多，那么获取jquery对象中的第一个
            alert($("div").css("width"));
//------------------类操作添加和删除、切换、判断----------------------------------
            $("button").eq(0).click(function () {
                //添加类
                $("div").addClass("current");
                //判断类
                alert($("div").hasClass("current"));//has是have的单三 返回bool类型
            });
            $("button").eq(1).click(function () {
                //删除类
                $("div").removeClass("current");
                //判断类
                alert($("div").hasClass("current"));//has是have的单三
            });
            //alert($("div").hasClass("current"));
            // jquery对象中有一个带有类名的也是true，所有都不带才是false；
        })
    </script>
</head>
<body>
    <button>添加</button>
    <button>删除</button>
    <div></div>
    <div></div>
    <div></div>
    <div class="current"></div>
</body>
</html>