[TOC] ## 简单dmeo 1. 无链式调用 ``` $.fn.changeStyle = function(colorStr){ this.css("color",colorStr); } $(".change").changeStyle("red"); ``` 2. 链式调用 ``` $.fn.changeStyle=function(colorStr){ this.css('color',colorStr); return this; } $(".change").changeStyle("red").addClass("bgblue"); //文字变红,且添加背景为蓝色 ``` ## 防止$符号污染的jQuery插件 ``` (function($){ $.fn.changeStyle = function(colorStr){ this.css("color",colorStr); return this; } }(jQuery)); $(".change").changeStyle("red").addClass("bgblue"); ``` ## 传参插件 1. 直接传参 ``` (function($){ $.fn.changeStyle = function(colorStr,fontSize){ this.css("color",colorStr).css("fontSize",fontSize+"px"); return this; } }(jQuery)); $(".change").changeStyle("red",32); ``` 2. 通过对象传值 ``` (function($){ $.fn.changeStyle = function(option){ this.css("color",option.colorStr).css("fontSize",option.fontSize); return this; } }(jQuery)); $(".change").changeStyle({ colorStr:'red', fontSize:32, }); ``` 3. 通过 `$.extend`参数设置默认值 [推荐方案] ``` (function ($) { $.fn.changeStyle = function (option) { var defaultSetting = {colorStr: "green", fontSize: 12}; var setting = $.extend(defaultSetting, option); //合并两个对象,后面的值覆盖前面的值 this.css("color", setting.colorStr).css("fontSize", setting.fontSize + "px"); return this; } }(jQuery)); $(".change").changeStyle({ colorStr: 'red', fontSize: 32, }); ``` ### 示例 #### 事件传入数据 ``` function myHandler(event) { alert(event.data.foo); } $("p").on("click", {foo: "bar"}, myHandler) ``` #### 取消默认动作 ``` $("form").on("submit", function(event) { event.preventDefault(); }); ``` #### 防止冒泡 ``` $("form").on("submit", function(event) { event.stopPropagation(); }); ``` #### 添加并触发自定义事件 ``` $(".div1").on("myCustomEvent", function (event, myName) { console.log(myName);//{name:"idcpj"} }) $(".div1").on("click",function (event) { $(this).trigger("myCustomEvent",{name:"idcpj"}) }) ``` #### 使用对象同时添加多个事件处理函数 ``` $("div.test").on({ click: function(){ $(this).toggleClass("active"); }, mouseenter: function(){ $(this).addClass("inside"); }, mouseleave: function(){ $(this).removeClass("inside"); } }); ``` #### 代理方式触发 ``` $("body").on("click", "a", function(event){ event.preventDefault(); }); ```