对于那些不知道的人来说,jQuery是一个包含许多功能的JavaScript库,并且非常小而且速度快。它还包含一个易于使用的API,可以在所有浏览器上兼容,并且可以更轻松地进行HTML遍历,动画,DOM操作和事件处理。它不仅可扩展而且耐用。因此,自开发以来,客户端脚本编写变得更加容易。
什么是jQuery插件?
jQuery由原型对象组成,在某些时候,可能需要一些操作和扩展。出于同样的目的,jQuery插件被设计为对象继承添加的任何其他方法的一种方式。不仅如此,这些附加方法不是孤立的,而是在创建jQuery对象时使用其余方法(已经继承)调用。jQuery插件可以以jQuery库中存在的各个方法的形式单独提供。每个方法都是一个插件。但是,如果有新的东西,插件也可以自定义创建,这不是一项非常困难的任务。
jQuery如何工作?要了解jQuery的工作原理,您需要按照以下步骤操作:

$.fn.pluginName = function() {
this.css( \"color\", \"yellow\" );
};
$( \"a\" ).pluginName();
该插件开始其身份创建,如上所示。pluginName 由正在创建的插件的名称替换,后跟一个函数和括号中的任何必需参数。此外,function(this.css)中的下一个语句 是确保将CSS应用于某些文本以使其呈黄色。最后一行调用插件函数将所有链接变为' a'标记为黄色。
保护$ Alias并添加范围jQuery插件总是在假设using $ 使用jQuery函数的别名的情况下编写 。 $ 在JavaScript库中非常有名。因此,当需要多个jQuery库时,使用时可能会出现冲突 $。因此,为了使我们能够将jQuery与其他插件一起使用$,我们必须将代码放在立即调用的函数的表达式中。接下来是jQuery的传递,然后命名它的参数 $。
添加私有方法和变量在JavaScript中,函数包含几个变量和其他函数,这些函数可以主要在函数内部访问,从而使元素变为私有。立即调用函数efxpressions提供了访问私有变量和方法的最佳方法。
在$解决alias()问题后,可以在此处理解添加私有方法或变量:
(function($) {
$.fn.pluginName = function() {
// private variables
var privatevar1 = '';
var privatevar2 = '';
// private methods
var myPrivateMethod = function() {
// do something ...
}
})(jQuery);
只能通过立即调用函数添加私有变量并允许其使用:
(function($){
var col = “yellow”;$.fn.pluginName = function() {
this.css(\"color\", col);
return this;
};
}(jQuery));
私有方法只能在函数范围内调用。只有其他私有方法或公共方法才有权调用这些私有方法。这也适用于访问私有变量。
添加公共方法向jQuery插件添加方法是在私有方法中完成的。唯一的区别是方法的执行。当方法提供' this'运算符时,该方法变为公共方法。这样,它也可以在函数范围之外访问。添加此类公共方法的目的可以是在范围外执行函数,也可以从范围外访问公共变量和方法。
(function($) {
$.fn.pluginName = function() {
// public methods
this.initialize = function() {
// do something ...
return this;
};
this.myPublicMethod = function() {
// do something ...
};
})(jQuery);
接受插件自定义选项在您继续添加插件时,有些情况下您的插件开始变得复杂。因此,最好让您的插件开始接受一些选项并使其可自定义。
(function($) {
$.fn.pluginName = function(options) {
var defaults = {
color: \"white\",
'background-color': \"#556b2f\"
};
var settings = $.extend({}, defaults, options);
return this.css({
color: settings.color,
'background-color': settings.background - color
});
};
}(jQuery));
把它放在一起结合所有技术,编译以下示例插件:
(function($) {
$.fn.pluginName = function(options) {
var defaults = {
color: \"white\",
'background-color': \"#556b2f\"
};
var settings = $.extend({}, defaults, options);
if (this.length > 1) {
this.each(function() { $(this).pluginName(options) });
return this;
}
// private variables
var privatevar1 = '';
var privatevar2 = '';
// private methods
var myPrivateMethod = function() {
// do something ...
}
// public methods
this.initialize = function() {
// do something ...
return this;
};
this.myPublicMethod = function() {
// do something ...
};
return this.initialize();
}
})(jQuery);
这里,方法' each()'用于循环遍历元素集合。此外,此方法的返回值是this.append() 方法,它接受回调,返回时我们将能够看到集合中要追加的元素。