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>