javascript- jQuery（事件/插件拓展）

jQuery事件

优势1:可以一次绑定多个事件

注册事件

//1.单个事件注册
        $(function () {
            $("div").click(function () {
                $(this).css("background", "red");
            });
            $("div").mouseenter(function () {
                $(this).css("background", "black");
            });
        })

事件处理on（）绑定事件

            $("div").on({
                mouseenter: function () {
                    $(this).css("background", "red");
                },
                click: function () {
                    $(this).css("background", "black");
                },
                mouseleave: function () {
                    $(this).css("background", "blue");
                }
            })

如果事件处理程序一样可以如下进行

$("div").on("mouseenter mouseleave", function () {
                $(this).toggleClass("current");
            })

优势2:可以委托事件

//（2）实现事件委托
            // $("ul li").click();
            $("ul").on("click","li",function(){
                alert(11);
            })
            //click是绑定在ul身上，触发的却是li

优势3:可以给动态生成的元素进行绑定事件

//(3)给动态未来创建的元素绑定事件
            $("ol").on("click", "li", function () {
                alert(11);
            })
            var li = $("<li>123</li>");
            $("ol").append(li);

案例：微博发布

要点

 //2.删除留言
            $("ul").on("click", "a", function () {
                $(this).parent().slideUp(function () {
                    $(this).remove();
                });
            })

解绑事件

//解绑事件
            // $("div").off();//解除div身上所有的事件
            $("div").off("click");//解除div身上的click事件
            $("ul").off("click","li");//解除事件委托
            //2.one（）但是它只能触发事件一次
            $("div").one("click",function(){
                alert(11);
            })

自动触发事件trigger（）

//1.自动触发事件
            // $("div").click();
            //2.元素.trigger("事件")
            $("div").trigger("click");

事件对象

 $(document).on("click", function () {
                console.log("点击了doc");
            })
            $("div").on("click", function (event) {
                console.log("点击了div");
                event.stopPropagation();//阻止往上冒泡
            })

jQuery对象拷贝

浅拷贝是把被拷贝的对象复杂数据类型中的地址拷贝给目标对象，修改目标对象会影响被拷贝对象。

深拷贝是把里面的数据完全复制一份给目标对象， 如果里面有不冲突的属性，会合并到一起

 

多库共存

问题：如果$符号冲突

解决方案1:把里面的$改为jQuery

解决方案2:

            var suibian=jQuery.noConflict();
            console.log(suibian("span"));
            suibian.each();

jQuery插件

瀑布流插件、图片懒加载插件、全屏滚动插件

下载插件网址：http://www.htmleaf.com根据文档指示完成插件安装使用

 

bootstrap插件：

相关组件直接复制

网址：https://v3.bootcss.com/components/