JQuery 学习纪录 ( 6 )

这次非常久才发布学习纪录，因为最近当兵的关系，能学习的时间又被压缩了，但我还是会努力播出时间练习的。

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