扩展jQuery插件和方法的作用是非常强大的,它可以节省大量.docVIP

扩展jQuery插件和方法的作用是非常强大的，它可以节省大量开发时间。这篇文章将概述jQuery插件开发的基本知识，最佳做法和常见的陷阱。 入门 编写一个jQuery插件开始于给jQuery.fn加入??新的功能属性，此处添加的对象属性的名称就是你插件的名称： jQuery.fn.myPlugin = function(){ //你自己的插件代码 }; (function ($) { $.fn.m??yPlugin = function () { //你自己的插件代码 }; })(jQuery); (function ($) { $.fn.myPlugin = function () { //此处没有必要将this包在$号中如$(this)，因为this已经是一个jQuery对象。 //$(this)等同于 $($(#element)); this.fadeIn(normal, function () { //此处callback函数中this关键字代表一个DOM元素 }); }; })(jQuery); //页面调用方法：（如果不指完元素，则写全方法名，如 $.fn.myPlugin(),下同） $(#element).myPlugin(); 基础知识 现在，我们理解了jQuery插件的基础知识，让我们写一个插件，做一些事情。 function ($) { $.fn.m??axHeight = function () { var max = 0; this.each(function () { max = Math.max(max, $(this).height()); }); return max; }; })(jQuery); var tallest = $(div).maxHeight(); //返回高度最大的div元素的高度 (function ($) { $.fn.lockDimensions = function (type) { return this.each(function () { var $this = $(this); if (!type || type == width) { $this.width($this.width()); } if (!type || type == height) { $this.height($this.height()); } }); }; })(jQuery); 调用方法： $(div).lockDimensions(width).CSS(color, red); 由于插件返回this关键字，它保持了chainability，这样jQuery收集的元素可以继续被jQuery方法如.css控制。 因此，如果你的插件不返回固有的价值，你应该总是在其作用范围内返回this关键字。 此外，你可能会推断出，传递给插件的参数将会在插件的作用范围内被传递。 因此，在前面的例子，字符串’width’变成了插件的类型参数。 默认值和选项 对于比较复杂的和提供了许多选项可定制的的插件，最好有一个当插件被调用的时候可以被拓展的默认设置(通过使用$.extend)。 因此，相对于调用一个有大量参数的插件，你可以调用一个对象参数，包含你了你想覆写的设置。 (function ($) { $.fn.tooltip = function (options) { //创建一些默认值，拓展任何被提供的选项 var settings = $.extend({ location: top, background-color: blue }, options); return this.each(function () { // Tooltip插件代码 }); }; })(jQuery); $(div).tooltip({ location: left }); 在这个例子中，调用tooltip插件时覆写了默认设置中的loca