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