实例说明扩展JQuery方式

如何扩展Jquery？

1. 有两种方式来扩展JQuery，分别是：

$.extend(object): 为域名jQuery增加方法，为静态方法，全局方法，任何人都可以调用，调用的时候，需要直接加上$或者jQuery前缀。

$.fn.extend(object): $.fn = $.prototype, 因此可以从这里看出，这张扩展方式是在为每个jQuery对象增加方法，因为每个jQuery对象的实例，都可以获得在这里扩展的方案。调用的时候，不需要添加特殊的前缀，直接选取jQuery对象之后，就可以调用了。

2. jQuery是一个封装的非常好的类，如果使用$(“#id”)可以生成一个jQuery对象，但是注意，jQuery对象并不是真正的HTML标记所对应的对象，而是包含一个标记所对应的数组，数组中的成员才是标记所对应的对象。

下面代码可以演示这两种方式：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"/><title></title><script type="text/javascript" src="../lib/jquery-1.6.3.js"></script><script type="text/javascript">$(function() {$.extend({staticextend: function() {alert("This is a static extend function, called staticextend.")}});$.fn.extend({jqueryextend: function() {alert("all jquery object can call this function, and I am jqueryextend.")}});//以静态方法的形式直接使用jquery本身的对象调用if ($.staticextend) {$.staticextend();} else {alert("There is not a function called staticextend in Jquery Object itself.");}//以静态方法的形式直接调用jqueryextendif ($.jqueryextend) {$.jqueryextend();} else {alert("There is not a function called jqueryextend in Jquery Object itself. You must get wrong.");}//获取一个jquery实例var jdiv = $(".idtest");//一个jquery实例本身包含了一个数组对象if (jdiv.length>1) {alert("we can see jdiv contains an array object!");}//如果jquery有多个，需要这样调用。jdiv.each(function() {alert("I am "+ $(this).attr("id")); //这里不能直接使用this,因为this是htmlelement，没有attr方法。if (jdiv.staticextend) {jdiv.staticextend();} else {alert("There is not a function called staticextend in jdiv ");}if (jdiv.jqueryextend) {jdiv.jqueryextend();} else {alert("There is not a function called jqueryextend in jdiv. You must get wrong.");}});});</script>
</head>
<body><div id="one" class="idtest"></div>
<div id="two" class="idtest"></div>
</body>
</html>

如果扩展jquery已经存在的方法，比如拿jqgrid来说，如果你想修改某个方法，让他在方法的执行前后做些事情，这样的话，我们可以这样做：

var oldEditCell = $.fn.jqGrid.editCell;
$.jgrid.extend({editCell: function (iRow,iCol, ed){var ret;// do someting beforeret = oldEditCell.call (this, iRow, iCol, ed);// do something afterreturn ret; // return original or modified results}
});

在这里，我们覆盖了原始的editCell方法，你可以在这个方法的前后做些事情。

转载于:https://www.cnblogs.com/kevinhigher/archive/2011/10/15/2213759.html

实例说明扩展JQuery方式相关推荐

jquery function_前端基础进阶（十三）详细图解jQuery扩展jQuery插件
UI 鉴赏早几年学习前端,大家都非常热衷于研究jQuery源码. 我至今还记得当初从jQuery源码中学到一星半点应用技巧的时候常会有一种发自内心的惊叹,"原来JavaScript居然可以 ...
何恺明团队推出Mask^X R-CNN，将实例分割扩展到3000类
翻译 | AI科技大本营(ID:rgznai100) 参与 | shawn,刘畅今年10月,何恺明的论文"Mask R-CNN"摘下ICCV 2017的最佳论文奖(Best Pa ...
《扩展 jQuery》——6.3　总结
本节书摘来自异步社区<扩展 jQuery>一书中的第6章,第6.3节,作者:[美]Keith Wood著,更多章节内容可以访问云栖社区"异步社区"公众号查看 6.3 总 ...
Ajax和JSON-学习笔记02【JQuery方式实现Ajax】
Java后端学习路线笔记汇总表[黑马程序员] Ajax和JSON-学习笔记01[原生JS方式实现Ajax] Ajax和JSON-学习笔记02[JQuery方式实现Ajax] Ajax和JSON-学 ...
jquery订阅发布插件代码草稿，为jquery扩展jquery.publish，jquery.subscribe方法
jquery订阅发布插件代码草稿! jquery订阅发布插件代码草稿,为jquery扩展jquery.publish,jquery.subscribe方法 --- jquery订阅发布插件代码草稿 & ...
扩展Jquery方法创建LigerUI Grid
///** //*封装jquery get请求ajax //*author:叶明龙 //*time:2012-12-10 //*/ function getAjax(url, para, fn) {i ...
《扩展 jQuery》——2.3　总结
本节书摘来自异步社区<扩展 jQuery>一书中的第2章,第2.3节,作者:[美]Keith Wood 译者: 李强更多章节内容可以访问云栖社区"异步社区"公众号查看. ...
Dubbo实例~直连的方式
Dubbo实例~直连的方式 2.4 Dubbo实例~直连的方式 2.4.1 服务的提供者 2.4.2 服务的消费者 2.4.1 服务的提供者.消费者两个服务跑起来 2.4 Dubbo实例~直连的方式 ...
php实现自动播放ppt,JavaScript_jquery实现简单的自动播放幻灯片效果，本文实例讲述了jquery实现简单 - phpStudy...
jquery实现简单的自动播放幻灯片效果本文实例讲述了jquery实现简单的自动播放幻灯片效果.分享给大家供大家参考.具体实现方法如下: html部分: Pretty cool eh? This s ...

实例说明扩展JQuery方式

实例说明扩展JQuery方式相关推荐

最新文章

热门文章