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

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)