jQuery 样式操做

1.  jQuery 样式操做

​ jQuery中经常使用的样式操做有两种：css() 和 设置类样式方法

1.1. 方法1: 操做 css 方法

​ jQuery 能够使用 css 方法来修改简单元素样式； 也能够操做类，修改多个样式。

​ 经常使用如下三种形式 :

// 1.参数只写属性名，则是返回属性值
var strColor = $(this).css('color');
​
// 2. 参数是属性名，属性值，逗号分隔，是设置一组样式，属性必须加引号，值若是是数字能够不用跟单位和引号
$(this).css(''color'', ''red'');
​
// 3. 参数能够是对象形式，方便设置多组样式。属性名和属性值用冒号隔开， 属性能够不用加引号
$(this).css({ "color":"white","font-size":"20px"});
​

​ 注意：css() 多用于样式少时操做，多了则不太方便。

1.2. 方法2: 设置类样式方法

​ 做用等同于之前的 classList，能够操做类样式， 注意操做类里面的参数不要加点。

​ 经常使用的三种设置类样式方法：

// 1.添加类
$("div").addClass("current");

// 2.删除类
$("div").removeClass("current");

​// 3.切换类
$("div").toggleClass("current");

注意：

1. 设置类样式方法比较适合样式多时操做，能够弥补css()的不足。

2. 原生 JS 中 className 会覆盖元素原先里面的类名，jQuery 里面类操做只是对指定类进行操做，不影响原先的类名。

1.3. 案例：tab 栏切换

思路分析: 1.点击上部的li，当前li 添加current类，其他兄弟移除类。2.点击的同时，获得当前li 的索引号3.让下部里面相应索引号的item显示，其他的item隐藏

 

<script>
      $(function () {
        $(".tab_list li").click(function () {
          $(this).addClass("current").siblings().removeClass();
          var index = $(this).index();
          $(".tab_con .item").eq(index).show().siblings().hide();
        });
      });
    </script>