小 jquery 扩展不起作用

Question

在尝试了几种方法（第一次）为 jQuery 创建扩展之后......但它还不起作用：

(function($){ 
$.fn.fixInputWidthsForBlog = function() 
{ 
console.log('hi extension');
// var w = $('#newblogentryform input[name="headline"]').outerWidth();
// $('#newblogentryform textarea[name="text"]').outerWidth(w); 
// $('#newblogentryform submit[name="submit"]').outerWidth(w); 
}; // endFUNC
}(jQuery)); 

这（以下）是我得到错误的地方：

"jquery-3.1.0.min.js:2 Uncaught TypeError: $.fixInputWidthsForBlog is not a function"

$(document).ready(function(){

    $.fixInputWidthsForBlog(); 
    alert('ok1'); 
    $(window).on('resize', function(){ $.fixInputWidthsForBlog(); });
    $('.linkNewBlogEntry').on('click',function() { 
        $('#newblogentryformdiv').slideToggle().delay(1200).fixInputWidthsForBlog(); 
        // setTimeout("fixInputWidthsForBlog();",1200); 
        return false;   
        }); 
}); 

我也试过了：

$.fn.extend({
    fixInputWidthsForBlog = function() {} 
}); 

简单地说：

$.fn.fixInputWidthsForBlog = function() {}; 

但所有这些都会导致同样的错误：

"jquery-3.1.0.min.js:2 Uncaught TypeError: $.fixInputWidthsForBlog is not a function"

在我尝试执行的行中：

$.fixInputWidthsForBlog();  

以一种或另一种方式。

Answer 1

扩展$.fn 仅适用于元素链，不适用于jQuery 对象的自身功能。为此，您需要直接扩展$，而不是fn。

(function($) {
    // jQuery plugin
    $.fn.onElements = function() {
        console.log('hi, element chain plugin');

        // make chainable
        return this;
    };

    // jQuery object extension
    $.onjQuery = function() {
        console.log('hi, jQuery object extension');
    };
}(jQuery));

// will work
$('someElementSelector').onElements();
$('someElementSelector').onElements().onElements();
$.onjQuery();

// will not work
// $('someElementSelector').onjQuery();
// $.onElements();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>