blocks|key|276906|text|从Docs|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|276907|(function(+$+){
+++$.fn.myfunction+=+function()+{
++++++alert('hello+world');
++++++return+this;
+++};+
})(+jQuery+);|code-block|syntax|javascript|276908|然后你就做了|276909|$('#my_div').myfunction();|276910|entityMap|0|LINK|mutability|MUTABLE|url|http://docs.jquery.com/Plugins/Authoring^0|1|4|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@$A|V|B|W|1|X]]|C|$]]|$1|D|3|E|5|F|7|Y|8|@]|9|@]|C|$G|H]]|$1|I|3|J|5|6|7|Z|8|@]|9|@]|C|$]]|$1|K|3|L|5|F|7|10|8|@]|9|@]|C|$G|H]]|$1|M|3|-4|5|6|7|11|8|@]|9|@]|C|$]]]|N|$O|$5|P|Q|R|C|$S|T]]]]

From the <a href="http://docs.jquery.com/Plugins/Authoring" rel="noreferrer">Docs</a>:

<pre><code>(function( $ ){
 $.fn.myfunction = function() {
 alert('hello world');
 return this;
 }; 
})( jQuery );
</code></pre>

Then you do 

<pre><code>$('#my_div').myfunction();
</code></pre>

blocks|key|493918|text|要使某个函数在jQuery对象上可用，可以将其添加到jQuery原型(fn是jQuery中prototype的快捷方式)，如下所示：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|493919|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
++++}
}|code-block|syntax|javascript|493920|这通常称为jQuery+plugin。|offset|length|493921|示例-+http://jsfiddle.net/VwPrm/|493922|entityMap|0|LINK|mutability|MUTABLE|url|http://docs.jquery.com/Plugins/Authoring|1|http://jsfiddle.net/VwPrm/^0|0|0|5|D|0|0|4|Q|1|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Y|8|@]|9|@$I|Z|J|10|1|11]]|A|$]]|$1|K|3|L|5|6|7|12|8|@]|9|@$I|13|J|14|1|15]]|A|$]]|$1|M|3|-4|5|6|7|16|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|T]]|U|$5|P|Q|R|A|$S|V]]]]

To make a function available on jQuery objects you add it to the jQuery prototype (fn is a shortcut for prototype in jQuery) like this:

<pre><code>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
 }
}
</code></pre>

This is usually called a <a href="http://docs.jquery.com/Plugins/Authoring" rel="noreferrer">jQuery plugin</a>.

Example - <a href="http://jsfiddle.net/VwPrm/" rel="noreferrer">http://jsfiddle.net/VwPrm/</a>

blocks|key|493825|text|$(function+()+{
++++//declare+function+
++++$.fn.myfunction+=+function+()+{
++++++++return+true;
++++};
});

$(document).ready(function+()+{
++++//call+function
++++$("#my_div").myfunction();
});|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|493826|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>$(function () {
 //declare function 
 $.fn.myfunction = function () {
 return true;
 };
});

$(document).ready(function () {
 //call function
 $("#my_div").myfunction();
});
</code></pre>

blocks|key|276864|text|是的，你描述的是一个jQuery插件。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|276865|要编写jQuery插件，需要在JavaScript中创建一个函数，并将其分配给object+jQuery.fn上的一个属性。|offset|length|style|CODE|276866|例如。|276867|jQuery.fn.myfunction+=+function(param)+{
++++//+Some+code
}|code-block|syntax|javascript|276868|在插件函数中，this关键字被设置为在其上调用插件的jQuery对象。所以，当你这样做的时候：|276869|$('#my_div').myfunction()|276870|然后，myfunction内部的this将被设置为$('#my_div')返回的jQuery对象。|276871|请参阅http://docs.jquery.com/Plugins/Authoring了解完整的故事。|276872|entityMap|0|LINK|mutability|MUTABLE|url|http://docs.jquery.com/Plugins/Authoring^0|0|1A|9|0|0|0|7|4|0|0|3|A|G|4|P|C|0|3|14|0|0^^$0|@$1|2|3|4|5|6|7|14|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|15|8|@$D|16|E|17|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|18|8|@]|9|@]|A|$]]|$1|J|3|K|5|L|7|19|8|@]|9|@]|A|$M|N]]|$1|O|3|P|5|6|7|1A|8|@$D|1B|E|1C|F|G]]|9|@]|A|$]]|$1|Q|3|R|5|L|7|1D|8|@]|9|@]|A|$M|N]]|$1|S|3|T|5|6|7|1E|8|@$D|1F|E|1G|F|G]|$D|1H|E|1I|F|G]|$D|1J|E|1K|F|G]]|9|@]|A|$]]|$1|U|3|V|5|6|7|1L|8|@]|9|@$D|1M|E|1N|1|1O]]|A|$]]|$1|W|3|-4|5|6|7|1P|8|@]|9|@]|A|$]]]|X|$Y|$5|Z|10|11|A|$12|13]]]]

Yup — what you’re describing is a jQuery plugin.

