學習筆記專區

當選擇器重複時可以合併，當語法重覆時可以放到陣列裡去寫

第一版：

<script src="js/jquery-1.12.3.min.js"></script>

    <script src="js/bootstrap.min.js"></script>

    <script>

              // JQ寫法，讓所有h1的標籤都變成綠色：

              $('h1').css('color', 'green');

              //     JS寫法，讓所有h1的標籤都變成綠色：

              //     var hs = document.getElementsByTagName('h1');

              //     for (var i = 0; i < hs.length; i++) {

              //         hs[i].style.color = "green"

              //     }

              $('h1').mouseover(over);//因為每個h1都要跑一次，所以背後JS每個實際上都有跑了一次圈，效能差

              //     var hs = document.getElementsByTagName('h1');

              //     for (var i = 0; i < hs.length; i++) {

              //         hs[i].style.color = "green"

              //     }

              $('h1').mouseout(out);

              //     var hs = document.getElementsByTagName('h1');

              //     for (var i = 0; i < hs.length; i++) {

              //         hs[i].style.color = "green"

              //     }

              function over() {

                  $(this).css('color', 'red');

                  //this是JS物件(觸發事件的物件)，$(this)是JQ物件，兩者能使用的方法不同

                  //this.css('color', 'red');是錯誤寫法，因為JS物件不可使用JQ方法

                  //$(this).style.color = "green" 也是錯誤寫法，因為JQ物件不可使用JS方法

                  //this.style.color = "green"  ←這個才是正確寫法

              }

              function out() {

                  $(this).css('color', 'green');

              }

</script>

第二版：

              //上面的寫法會有效能問題，所以改成下面這種寫法(只有一開始跑回圈)，效能好(因為迴圈只跑一次)：

              $('h1').css('color', 'green').mouseover(over).mouseout(out);

              //     var hs = document.getElementsByTagName('h1');

              //     for (var i = 0; i < hs.length; i++) {

              //         hs[i].style.color = "green"

              //     }

              function over() {

                  $(this).css('color', 'red');

              }

              function out() {

                  $(this).css('color', 'green');

              }

第三版：

//下面這種寫法不好，css重覆打太多次，JQ可以使用陣列或者map的方式來存，但不建議這樣做，可以直接寫在css裡面再掛上來，不用寫在這裡

//     $('h1').css('color','green')

//            .css(border','1px solid red')

//            .css('padding',"5px").mouseover(over).mouseout(out);

       var o1={

              'color':'green',

              'border':'1px solid red',

              'padding':"5px",

              'text-align':'center',

              'background':'yellow'

       }

       var o2={

              'color':'red',

              'border':'3px dotted green',

              'padding':"5px",

              'text-align':'center',

              'background':'orange'

       }

       $('h1').css(o1).mouseover(over).mouseout(out);

       function over() {

           $(this).css(o2);

       }

       function out() {

           $(this).css(o1);

       }