這次非常久才發布學習紀錄，因為最近當兵的關係，能學習的時間又被壓縮了，但我還是會努力播出時間練習的。

on註冊事件

on(types, selector, data, callback)
第一個參數：事件的類型
第二個參數：selector:事件最終由誰來執行。
第三個參數:data數據
第四個參數：回呼函數，要做什麼

委派原理:就是給予一個父元素委派一個事件，並指定給某子元素，並判斷他是否觸發某個事件，如果有就給予他對應事件的操作，就能達到新增加的元素或無註冊事件的元素也能執行對應事件，也就是給父元素註冊委派事件，最終還是有子元素來執行，而為什麼要給父元素，因為子元素會因為事件冒泡由內往外冒泡找事件。

            //這個是p自己註冊的事件（簡單事件）
            $("p").on("click", function () {
                alert("我是p自己註冊的事件");
            });
            //給div自己執行的
            $("div").on("click", function () {
                alert("我是div自己註冊的事件");
            });
            //給div裡面的p執行 委託事件
            $("div").on("click", "p", function () {
                alert("我是被委派註冊事件的div")
            });
            $("#btn").on("click", function () {
                $("<p>我是新建的p元素</p>").appendTo("div");
            });
            // 如果一個元素有兩個事件 委託事件會先執行 再去執行自己自有的事件
            // 如果點擊p 會先顯示 我是被委派註冊事件的p 再來是  我是p自己註冊的事件

toggle：切换 trigger：觸發

            $("#btn").on("click", function () {
                //觸發p元素的點擊事件
                //$("p").click();
                // trigger() 觸發事件 參數就是要該元素觸發的事件
                $("p").trigger('click');
            });

delay()

可達到延遲效果

        $(function () {
            $('div').fadeIn(1000).delay(1000).fadeOut();
        });

鏈式編碼

設置性操作：可以鏈式編碼，因為每設置完會返回jq物件
獲取性操作:不能鍊式，因為獲取性操作，返回的如數值，字符串等
可不可鏈式編碼，關鍵在於返回值是不是一個jq物件。
像是下面這樣到獲取寬度(width())就無法再鍊式下去

        $(function () {
            console.log($("div").width(200).height(200).css("backgroundColor", "pink").width());
        });

prevAll(),prevUntil(),nextAll()

            $(".comment>li").on("mouseenter", function () {
                // prevAll()前面所有的同輩元素
                // prevUntil()前面直到某個的同輩元素
                // 讓當前的星星及當前的前面所有的都變成實心
                $(this).text(wjx_s).prevAll().text(wjx_s);
                // nextAll()後面所有的同輩元素
                // 讓自己之後全部的星星變成空心
                $(this).nextAll().text(wjx_k);
            })

draggable(),sortable(),resizeable()

        // draggable() 賦予可被拖曳 參數為物件 而他有個方法為 handle 可決定哪個元素可拖動
        $(".drag-wrapper").draggable({
            handle: '.drag-bar'
        });
        // sortable() 可讓元素排序 並且也有很多方法 如opacity 拖動時會改變透明度
        $('.sort-item').sortable({
            opacity: 0.3
        });
        // resizeable() 可縮放指定的元素 有handles方法 可指定 能縮放 上下左右
        $('.resize-item').resizable({
            // 只能往下拉縮放
            handles: 's'
        });

propotype

原型概念，原型上有很多方法，且每個都能去使用自身原型的方法

// 給jq物件添加一個方法 所有jq物件皆可以用
        $.prototype.sayHi = function () {
            console.log("呵呵"); // 呵呵
        }
        $(document).sayHi();