To write a jQuery plugin, you create a function in JavaScript, and assign it to a property on the object <code>jQuery.fn</code>.

E.g.

<pre><code>jQuery.fn.myfunction = function(param) {
 // Some code
}
</code></pre>

Within your plugin function, the <code>this</code> keyword is set to the jQuery object on which your plugin was invoked. So, when you do:

<pre><code>$('#my_div').myfunction()
</code></pre>

Then <code>this</code> inside <code>myfunction</code> will be set to the jQuery object returned by <code>$('#my_div')</code>.

See <a href="http://docs.jquery.com/Plugins/Authoring" rel="noreferrer">http://docs.jquery.com/Plugins/Authoring</a> for the full story.

blocks|key|277126|text|您可以随时执行以下操作：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|277127|jQuery.fn.extend({
+++myfunction:+function(param){
+++++++//+code+here
+++},
});
OR
jQuery.extend({
+++myfunction:+function(param){
+++++++//+code+here
+++},
});
$(element).myfunction(param);|code-block|syntax|javascript|277128|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

You can always do this:

<pre><code>jQuery.fn.extend({
 myfunction: function(param){
 // code here
 },
});
OR
jQuery.extend({
 myfunction: function(param){
 // code here
 },
});
$(element).myfunction(param);
</code></pre>

blocks|key|276943|text|听起来你想通过它的原型(也叫write+a+jQuery+plugin)来扩展jQuery对象。这意味着通过调用jQuery函数($(selector/DOM+element))创建的每个新对象都将具有此方法。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|276944|下面是一个非常简单的例子：|276945|$.fn.myFunction+=+function+()+{
++++alert('it+works');
};|code-block|syntax|javascript|276946|Demo|276947|entityMap|0|LINK|mutability|MUTABLE|url|http://docs.jquery.com/Plugins/Authoring|1|http://jsfiddle.net/hmJNa/^0|1T|N|E|L|0|0|0|0|0|4|1|0^^$0|@$1|2|3|4|5|6|7|Y|8|@$9|Z|A|10|B|C]]|D|@$9|11|A|12|1|13]]|E|$]]|$1|F|3|G|5|6|7|14|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|15|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|16|8|@]|D|@$9|17|A|18|1|19]]|E|$]]|$1|O|3|-4|5|6|7|1A|8|@]|D|@]|E|$]]]|P|$Q|$5|R|S|T|E|$U|V]]|W|$5|R|S|T|E|$U|X]]]]

It sounds like you want to extend the jQuery object via it's prototype (aka <a href="http://docs.jquery.com/Plugins/Authoring" rel="nofollow">write a jQuery plugin</a>). This would mean that every new object created through calling the jQuery function (<code>$(selector/DOM element)</code>) would have this method.

Here is a very simple example:

<pre><code>$.fn.myFunction = function () {
 alert('it works');
};
</code></pre>

<a href="http://jsfiddle.net/hmJNa/" rel="nofollow">Demo</a>

blocks|key|277079|text|在jQuery中创建任何函数的最简单示例是|type|unstyled|depth|inlineStyleRanges|entityRanges|data|277080|jQuery.fn.extend({
++++exists:+function()+{+return+this.length+}
});

if($(selector).exists()){/*do+something+here*/}|code-block|syntax|javascript|277081|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Simplest example to making any function in jQuery is

<pre><code>jQuery.fn.extend({
 exists: function() { return this.length }
});

if($(selector).exists()){/*do something here*/}
</code></pre>

blocks|key|277155|text|<!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>|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|277156|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
&lt;meta charset=&quot;utf-8&quot;&gt;
&lt;title&gt;Define a function in jQuery&lt;/title&gt;
&lt;script src=&quot;https://code.jquery.com/jquery-3.5.1.min.js&quot;&gt;&lt;/script&gt;
&lt;script&gt;
$(document).ready(function() {
 $.fn.myFunction = function() { 
 alert('You have successfully defined your function!'); 
 }
 $(&quot;.call-btn&quot;).click(function(){
 $.fn.myFunction();
 });
});
&lt;/script&gt; 
&lt;/head&gt;
&lt;body&gt;
 &lt;button type=&quot;button&quot; class=&quot;call-btn&quot;&gt;Click Here&lt;/button&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>

I know that in JavaScript the syntax is as follows:

<pre><code>function myfunction(param){
 //some code
}
</code></pre>

Is there a way to declare a function in jQuery that can be added to an element? For example:

<pre><code>$('#my_div').myfunction()
</code></pre>

How to create a jQuery function (a new jQuery method or plugin)?

jQuery

我知道在JavaScript中，语法如下：function myfunction(param){  //some code}有没有办法在jQuery中声明一个可以添加到元素中的函数？例如：$('#my_div').myfunction()

问如何创建jQuery函数(新的jQuery方法或插件)？
EN

回答 8

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何创建jQuery函数(新的jQuery方法或插件)？EN

回答 8

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何创建jQuery函数(新的jQuery方法或插件)？
EN