jquery插件方法的概念

我刚刚开始制作自己的jquery插件。我还没有完全理解使用它们和在插件中添加方法的概念，我最近的尝试失败了，我不知道为什么。在本例中，bellow我得到了一段常规代码，用于执行capFirst，我想将其转换为插件

HTML

<div id="contain">
    <input type="text" /><br />
    <input type="text" /><br />
    <input type="text" />
</div>

我的插件代码尝试

    (function($) {

    $.fn.capFirst = function () {        
            $(this).keyup(function(){
                var $this = $(this);    
                $this.val(methods.capitaliseFirstLetter($this.val()));
            });      
    };

    var methods = function () {       
        capitaliseFirstLetter: function(inputValue) {
              return inputValue.charAt(0).toUpperCase() + inputValue.slice(1);  
        } 
    };

})(jQuery);

$('#contain > input').capFirst();

jsfiddle：

更新

---

jsfiddle中的工作解决方案：

唯一明显的区别是用于“this”的双$（$（））。你有没有试过移除其中一个$（）

第二：通常您应该“返回此”以启用链接

第三：通常应该使用插件中的.each（）来支持多个元素选择器

this.each(function() {
   $(this).keyup(...);
})

第四：您试图访问一个类的方法，而不首先使用“new”操作符。要么你应该这样做

var myObject = {method: function() {...}}

myObject.method();

或者您应该首先实例化对象

var myObject = function() {
    function method() {
    }
}

var myInstance = new myObject();
myInstance.method();

---

该问题是由以下部分引起的：

var methods = function () {       
    capitaliseFirstLetter: function(inputValue) {
          return inputValue.charAt(0).toUpperCase() + inputValue.slice(1);  
    } 
};

这实际上会导致语法错误。您似乎混淆了对象文字所需的语法和“类”（需要使用

new

操作符创建类的实例）所需的语法。如果您只是将其设置为对象文字，而不是函数，它将起作用：

var methods = {       
    capitaliseFirstLetter: function(inputValue) {
          return inputValue.charAt(0).toUpperCase() + inputValue.slice(1);  
    } 
};

这是一个例子

还请注意，在您的插件方法中，

这个

已经是jQuery的一个实例，因此您不需要再次将它传递给jQuery：

 $(this).keyup(function() {  //$(this)...
 this.keyup(function() { //Can just be this

更新

    (function($) {

    $.fn.capFirst = function () {        
            $(this).keyup(function(){
                var $this = $(this);    
                $this.val(methods.capitaliseFirstLetter($this.val()));
            });      
    };

    var methods = function () {       
        capitaliseFirstLetter: function(inputValue) {
              return inputValue.charAt(0).toUpperCase() + inputValue.slice(1);  
        } 
    };

})(jQuery);

$('#contain > input').capFirst();

另一种方法（使用

函数

而不是对象文本）是这样的：

$.fn.capFirst = function () {
    this.keyup(function(){
        var $this = $(this),  
            m = new methods(); //Create an instance of methods
        $this.val(m.capitaliseFirstLetter($this.val())); //Call the method
    });                  
};
var methods = function() {       
    this.capitaliseFirstLetter = function(inputValue) {
          return inputValue.charAt(0).toUpperCase() + inputValue.slice(1);  
    } 
};

这是该版本的一个示例。

这就是你的插件应该是什么样子的 查看更新的 jQuery文档包含一些关于的好信息

---

你会找到我的完整编辑。

你为什么要做

$（$（这个））

？只需将

这个

传递到jQuery中，然后将结果对象再次传递到jQuery中。这两个都不是必需的！您仍然不需要将

这个
传递到jQuery中。它已经是jQuery的一个实例了。如果我返回this.each（），我的$（'#contain>input'）.capFirst（）将如何处理；行be？您可以用同样的方式调用插件，区别在于它返回元素，使得在相同但更新的对象上使用其他函数/插件成为可能。比如
$（'#contain>input'）.capFirst（）.myOtherPlugin（）.css（'color'，'red'）
$（此）.keyup（）
已引用整个元素选择，因此无需使用
$遍历所有元素。每个（）
和插件都应返回其接收和修改的元素以保持链接性。是的，但每个元素都是必需的，因为如果不使用每个元素，将导致“每个文本框都有相同的文本”哦，该死的，是我的错。非常感谢。我最近得到了这种效果，但这肯定是遇到了其他事情。
jQuery.fn.capFirst = function () {
    $(this).keyup(function(){ 
        inputValue = $(this).val();
        inputValue = inputValue.charAt(0).toUpperCase() + inputValue.slice(1);
        $(this).val(inputValue);
    });                        
};

jQuery(function() {
    $('#contain > input').capFirst();   
});

(function($) {

    $.fn.capFirst = function () {
        return this.keyup(function() { // Returning the elements to maintain chainability
            var $this = $(this);    
            $this.val(methods.capitaliseFirstLetter($this.val()));
        });                  
    };

    var methods = { // Made this an object/array instead of a function that didn´t return anything.
        capitaliseFirstLetter: function(inputValue) {
            return inputValue.charAt(0).toUpperCase() + inputValue.slice(1);  
        } 
    };

})(jQuery);

$(document).ready(function() { // Selectors should not be used before the DOM is ready.
    $('#contain > input').hide().capFirst().show().css('color', 'blue'); // Demo. chainability
});