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 > |
分类:
前端:javascript笔记
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 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 重磅开源!
· 周边上新:园子的第一款马克杯温暖上架