当新手遇到 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()哪里定义了啊