C军

不玩博客了!

  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理
  496 随笔 :: 0 文章 :: 634 评论 :: 571万 阅读

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({})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!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(){}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!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>
posted on   逆心  阅读(745)  评论(0编辑  收藏  举报
编辑推荐:
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
阅读排行:
· 10年+ .NET Coder 心语 ── 封装的思维:从隐藏、稳定开始理解其本质意义
· 地球OL攻略 —— 某应届生求职总结
· 提示词工程——AI应用必不可少的技术
· Open-Sora 2.0 重磅开源!
· 周边上新:园子的第一款马克杯温暖上架
点击右上角即可分享
微信分享提示