jQuery---3. 常用API（jQuery样式操作）

2. jQuery样式操作

2.1 操作css方法

<body>
    <div></div>
    <script>
        $(function() {
            //1.
            console.log($("div").css("width")); //打印输出的是字符串  200px

            //2.
            $("div").css("width", "300px");
            //值若是数字，则可以不加单位和引号，上述代码的等效写法如下
            $("div").css("width", 300);

            //3. 属性值 若是数字可以不加单位和引号，若不是数字则必须加引号
            //属性名可以加引号也可以不加
            $("div").css({
                "width": 400,
                height: 400,
                backgroundColor: "pink" //符合属性采用驼峰命名法
            })
        })
    </script>
</body>

2.2 设置类操作方法

<body>
    <div class="current"></div>
    <script>
        $(function() {
            //1. 添加类 addClass
            // $("div").click(function() {
            //     $(this).addClass('current');
            // });

            //2. 删除类 removeClass
            // $("div").click(function() {
            //     $(this).removeClass("current");
            // })

            //3. 切换类 toggleClas 
            //每次点击：若有则删，若无则加
            $("div").click(function() {
                $(this).toggleClass("current");
            })

        })
    </script>
</body>

案例：Tab栏切换

<body>
    <div class="tab">
        <div class="tab_list">
            <ul>
                <li class="current">商品介绍</li>
                <li>规格与包装</li>
                <li>售后保障</li>
                <li>商品评价（50000）</li>
                <li>手机社区</li>
            </ul>
        </div>
        <div class="tab_con">
            <div class="item" style="display: block;">
                商品介绍模块内容
            </div>
            <div class="item">
                规格与包装模块内容
            </div>
            <div class="item">
                售后保障模块内容
            </div>
            <div class="item">
                商品评价（50000）模块内容
            </div>
            <div class="item">
                手机社区模块内容
            </div>

        </div>
    </div>
    <script>
        //jQuery的链式编程和隐式迭代 大大加快开发效率
        $(function() {
            $(".tab_list li").click(function() {
                $(this).addClass("current");
                $(this).siblings("li").removeClass("current");

                var index = $(this).index();
                $(".tab_con .item").eq(index).show();
                $(".tab_con .item").eq(index).siblings(".item").hide();
            })
        })
    </script>
</body>

2.3 类操作与className的区别

addClass('类名')不会覆盖元素原先的类名