jQuery.fn.extend() 与 jQuery.extend()

时间 2019-11-05

标签 jquery.fn.extend jquery extend jquery.extend 栏目 JQuery 繁體版

原文原文链接

jQuery.fn如何扩展。html

jQuery插件 $.fn(object)与$.extend(object)jquery

jQuery提供了两个方法帮助开发插件函数

$.extend(object);扩展jQuery类自己；
$.fn.extend(object);扩展jQuery对象；

1、$.fn

$.fn 等于 $.prototype；这样就好理解了，就比如对String.porotype增长一个函数，而后全部的字符串对象都可以直接调用，
jQuery也是若是。给jQuery增长一个函数，而后全部的jQuery对象都可以调用。jQuery对象就是$("#id")或
$(document.getElementById("Id"))这些;
在写法上能够
$.fn或$.fn.extend({})
this

<!DOCTYPE html>
<html>
<head>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<script>

     $.fn.clear = function(){
          $(this).html('');	//写法一
      }
        
	$.fn.extend({
          clear:function(){
             $(this).html('');	//写法二
          }
    })
            
    $(function(){
        $("#btn1").click(function(){
        	$("h1").clear();
        })
    	
    })
</script>
</head>
<body>

<h1>个人第一个 JavaScript 程序</h1>
<input type="button" id="btn1" value="肯定" />
</body>
</html>

2、$.extend();

咱们知道$就是jQuery对象。因此
$.extend其实就是扩展"jQuery"这个对象自己的函数。实际上至关于你建立了一个object对象,而后object.abc = function(){}spa

<!DOCTYPE html>
<html>
<head>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<script>
     $.clear = function(obj){
          obj.html('');			//写法一
      }
        
	$.extend({
          clear:function(obj){
             obj.html('');		//写法二
          }
    })
            
    $(function(){
        $("#btn1").click(function(){
        	$.clear($("h1"));
        })
    })
</script>
</head>
<body>

<h1>个人第一个 JavaScript 程序</h1>
<input type="button" id="btn1" value="肯定" />
</body>
</html>