選取器(Selectors)討論

選取器運用

一、前置作業：

  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
  </ul>

Step1：練習1：讓list清單的項目在方框內
[one-half-first]CSS美化

    li{
      list-style-position: inside;
      padding-left: 10px;
      border: 1px solid #000;
      line-height: 30px;
    }

[/one-half-first]
[one-half]美化結果

[/one-half]
Step2：練習2：將li改為矩形方框
[one-half-first]將li改為矩形方框

  <style>
    li{
      list-style: none;
      border: 1px solid #000;
      font-size: 30px;
      display: inline-block;
      width: 40px; height: 40px;
      text-align: center;
      line-height: 40px;
    }
  </style>

[/one-half-first]
[one-half] CSS美化結果

[/one-half]

二、運用JQ，進行化美化：

說明1：選取項目為【常數】
JQ程式

//選取項目為【常數】
    $('li:nth-child(2)').css({'background':'yellow'});
    $('li:eq(2)').css({'background':'green'});
    $('li').eq(3).css({'background':'red'});

美化結果

說明2：選取項目為【變數】
JQ程式

    //選取項目為【變數】
        var $index1=4, $index2=5;
//  $('li:eq($index1)').css({'background':'#438c23'});
    $('li:eq('+$index1+')').css({'background':'#ffb169'});
    $('li').eq($index2).css({'background':'#2c85a2'});

美化結果

說明3：加入click事件
CSS美化

  li{
    cursor: pointer;
    }
  li:nth-child(7){
    background: #e93580;
  }

JQ程式

※JQ設定時，CSS設定若為空值，則顯示原來CSS值。

    //選取項目為【事件】
    $('li').click(function(){
      $(this).css({'background':'#c073f3'}).siblings().css({'background':''});
    });

結果
<br />
END