我知道在 JavaScript 中的语法如下：
function myfunction(param){
//some code
}
有没有办法在 jQuery 中声明一个可以添加到元素的函数？例如：
$('#my_div').myfunction()
问问题
667518 次
14 回答
311
从文档：
(function( $ ){
$.fn.myfunction = function() {
alert('hello world');
return this;
};
})( jQuery );
然后你做
$('#my_div').myfunction();
于 2012-08-23T13:59:26.870 回答
88
尽管您已经收到了所有答案，但值得注意的是，您无需编写插件即可在函数中使用 jQuery。当然，如果它是一个简单的一次性功能，我认为编写一个插件是矫枉过正的。只需将选择器作为参数传递给函数，就可以更容易地完成。您的代码将如下所示：
function myFunction($param) {
$param.hide(); // or whatever you want to do
...
}
myFunction($('#my_div'));
请注意，$变量名$param中的 不是必需的。我的一个习惯是让我很容易记住该变量包含一个 jQuery 选择器。你也可以使用param。
于 2012-08-23T14:17:48.473 回答
44
虽然那里有大量的文档/教程，但您的问题的简单答案是：
// to create a jQuery function, you basically just extend the jQuery prototype
// (using the fn alias)
$.fn.myfunction = function () {
// blah
};
在该函数内部，this变量对应于您调用函数的 jQuery 包装集。所以像：
$.fn.myfunction = function () {
console.log(this.length);
};
$('.foo').myfunction();
... 将向控制台刷新该类的元素数量foo。
当然，语义还有比这更多的内容（以及最佳实践和所有爵士乐），因此请务必阅读它。
于 2012-08-23T13:57:51.157 回答
14
为了让一个函数在 jQuery 对象上可用，你将它添加到 jQuery 原型中（fn 是 jQuery 中原型的快捷方式），如下所示：
jQuery.fn.myFunction = function() {
// Usually iterate over the items and return for chainability
// 'this' is the elements returns by the selector
return this.each(function() {
// do something to each item matching the selector
}
}
这通常称为jQuery 插件。
于 2012-08-23T14:00:00.130 回答
10
$(function () {
//declare function
$.fn.myfunction = function () {
return true;
};
});
$(document).ready(function () {
//call function
$("#my_div").myfunction();
});
于 2012-08-23T13:58:18.970 回答
9
是的——你描述的是一个 jQuery 插件。
要编写 jQuery 插件，您需要在 JavaScript 中创建一个函数，并将其分配给 object 的一个属性jQuery.fn。
例如
jQuery.fn.myfunction = function(param) {
// Some code
}
在您的插件函数中，this关键字设置为调用插件的 jQuery 对象。所以，当你这样做时：
$('#my_div').myfunction()
然后thisinsidemyfunction将被设置为返回的 jQuery 对象$('#my_div')。
有关完整故事，请参阅http://docs.jquery.com/Plugins/Authoring。
于 2012-08-23T13:56:34.850 回答
7
您还可以使用扩展（创建 jQuery 插件的方式）：
$.fn.extend(
{
myfunction: function ()
{
},
myfunction2: function ()
{
}
});
用法：
$('#my_div').myfunction();
于 2014-06-27T16:40:15.483 回答
6
您可以编写自己的 jQuery 插件（可以在选定元素上调用的函数），如下所示：
(函数($){
$.fn.myFunc = 函数（参数 1，参数 2）{
//this - jquery 对象保存您选择的元素
}
})( jQuery );
稍后调用它，如：
$('div').myFunc(1, null);
于 2012-08-23T13:57:31.463 回答
4
是的，您应用于使用 jquery 选择的元素的方法称为 jquery 插件，并且在 jquery 文档中有大量关于创作的信息。
值得注意的是，jquery只是javascript，因此“jquery 方法”没有什么特别之处。
于 2012-08-23T13:53:06.343 回答
4
创建一个“着色”方法：
$.fn.colorize = function custom_colorize(some_color) {
this.css('color', some_color);
return this;
}
用它：
$('#my_div').colorize('green');
这个简单的示例结合了jQuery 文档中的How to Create a Basic Plugin的精华，以及来自@Candide和@Michael的答案。
于 2017-09-26T14:18:05.700 回答
3
你总是可以这样做：
jQuery.fn.extend({
myfunction: function(param){
// code here
},
});
OR
jQuery.extend({
myfunction: function(param){
// code here
},
});
$(element).myfunction(param);
于 2017-11-27T20:11:53.047 回答
2
听起来你想通过它的原型来扩展 jQuery 对象（也就是写一个 jQuery 插件）。这意味着通过调用 jQuery 函数 ( $(selector/DOM element)) 创建的每个新对象都将具有此方法。
这是一个非常简单的例子：
$.fn.myFunction = function () {
alert('it works');
};
于 2012-08-23T13:59:55.443 回答
1
在 jQuery 中创建任何函数的最简单示例是
jQuery.fn.extend({
exists: function() { return this.length }
});
if($(selector).exists()){/*do something here*/}
于 2016-03-15T11:53:14.727 回答
0
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Define a function in jQuery</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function() {
$.fn.myFunction = function() {
alert('You have successfully defined your function!');
}
$(".call-btn").click(function(){
$.fn.myFunction();
});
});
</script>
</head>
<body>
<button type="button" class="call-btn">Click Here</button>
</body>
</html>
于 2022-01-06T13:36:39.347 回答