jQuery.fn如何扩展。
jQuery插件 $.fn(object)与$.extend(object)
jQuery提供了两个方法帮助开发插件
- $.extend(object);扩展jQuery类本身；
- $.fn.extend(object);扩展jQuery对象；
一、$.fn
$.fn 等于 $.prototype；这样就好理解了，就好比对String.porotype增加一个函数，然后所有的字符串对象都能够直接调用，
jQuery也是如果。给jQuery增加一个函数，然后所有的jQuery对象都能够调用。jQuery对象就是$("#id")或
$(document.getElementById("Id"))这些;
在写法上可以
$.fn或$.fn.extend({})
<!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>
二、$.extend();
我们知道$就是jQuery对象。所以
$.extend其实就是扩展"jQuery"这个对象本身的函数。实际上相当于你创建了一个object对象,然后object.abc = function(){}
<!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>