jQuery常用API--样式操作

1. 操作css方法

jQuery 可以使用css 方法来修改简单元素样式，也可以操作类，修改多个样式。

（1）参数只写属性名，则是返回属性值。

$(this).css("color"); // 得到的是这个元素的字体颜色

（2）参数是属性名，属性值，用逗号分隔，是设置样式，属性必须加引号，如果属性值是数字，可以不用跟单位和引号

$(this).css("color","red"); // 设置这个元素字体颜色为红色

$(this).css("width",400); // 属性值是数字，可以不加单位，也可以不加引号

（3） 参数可以是对象形式，方便设置多组样式。属性名和属性值用冒号隔开，属性可以不用加引号，但是加上更好；属性值如果不是数字，则需要加引号

$(this).css({"color":"blue","font-size":"20px",backgroundColor: "red"});

// 给元素设置字体颜色同时设置字体大小和背景色，如果是复合属性必须采用驼峰命名法

2. 设置类样式方法

它的作用等同于原生JS中的className , 可以操作类样式，注意操作类里面的参数不要加点。

（1）添加类

$("div").addClass("current"); // 给div元素添加类名为current的类

（2）移除类

$("div").removeClass("current"); // 给div元素移除类名为current的类

（3）切换类

$("div").toggleClass("current"); // 给div元素添加 / 移除类名为current的类

<!-- css样式 -->
<style>
    div {
        width: 200px;
        height: 200px;
        background-color: pink;
    }
    .current {
        margin: 100px;
        background-color: skyblue;
    }
</style>
<!-- html结构 -->
<div class="current"></div>
<!-- js代码 -->
<script>
    $(function() {
        // 1. 添加类 addClass()  不要加·
        /* $('div').click(function() {
                $(this).addClass('current');
            }) */
        // 2. 删除类 removeClass()
        /*   $('div').click(function() {
                    $(this).removeClass('current')
                }) */
        // 3. 切换类 toggleClass() 表示如果本身有类current，则点击移除，否则点击添加
        $('div').click(function() {
            $(this).toggleClass('current');
        })
    })
</script>

jQuery 中给我们提供了切换类 toggleClass，这大大简化了我们的操作，不用像原生JS中还需要借助变量进行判断再切换内容。

2.1 类操作与className 的区别

原生JS 中的className 会覆盖原生原先里面的类名。

但是jQuery 里面的类操作只是对指定的类进行操作，不会影响原先的类名，其实通过名字也能感知到区别，一个是addClass，意为添加类，既然是添加，当然不会影响原先的，removeClass也是一样的，移除的也是指定的类，未指定的类是不会受影响的。

3. 案例：tab栏切换

<!-- css样式 -->
<style>
    * {
        margin: 0;
        padding: 0;
    }
    .tab {
        margin: 100px auto;
        width: 1000px;
    }
    .tab-list {
        height: 44px;
        line-height: 44px;
        background-color: #EEF1EE;
        border: 1px solid #ccc;
    }
    .tab-list ul li {
        float: left;
        list-style: none;
        padding: 0 25px;
        /* cursor: pointer; */
        cursor: pointer;
    }
    .tab-con {
        padding: 10px;
    }
    .current {
        color: #fff;
        background-color: #D6271F;
    }
    .item {
        display: none;
    }
</style>
<!-- html结构 -->
<div class="tab">
    <div class="tab-list">
        <ul>
            <li class="current">商品介绍</li>
            <li>规格与包装</li>
            <li>售后保障</li>
            <li>商品评价（5000）</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">
            商品评价（5000）模块内容
        </div>
        <div class="item">
            手机社区模块内容
        </div>
    </div>
</div>
<!-- js代码 -->
<script>
    $(function() {
        $('.tab-list ul li').click(function() {
            // 1. 利用隐式迭代，为每个小li绑定点击事件，点击后当前小li改变自身样式(添加类)，其余兄弟不变（移除类）--排他思想
            $(this).addClass('current').siblings().removeClass('current');
            // 2. 点击的同时获得对应的索引号
            var index = $(this).index();
            // 3. 根据索引号将对应的模块找出显示，其余模块隐藏
            $('.tab-con .item').eq(index).show().siblings().hide();
        })

    })

使用jQuery 实现tab栏切换效果，明显比原生JS简单很多，刚好契合jQuery的宗旨理念。