我知道在JavaScript中语法是这样的:
function myfunction(param){
//some code
}
是否有一种方法可以在jQuery中声明一个可以添加到元素中的函数?例如:
$('#my_div').myfunction()
我知道在JavaScript中语法是这样的:
function myfunction(param){
//some code
}
是否有一种方法可以在jQuery中声明一个可以添加到元素中的函数?例如:
$('#my_div').myfunction()
当前回答
你可以这样做:
jQuery.fn.extend({
myfunction: function(param){
// code here
},
});
OR
jQuery.extend({
myfunction: function(param){
// code here
},
});
$(element).myfunction(param);
其他回答
<!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>
尽管你已经收到了这些答案,但值得注意的是,在函数中使用jQuery并不需要编写插件。当然,如果它是一个简单的一次性函数,我认为写一个插件是多余的。只要将选择器作为参数传递给函数,就可以更容易地完成这个任务。你的代码应该是这样的:
function myFunction($param) {
$param.hide(); // or whatever you want to do
...
}
myFunction($('#my_div'));
注意,变量名$param中的$不是必需的。这只是我的一个习惯,让我很容易记住变量包含一个jQuery选择器。你也可以用参数。
你也可以使用extend(创建jQuery插件的方式):
$.fn.extend(
{
myfunction: function ()
{
},
myfunction2: function ()
{
}
});
用法:
$('#my_div').myfunction();
要使一个函数在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插件。
例如—http://jsfiddle.net/VwPrm/
听起来好像你想通过jQuery的原型(也就是写一个jQuery插件)来扩展jQuery对象。这意味着通过调用jQuery函数($(selector/DOM element))创建的每个新对象都有这个方法。
这里有一个非常简单的例子:
$.fn.myFunction = function () {
alert('it works');
};
Demo