当新手遇到 jQuery.fn.extend

Question

(function ($) {
    $.fn.extend({
         test: function () {
            var $this = $(this);
            $this.find('div').html('test');
            
        },

　　　　　test: function () {
            var $this = $(this);
            $this.find('div').html('test');
            
        }

}); })(jQuery); 

测试代码如上

 

我也在页面初始化的时候调用 $("#test").test(); $("#test1").test1();

是没问题的。

然后 我想通过按钮点击来触发这个方法 

发现调用时候 显示 undefined

我用控制台 ("#test1").test1 可以找到这个方法，但是("#test1").test1() 时候就提示undefined 我想问下是什么原因

 

新手学习，求指教.

Answer 1

你的代码调用的是：("#test1").test1() 不知道楼主是不是这样想的： 　　为jQuery原型扩展两个test方法，那么第二个test方法就叫test1。但是楼主在运行的时候发现，test1为undefined。 楼主使用jQuery.fn.extend方法扩展，可以拆为下面的方法： jQuery.prototype.test=function(){ var $this = $(this); $this.find('div').html('test'); } //然后楼主又扩展了一遍test()方法，覆盖了上面的test jQuery.prototype.test=function(){ var $this = $(this); $this.find('div').html('test'); } 从上面可以看到楼主调用的test1根本没有被定义，既然没有被定义，那么自然是undefined。 当然，如果是楼主粗心写错了的话........我就不说什么了

Answer 2

$.fn.extend是扩展的实例对象！

Answer 3

$("#test").test 算是一个表达式，控制台显示出它的值。因为是个普通函数，显示的就是它的函数代码了。 test() 的话，会执行这个函数，然后控制台显示返回值，你没写 return，所以就是 undefined 了

Answer 4

推荐一本书你去看一下，就了然啦！如何编写锋利的jquery，我就是看这个现在才略知一二，楼上答案的你可以参考。

Answer 5

?????????text1()哪里定义了啊