** 請把這個寫在最外層 讓網頁準備好!

      $(document).ready(function(){
        
      })

1.Jquery-migrate-X.X.X檔案

是拿來銜接版本用 但不可以全部依靠他
人家盡力而為幫你銜接

2.宣告在前使用在後!

(1)宣告：引用的程式碼需要放在上面==>因為才有被宣告 $()...etc.

(2)使用：

        <script>
        寫在後面，才能抓到已經出現的元素..$()、'h4'....etc.
        </script>

解法1.：defer，但非萬用

      <script src="./20_get_and_set_CSS_Classes.js" defer></script>

解法2.：包在(document).ready內

      $(document).ready(function(){
        <script src="./20_get_and_set_CSS_Classes.js"></script>
      })

解法3.寫在最後面

3.容易被搞混的第一個跟第二個。(主觀)

(1) ${物件}.一個給你看是「甚麼?」，兩個是「設定」

(特性:都是字串)

(a) .prop(x,y)

        $("h4").prop("id", "abc");

(b) .attr(x,y)

        $("h4").attr("id", "abc");  //只抓預設 不要這樣用，這是舉例

(c) .css

        $("#p1").css("color", "rgb(0, 255, 0)");
        $("p").css("font-size", "+=2");

(2)

${物件}.each(function (a, b)，a=順序 b=內容
$.each(XXX, function (a, b)，a=順序 b=內容
$("p").css("width", function (a, b) { a=順序 b=值

(特性:都是變數)

(a) $(物件).each(function (a, b) a=順序 b=內容

        <h3>apple</h3>
        <h3>bee</h3>
        <h3 id="cat_1">cat</h3>

        $("h3").each(function (a, b) {
          // 抓出來看(要看撈到甚麼'h3') a=順序 b=內容
          console.log(a); //0 1 2
          console.log(b); //<h3>apple</h3> <h3>bee</h3> <h3>cat</h3>
        });

(b) $.each(XXX, function (a, b) a=順序 b=內容

        var list = ["dog", "egg"];
        // indexInArray: number, valueOfElement: T
        $.each(list, function (index, item) {
          console.log("--開始--");
          console.log(index); // 0 1 (第幾個)
          console.log(item); // dog egg(誰?) item不是物件
          console.log(this); //string
          console.log("--結束--");
        });

(c) $(物件).css("width", function (idx, val) idx=順序 val=值

        $("p").css("width", function (idx, val) {  
          console.log(idx);  //0 1 2 3..
          console.log(val); // XXXpx ,width會跟著瀏覽器寬度調整大小(因p是區塊元素)
          return `${20 * idx}px`;
        });

        v.s => $("div").css("color", "rgb(0, 255, 0)");

(3)不要搞混:function(內有指定用途，非前述a,b 的a=順序 b=內容)

(特性:.each外= =??)

(a) .on("click", function (){})(點擊，事件監聽)

        $("#btnZoomin").on("click", function () {
          $("p").css("font-size", "30px");
        });

Js:

(b) .setInterval(function (){},time)

     setInterval(add, 1000); //1000=1S

      setInterval(function () {
        console.log("ok");
      }, 1000);

(c) .setTimeout(function (){},time)

      setTimeout(function () {
        document.location.href = "https://one-piece.com/";
      }, 3000);

4.檢視原始碼 vs 檢查

檢查才能看及時狀態

5.CSS改變樣式

方法1.

        $("#p2").prop("style", "font-size:5rem ;color:red");

方法2.

        $("#p3").css("color", "red").css("font-size", "5rem");

方法3.

        $("#p4").css({
          color: "red",
          "font-size": "5rem", // = fontSize: "5rem",(因為Jq不讀-)
        });

方法4.

        $("#p5").css("width", function () {
          return "50px";
        });

6.變數的使用

此時拿掉val程式也不會會掉, 因為idx會去抓第一個變數;
但如果要用到val,沒有要用idx,還是要給兩個變數(idx,val)
若只給一個，要用第二個，程式會錯亂

        $("p").css("width", function (idx,val) {
          console.log(idx);
          console.log(val); //width會跟著瀏覽器寬度調整大小(因p是區塊元素)
          return `${20 * idx}px`; //20*0 20*1 20*2....
        });

7.給0的方法

1.變數=0

        function getRandom(cnt, start=0) {
        // 把重複的東西放進來
        return Math.floor(Math.random() * cnt + start); 
        //random(變數) cnt=亂數 start=開始
      }

2.沒有數值，我就給你0

        if (start == undefined) {
          start = 0;
        }

3.三元運算子

        start = start == undefined ? 0 : start;

8.長長的解釋

{JQ物件}.使用prop Function抓值回傳字串.字串用split回傳[]+指定符號

   var temp = $('div').prop('class').split(' '); //["bgColor", "apple"]

9.反覆切換 有 沒有 有 沒有 有 沒有..

(1)if else

        var temp = $('p').prop('class');
        if (temp == '') {
            $('p').addClass('bgColor');
         } else {
             $('p').removeClass('bgColor');
         }

(2)toggle

        $('p').toggleClass('bgColor');

效果一樣

10.鏈式呼叫 | 鏈式語法 => .的 .的 .的 .的

https://www.w3schools.com/jquery/jquery_chaining.asp

        $("#p1").css("color", "red").slideUp(2000).slideDown(2000);