标签：现在 对象属性 nbsp dom 符号 多选 callback 价值 字符串
编写一个jQuery插件开始于给jQuery.fn加入新的功能属性，此处添加的对象属性的名称就是你插件的名称：
1 jQuery.fn.myPlugin = function(){
2 //你自己的插件代码
3 };
为什么不用$符号呢？为了避免和其他JavaScript库冲突，我们最好将jQuery传递给一个自我执行的封闭程序，jQuery在此程序中映射为符号，这样可以避免$号被其他库覆写。
(function ($) {
$.fn.myPlugin = function () {
//你自己的插件代码
};
})(jQuery);
在这个封闭程序中，我们可以无限制的使用$符号来表示jQuery函数。
现在，我们可以开始编写实际的插件代码。 但是，在这之前，我们必须得对插件所处的环境有个概念。 在插件的范围里， this关键字代表了这个插件将要执行的jQuery对象， 这里容易产生一个普遍的误区，因为在其他包含callback的jQuery函数中，this关键字代表了原生的DOM元素。这常常会导致开发者误将this关键字无谓的包在jQuery中，如下所示。
(function ($) {
$.fn.myPlugin = function () {
//此处没有必要将this包在$号中如$(this)，因为this已经是一个jQuery对象。
//$(this)等同于 $($(‘#element‘));
this.fadeIn(‘normal‘, function () {
//此处callback函数中this关键字代表一个DOM元素
});
};
})(jQuery);
$(‘#element‘).myPlugin();
现在，我们做一个利用.height()返回页面中高度最大的div元素的高度。
(function ($) {
$.fn.maxHeight = function () {
var max = 0;
this.each(function () {
max = Math.max(max, $(this).height());
});
return max;
};
})(jQuery);
var tallest = $(‘div‘).maxHeight(); //返回高度最大的p元素的高度
维护Chainability
很多时候，一个插件的意图仅仅是以某种方式修改收集的元素，并把它们传递给链中的下一个方法。 这是jQuery的设计之美，是jQuery如此受欢迎的原因之一。 因此，要保持一个插件的chainability，你必须确保你的插件返回this关键字。
1 (function ($) {
2 $.fn.lockDimensions = function (type) {
3 return this.each(function () {
4 var $this = $(this);
5 if (!type || type == ‘width‘) {
6 $this.width($this.width());
7 }
8 if (!type || type == ‘height‘) {
9 $this.height($this.height());
10 }
11 });
12 };
13 })(jQuery);
14 $(‘p‘).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);
$(‘p‘).tooltip({
‘location‘: ‘left‘
});
在这个例子中，调用tooltip插件时覆写了默认设置中的location选项，background-color选项保持默认值，所以最终被调用的设定值为：
{
‘location‘: ‘left‘,
‘background-color‘: ‘blue‘,
}
资料来源于http://www.php.cn/js-tutorial-393917.html
标签：现在 对象属性 nbsp dom 符号 多选 callback 价值 字符串
原文地址：https://www.cnblogs.com/rainwater/p/11098495.html
