CSS樣式

DOM改變樣式，可利用className，改變類樣式 or style 行內樣式，一般來說，style不用擔心權重問題，而className會要擔心！

修改單個樣式

        css(name,value)
        name:樣式名,value:樣式值
        $('li').css('backgroundColor', 'red')
            .css('color', 'green')
            .css('fontSize', '32px');

修改多個樣式

        css(obj)
        $('li').css({
            'backgroundColor': 'red',
            'color': 'green',
            'fontSize': '32px',
            'border': '2px solid gray'
        });

獲取樣式

        css(name)
        name:想要獲取的樣式
        console.log($('li').css('color'));
        console.log($('li').css('fontSize'));
        

修改個別的樣式

        $('li').eq(0).css('backgroundColor', 'red');
        $('li').eq(1).css('backgroundColor', 'gray');
        $('li').eq(2).css('backgroundColor', 'yellow');

JQ的特性:

隱式迭帶

設置操作:會給JQ內部所有物件設置相同的值
獲取操作:只會返回第一個元素的值，所以如果三個都不同，會獲取第一個元素的樣式。

        // 所以如果三個都不同 會獲取第一個元素的樣式
        console.log($('li').css('backgroundColor'));
        

添加類

addClass:在元素標籤上，增加類，且是疊加上去，並不會覆蓋掉原本有的類

當兩個增加的類的樣式相同時，權重也一樣時，此時就要判斷，css部分，設置的先後順序，如果是後設置樣式的就不會被，先設置的樣式覆蓋，如我先設置big，再設置small，那麼，samll樣式的權重自然就比big高

    $('input')
      .eq(0)
      .click(function() {
        $('li').addClass('small');
      });

    $('input')
      .eq(1)
      .click(function() {
        $('li').addClass('big');
      });
      

removeClass:移除一個類

    $('input')
      .eq(2)
      .click(function() {
        $('li').removeClass('small');
      });
      

hasClass:判斷一個類

    $('input')
      .eq(3)
      .click(function() {
        $('li').hasClass('small');
        console.log($('li').hasClass('small'));
      });

toggleClass:切換類，可利用封裝好的語法來使用

    $('input')
      .eq(4)
      .click(function() {
        if ($('li').hasClass('small')) {
          $('li').removeClass('small');
        } else {
          $('li').addClass('small');
        }
        // $('li').toggleClass('small');
      });

添加屬性

attr (name,value) 設置標籤裡面的屬性

        // 設置單個屬性
        // $('img').attr('alt', '哈囉統神');
        
        // 設置多個屬性
        $('img').attr({
            title: '太神拉',
            alt: '改囉',
            abc: '齁齁'
        });
        
        // 獲取屬性
        console.log($('img').attr('alt')); //改囉

對於布林類型的屬性(如checked , disabled, selected),應該用prop方法,而不要用attr,而prop用法跟attr一樣，僅是prop是針對布林類型。

        // 獲取選中按鈕
        $('input').eq(0).click(function () {
            // $('#ck').attr('checked', true)
            $('#ck').prop('checked', true);
        });
        // 獲取選中按鈕
        $('input').eq(1).click(function () {
            // $('#ck').attr('checked', false)
            $('#ck').prop('checked', false);
        });