Day 31 (Jq+JqUI)

1.意义
[] 很多个东西要拿出来
{} 多个变数形容她
function 重复做的事情

2.推敲过程:
https://api.jquery.com/on/#on-events-selector-data-handler
举例:.on()
观看事件
1.官方文件表示handler可以放数个变数

2.但是给了aaaaa却undefined

        $("li").on("click mouseover", function (e,aaaaa) {
        $("h5").text(e.type + ":" + e.target.innerText);
        console.log(aaaaa.name); //undefined
      });

3.继续观看官方文件推发见该文件也有第二个变数的形式

      $( "div" ).on( "click", function( event, person ) {
        alert( "Hello, " + person.name );
      });
      $( "div" ).trigger( "click", { name: "Jim" } );

4.经过推算应该是个物件{ name: "Jim" }

5.那就给个物件吧！
此时function放aaaaa会先抓最近的，但aaaaa最近的抓不到而undefined

        var aaaaa = { name: "cat" };

        $("li").on("click mouseover", function (e,aaaaa) {
        $("h5").text(e.type + ":" + e.target.innerText);
        console.log(aaaaa.name);　//undefined
      });

6.且物件设在外面是危险的，因为会後盖前

    <script>
      var y = 999; 
      function apple(x,y) {
        console.log(y); //非999,12才是答案
      }
      apple(12,12); 
    </script>

    <script>
      var y = 999; 
      function apple(x) {
        console.log(y); //999 抓近的
      }
      apple(12,12); 
    </script>

7.因此把赋值放到function内，保护好他,此时aaaaa变数不用表示
内建就会自己抓了

        $("li").on("click mouseover", function (e) {
        var aaaaa = { name: "cat" }; //4. 设物件 但不要放外面(会後盖前)，放里面
        console.log(aaaaa.name); //cat
      });

3.冒泡

1.预计只有BC、却出现BCB

第一次的B: label 被点击
C: label被点→触发点击checkbox
第二次的B: 因为event bubbling 所以等於label 会再被点

    <label id="lblB">
      咕噜咕噜咕噜
      <input type="checkbox" />
    </label>

      $("#lblB").on("click", function () {
        console.log("B"); //BCB
      });

      $('input[type="checkbox"]').on("click", function () {
        console.log("C");
      });

解决: 子(溢出的) + e.stopPropagation (拍掉小孩的接力棒)

      $('input[type="checkbox"]').on("click", function (e) {
        console.log("C");
        e.stopPropagation();
      });

4. $的意义

CSS [attr$=value]最後(最前是^(屋顶))
Js`${}`
j$()

有些人认为，这是Jq要用的物件，命名会用$
        var $d = $("div"); //只需要定义一次
        $d.on("mouseenter", function () {
          $(this).find("p").css("visibility", "visible");
        });

5.配对
物件{key:value}

.css{属性:值}

.on{事件名称:做甚麽?}

           $("div").on({
           mouseenter: function () {
             $(this).find("p").css("visibility", "visible");
           },

6.Jq的UI
https://jqueryui.com/

(1)每一个稳定的版本都会变成旧版本(stable=>legacy)

(2)UI下载 标准版 全部下载
https://jqueryui.com/download/all/
jQuery UI 1.12.1 (concatenated JS and CSS files)
jQuery UI 1.12.1 Themes

(3)或是风格选择
https://jqueryui.com/download/

(4)各种范例 >　view source
https://jqueryui.com/demos/

(5)细项(个别调整)
https://api.jqueryui.com/category/interactions/
Ex:
https://api.jqueryui.com/draggable/
https://api.jqueryui.com/droppable/

5.使用办法看　> view source
老样子要注意引用的格式

   <title>jQuery UI Draggable - Default functionality</title>
   <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
   <link rel="stylesheet" href="/resources/demos/style.css">

• 不敢笑别人，我也可能会引用错误= =

link=>.css
script=>.js

   <link rel="stylesheet" href="../../_jquery-ui-themes-1.12.1/themes/base/jquery-ui.css" />
   <script src="../../_js/jquery-3.4.1.js"></script>

6.Jq看到程序码如何使用?
面对未知的处理方法(影片Jq04 1:34)