一、jQuery.fn.extend()与jQuery.extend()
jQuery.fn如何扩展。
jQuery插件 $.fn(object)与$.extend(object)
jQuery提供了两个方法帮助开发插件
- $.extend(object);扩展jQuery类本身；
- $.fn.extend(object);扩展jQuery对象；
1、扩展对象
$.fn 等于 $.prototype；这样就好理解了，就好比对String.porotype增加一个函数，然后所有的字符串对象都能够直接调用，
jQuery也是如果。给jQuery增加一个函数，然后所有的jQuery对象都能够调用。jQuery对象就是$("#id")或
$(document.getElementById("Id"))这些;
在写法上可以
$.fn或$.fn.extend({})
//扩展jQuery对象；$.fn.extend({}) ???????$.fn.modify = function () { ???????????$(this).val(‘********‘).css(‘color‘, ‘yellow‘); ???????} ???????$.fn.extend({ ???????????clear: function () { ???????????????$(this).val(‘‘); ???????????} ???????});2、扩展jQuery对象本身
我们知道$就是jQuery对象。所以
$.extend其实就是扩展"jQuery"这个对象本身的函数。实际上相当于你创建了一个object对象,然后object.abc = function(){}
//扩展jQuery类本身 ???????$.modify = function (obj) { ???????????obj.val(‘********‘).css(‘color‘, ‘blue‘); ???????} ???????$.extend({ ???????????clear: function (obj) { ???????????????obj.val(‘‘); ???????????} ???????});
调用：
$("#txt").focus(function () { ???????????// $(this).clear(); 使用jQuery对象扩展的方法 ???????????$.modify($("#txt")); //使用扩展jQuery类本身的方法 ???????});3、扩展一个对象
var menu = (function (window, undefined) { ???var id = "tab_menu"; ???var This; ???var $menu = $("#" + id); ???var Menu = function () { ???????This = this; ???????this.Init.apply(this, arguments); ???} ???Menu.prototype.BindMenu = function () { ???????/*为选项卡绑定右键*/ ???????$(".tabs li").on(‘contextmenu‘, function (e) { ???????????/*选中当前触发事件的选项卡 */ ???????????var subtitle = $(this).text(); ???????????$(‘#mainTab‘).tabs(‘select‘, subtitle); ???????????//显示快捷菜单 ???????????$(‘#tab_menu‘).menu(‘show‘, { ???????????????left: e.pageX, ???????????????top: e.pageY ???????????}); ???????????return false; ???????}); ???}; ???Menu.prototype.Init = function () { ???????$menu.menu({ ???????????onClick: function (item) { ???????????????var currTab = tab.GetCurrTab(); ???????????????if (item.id === "tab_menu-tabrefresh") { ???????????????????//刷新 ???????????????????tab.Refresh(); ???????????????} else if (item.id === "tab_menu-openFrame") { ???????????????????//在新窗口打开该标签 ???????????????????window.open(currTab.ref); ???????????????} else if (item.id === "tab_menu-openFrame2") { ???????????????????//在新Tab打开该标签 ???????????????????tab.Add({ id: currTab.id, title: currTab.id, ref: currTab.ref.replace(‘/‘, ‘%‘) }); ???????????????} else if (item.id === "tab_menu-tabcloseall") { ???????????????????//全部关闭 ???????????????????tab.RemoveAll(); ???????????????} else if (item.id === "tab_menu-tabcloseother") { ???????????????????//关闭除当前之外的TAB ???????????????????tab.RemoveOthers(); ???????????????} else if (item.id === "tab_menu-tabcloseleft") { ???????????????????//关闭当前左侧的TAB ???????????????????var prevall = $(‘.tabs-selected‘).prevAll(); ???????????????????if (prevall.length === 0) { ???????????????????????return false; ???????????????????} ???????????????????prevall.each(function (i, n) { ???????????????????????if ($(‘a.tabs-close‘, $(n)).length > 0) { ???????????????????????????//var t = $(‘a:eq(0) span‘, $(n)).text(); ???????????????????????????var t = $(n).index(); ???????????????????????????$(‘#mainTab‘).tabs(‘close‘, t); ???????????????????????} ???????????????????}); ???????????????????return false; ???????????????} else if (item.id === "tab_menu-tabcloseright") { ???????????????????//关闭当前右侧的TAB ???????????????????var nextall = $(‘.tabs-selected‘).nextAll(); ???????????????????if (nextall.length === 0) { ???????????????????????return false; ???????????????????} ???????????????????nextall.each(function (i, n) { ???????????????????????if ($(‘a.tabs-close‘, $(n)).length > 0) { ???????????????????????????var t = $(n).index(); ???????????????????????????// ?var t = $(‘a:eq(0) span‘, $(n)).text(); ???????????????????????????$(‘#mainTab‘).tabs(‘close‘, t); ???????????????????????} ???????????????????}); ???????????????????return false; ???????????????} else if (item.id === "tab_menu-tabclose") { ???????????????????//关闭当前 ???????????????????tab.Remove(currTab.id); ???????????????} ???????????} ???????}); ???}; ???return new Menu();})(window);调用：
//右击菜单绑定 ???menu.BindMenu();
jQuery扩展
原文地址：https://www.cnblogs.com/SmileSunday/p/9209179.html