如何創建我自己的jQuery插件

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()將您的「操作」應用於所有匹配元素。

例如

$.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/