Question

我是jQuery的新手，我正在学习如何创建自己的插件。

我尝试了以下代码（由我自己创建）：

<script>
$(document).ready(function(){
    $.fn.myNewFunc= function() {
        alert('you can be a professional ;) continue trying');         
    };
    $("#myBtn").click(function(){
         $("#myDiv").myNewFunc();
    });
});
</script>
<button id="myBtn"> click me </button>
<div id ="myDiv" >my div</div>

我收到了这个错误：

TypeError: $(...).myNewFunc is not a function

当我尝试$（“＃myDiv”）。myNewFunc（）;在btn.click之外我可以看到警报！

Answer 1

三个简单的错别字是破坏你的代码：

$(#myDiv).myNewFunc();

应该是：

$("#myDiv").myNewFunc();

你错过了$函数：

("#myBtn").click(function(){

应该是：

$("#myBtn").click(function(){

此处您还有一个额外的结束)：

$.fn.myNewFunc= function() {
        alert('you can be a professional ;) continue trying');         
    });   <<<=== Typo!!!

应该是：

$.fn.myNewFunc= function() {
        alert('you can be a professional ;) continue trying');         
    }

在此工作： http://jsfiddle.net/bpfad4jk/1/

以下是对代码的更实际的使用。您需要返回this以允许jQuery链接，并使用each()将“操作”应用于所有匹配元素。

e.g。

    $.fn.myNewFunc = function() {
        $(this).each(function(){
            $(this).text('you can be a professional ;) continue trying'); 
        });
        return this;
    };
    $("#myBtn").click(function(){
         $("#myDiv").myNewFunc();
        $('.myDiv').myNewFunc();
    });

JSFiddle： http://jsfiddle.net/bpfad4jk/2/

如何创建自己的jQuery插件

1 个答案: