JQuery包装器提供了大量的方法，可以再页面中直接使用。但是，没有

任何一个库可以满足所有的需求，所以，JQuery库提供了丰富的扩展功能

。以禁用一组表单元素为例，看看怎么简单有效的在JQuery库中添加自定

义的功能扩展。（JQuery没有禁用表单元素的方法哦）

上代码：

  1.    1: <!DOCTYPE>
  2.  
  3.    2: <html lang="en">
  4.  
  5.    3: <head>
  6.  
  7.    4:     <title>Custom Method!</title>
  8.  
  9.    5:     <meta http-equiv="content-type" content="text/html;charset=utf-8">
  10.  
  11.    6:     <script type="text/javascript" src="js/jquery-2.1.1.js"></script>
  12.  
  13.    7:     <script type="text/javascript">
  14.  
  15.    8:         jQuery(function()
  16.  
  17.    9:             {
  18.  
  19.   10:                 $("form input").disable();
  20.  
  21.   11:             });
  22.  
  23.   12:     </script>
  24.  
  25.   13: </head>
  26.  
  27.   14: <body>
  28.  
  29.   15:     <p>测试自定义方法禁用表单元素</p>
  30.  
  31.   16:     <form>
  32.  
  33.   17:         <input type="text" value="test"><br/>
  34.  
  35.   18:         <input type="button" value="confirm" class="test">
  36.  
  37.   19:     </form>
  38.  
  39.   20: </body>
  40.  
  41.   21: </html>

文本框和按钮已经被禁用：

若只禁用按钮，添加一个css类即可;

  1.    1: jQuery(function()
  2.  
  3.    2:             {
  4.  
  5.    3:                 $("form input.test").disable();
  6.  
  7.    4:             });

看看是不是禁用了按钮：

实现也很简单，打开jquery-2.1.1.js源码，没有压缩的，比较容易，我引入

的是jquery-2.1.1.js，然后添加下列代码

  1.    1: jQuery.fn.disable=function () {
  2.  
  3.    2:         return this.each(function()
  4.  
  5.    3:             {
  6.  
  7.    4:                 if(this.disabled != null) this.disabled=true;
  8.  
  9.    5:             });
  10.  
  11.    6:     }

在按照上述案例的方式调用即可。

在《JQuery In Action》一书中，提到以$.fn.方法名方式扩展（P12），我

测试过，没有实现禁用。错误之处，还望指正。

更多相关文章，去看看

jQuery中实现自定义方法的扩展的更多相关文章

  1. JavaScript jQuery 事件、动画、扩展

    事件 因为JavaScript在浏览器中以单线程模式运行,页面加载后,一旦页面上所有的JavaScript代码被执行完后,就只能依赖触发事件来执行JavaScript代码. 浏览器在接收到用户的鼠标或 ...

  2. jQuery中的事件——《锋利的JQuery》

    虽然利用原生的JavaScript事件能完成一些交互,但jQuery增加并扩展了基本的事件处理机制.jQuery不仅提供了更加优雅的事件处理语法,而且极大地增强了事件处理能力. 1.加载DOM 在Ja ...

  3. JQuery中的工具函数总结

    前提引入 前提当然也是要引入Jquery啦... <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" typ ...

  4. jQuery中的100个技巧

      1.当document文档就绪时执行JavaScript代码. 我们为什么使用jQuery库呢?原因之一就在于我们可以使jQuery代码在各种不同的浏览器和存在bug的浏览器上完美运行. < ...

  5. jQuery：详解jQuery中的事件（一）

    之前用过一些jQuery的动画和特效,但是用到的部分也不超过10%的样子,感觉好浪费啊——当然浪费的不是jQuery,而是Web资源.后来就想深入研究下jQuery的内部机理,读过两遍jQuery源代 ...

  6. jQuery学习笔记（四）jQuery中的动画

    目录 show()方法和hide()方法 fideIn()方法和fadeOut()方法 slideUp方法和slideDown()方法 自定义动画方法animate toogle(),slideTog ...

  7. jquery中的DOM事件绑定与解绑

    在jquery事件中有时候有的事件只需要在绑定后有效触发一次,当通过e.target判断触发条件有效触发后解除绑定事件,来避免多次无效触发和与未知情况造成冲突. 这时候就要用到了jquery中的事件绑 ...

  8. jQuery中$.fn的用法示例介绍

    $.fn是指jquery的命名空间,加上fn上的方法及属性,会对jquery实例每一个有效,下面有个不错的示例,喜欢的朋友可以参考下 如扩展$.fn.abc(),即$.fn.abc()是对jquery ...

  9. 深入jQuery中的data()

    引入 data函数在jQuery中看起来很不起眼, 就像沙滩上一颗平凡的沙子, 但仔细一瞅, 却惊讶的发现data是jQuery中无比重要的一环, 甚至jQuery中各种事件都基于此. data有什么 ...

随机推荐

  1. zTree -- jQuery 树插件

    http://www.ztree.me/v3/main.php#_zTreeInfo http://plugins.jquery.com/zTree.v3/ 例子:http://www.ztree.m ...

  2. hdu 4712

    看了大牛的解法  第一次知道可以产生随机数解题   在计算hamming距离时用了位运算  很简便 /************************************************* ...

  3. DevSecOps 实施篇！系列（二）

    想在自己公司建立 DevSecOps 计划?没问题,企业规模无论大小,都可轻松实现.这里有5个基本的 DevSecOps 原则可以帮助你启动.当然,如果你对 DevSecOps 还不太熟悉,不妨先看看 ...

  4. linux查找某个文件中单词出现的次数

    文件名称:list 查找单词名称:test 操作命令: (1)more list | grep -o test | wc -l (2)cat list | grep -o test | wc -l ( ...

  5. ubuntu无线上网静态ip配置以及配置静态IP 之后无法正常上网的解决方案

    一. 配置无线网络的静态IP 编辑/etc/network/interfaces文件如下: auto lo wlan0 iface lo inet loopback iface wlan0 inet ...

  6. Linux 阿里云挂载新分区

    阿里云服务器可以自己购买数据盘并挂载使用,虽然官方也提供了挂载的教程,但是还是有些朋友不清楚其中的细节,为此,我在这里来给大家分享一下详细的挂载办法. 工具/原料 已经购买开通阿里云服务器,并且在开通 ...

  7. Oracle程序包

    程序包由两部分构成:规范(specification)和主体(body). 创建表 create table PEOPLE ( ID NUMBER primary key not null, NAME ...

  8. java网络基本类使用(一)

    1.怎么获取ip相关信息 import java.net.InetAddress; import java.net.NetworkInterface; import java.util.Enumera ...

  9. A simple json-rpc case for bitcoin blockchains

    #!/usr/bin/env python import json import jsonrpc import requests #url = "http://user:password@i ...

  10. 2013 ACM/ICPC Asia Regional Changsha Online - E

    第一个被板刷的题 取余 依次算在周几 #include <iostream> #include<cstdio> #include<cstring> #include ...