当前位置: 代码迷 >> Web前端 >> JQUERY_TEST_$.fn.xx跟$.fn.extend.xx和$.extend.xx
  详细解决方案

JQUERY_TEST_$.fn.xx跟$.fn.extend.xx和$.extend.xx

热度:520   发布时间:2012-09-05 15:19:34.0
JQUERY_TEST_$.fn.xx和$.fn.extend.xx和$.extend.xx
[js见附件]
<HTML>
<HEAD>
<TITLE>JQuery_EXTEND_TEST[简单继承]</TITLE>
<script  src="jquery-1.6.js"></script>
<script src="jquery_extend_test.js"></script>
<style>
*{margin:0;padding:0;}
h5{
background-color:gray;
}
span {
background-color:yellow;
}
pre {
margin-top:10px;
color:#fff;
background-color:#000;
}
</style>
</HEAD>
<BODY>
<h5>1.JQUERY中$等价于jQuery[即看成jQuery类]</h5>
<h5>2.jQuery(function(){call fun1;call fun2;...});<=====>jQuery(document).ready(function(){call fun1;call fun2;..});</h5>
<hr/>
<h5>$.fn.extend({FunName:function(){}});</h5>
<input type="button" id="test1" value="test1" onclick="$(this).showMe('prefix');"/>
<span>实例方法[$(this).showMe(prefix)]</span><br/>

<h5>$.fn.FunName = function(){};-----$.fn = jQuery.fn = jQuery.prototype[prototype即原型模式,通过对象的拷贝来实现-要与类/静态方法区别开]</h5>
<input type="button" id="test2" value="test2" onclick="$(this).showMe1('prefix');"/>
<span>实例方法[$(this).showMe1(prefix)]</span><br/>

<h5>$.extend({FunName:function(){}});</h5>
<input type="button" id="test3" value="test3" onclick="$.showAppointedOne($('#test3'));"/>
<span>类/静态方法[$.showAppointedOne($('#test3'))]</span><br/>

<pre onclick="(function(arg1){alert(arg1);})('argTestStr');">
javascript原始-匿名函数定义+执行[点击]
(function(arg1){
alert(arg1);
})('argTestStr');
</pre>

<pre onclick="(function($){alert($('#test1').val());})(jQuery);">
jQuery匿名函数定义+执行[点击]
(function($){
alert($('#test1').val());
})(jQuery);
</pre>
</BODY>
<script>
</script>
</HTML>