如何创建自定义 JQuery 函数以及如何使用它？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9550866/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to create custom JQuery function and how to use it?
提问by Jordan
I'm searching for information about that - "How to create custom (own) JQuery function and how to use it"
我正在搜索相关信息 - “如何创建自定义（自己的）JQuery 函数以及如何使用它”
I've searched in Google, but I didn't found information about that.
我在谷歌搜索过，但没有找到相关信息。
Can you explain in details, about custom functions?
你能详细解释一下自定义函数吗？
回答by James Allardice
By "custom function" I am assuming you mean "plugin". If that's the case, there is a good tutorial on the jQuery site. The basic idea is this:
通过“自定义功能”，我假设您的意思是“插件”。如果是这种情况，jQuery 站点上有一个很好的教程。基本思想是这样的：
(function($) {
$.fn.myPlugin = function() {
return this.each(function() {
//Do stuff
});
};
}(jQuery));
Basically, the code above does a few things. Firstly, it captures the value of jQueryand passes it into an anonymous function where it can then be referred to as $(this is so that users of your plugin who happen to be using the $identifier for something else can still use it.)
基本上，上面的代码做了一些事情。首先，它捕获 的值jQuery并将其传递到一个匿名函数中，然后可以在其中引用它$（这样一来，碰巧将$标识符用于其他用途的插件用户仍然可以使用它。）
It then declares a method on $.fn, which is just an alias for $.prototype. Inside that method, thisrefers to the matched set of elements on which the plugin has been called. Since thats a jQuery object, and may contain multiple elements, you need to iterate over that set (that's why the eachis there).
然后它声明了一个方法 on $.fn，它只是 的别名$.prototype。在该方法中，this指的是已调用插件的匹配元素集。由于那是一个 jQuery 对象，并且可能包含多个元素，因此您需要遍历该集合（这each就是 存在的原因）。
The returnstatement is used to maintain chainability of the plugin with other jQuery methods. Since eachreturns an instance of jQuery, the plugin itself returns an instance of jQuery, and other jQuery methods can obviously be called on an instance of jQuery.
该return语句用于维护插件与其他 jQuery 方法的可链接性。由于each返回的是jQuery的一个实例，插件本身也返回了一个jQuery的实例，显然可以在一个jQuery的实例上调用其他jQuery方法。
回答by anotherone
As gesutery said, use extend(). You can add your own properties and functions as values:
正如手势所说，使用extend(). 您可以添加自己的属性和函数作为值：
$(function(){
$.extend({
propAsString: '',
propAsNumber: 12345,
propAsObject: {},
propAsFunction: function() {
//your function code
}
});
$.propAsFunction(); //call your function
});
回答by gesutery
(function($){
$.fn.extend({
//plugin name - animatemenu
animateMenu: function(options) {
//Settings list and the default values
var defaults = {
animatePadding: 60,
defaultPadding: 10,
evenColor: '#ccc',
oddColor: '#eee'
};
var options = $.extend(defaults, options);
return this.each(function() {
var o =options;
//Assign current element to variable, in this case is UL element
var obj = $(this);
//Get all LI in the UL
var items = $("li", obj);
//Change the color according to odd and even rows
$("li:even", obj).css('background-color', o.evenColor);
$("li:odd", obj).css('background-color', o.oddColor);
//Attach mouseover and mouseout event to the LI
items.mouseover(function() {
$(this).animate({paddingLeft: o.animatePadding}, 300);
}).mouseout(function() {
$(this).animate({paddingLeft: o.defaultPadding}, 300);
});
});
}
});
})(jQuery);
回答by Rakhi
you can use it like this
你可以像这样使用它
$(document).ready(function() {
$('#button').click(function(){
$(this).myFunction();
});
$.fn.myFunction = function() {
alert('test');
}
});
回答by Alex W
For those who are looking for a "custom function" as per the title, it is as simple as:
对于那些根据标题寻找“自定义功能”的人来说，它很简单：
if(window.$)
window.$.customMethod = function() { * your code here * };
This will then work like $.ajax()does
这将像$.ajax()这样工作
回答by qwerty
I wanted my custom functions to be invoked like $.myfunction(). I defined those functions in an external js file somewhat like this
我希望我的自定义函数像$.myfunction(). 我在一个外部 js 文件中定义了这些函数，有点像这样
$.myfunction = function(){
//Your code here
};
