Day 30 (Jq)

** 请把这个写在最外层 让网页准备好!

      $(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);