jQuery中实现自己定义方法的扩展

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

不论什么一个库能够满足全部的需求。所以。JQuery库提供了丰富的扩展功能

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

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

上代码：

   1: <!DOCTYPE>

   2: <html lang="en">

   3: <head>

   4:     <title>Custom Method!</title>

   5:     <meta http-equiv="content-type" content="text/html;charset=utf-8">

   6:     <script type="text/javascript" src="js/jquery-2.1.1.js"></script>

   7:     <script type="text/javascript">

   8:         jQuery(function()

   9:             {

  10:                 $("form input").disable();

  11:             });

  12:     </script>

  13: </head>

  14: <body>

  15:     <p>測试自己定义方法禁用表单元素</p>

  16:     <form>

  17:         <input type="text" value="test"><br/>

  18:         <input type="button" value="confirm" class="test">

  19:     </form>

  20: </body>

  21: </html>

文本框和button已经被禁用：

若仅仅禁用button。加入一个css类就可以;

   1: jQuery(function()

   2:             {

   3:                 $("form input.test").disable();

   4:             });

看看是不是禁用了button：

实现也非常easy，打开jquery-2.1.1.js源代码，没有压缩的，比較easy，我引入

的是jquery-2.1.1.js。然后加入下列代码

   1: jQuery.fn.disable=function () {

   2:         return this.each(function()

   3:             {

   4:                 if(this.disabled != null) this.disabled=true;

   5:             });

   6:     }

在依照上述案例的方式调用就可以。

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

測试过，没有实现禁用。

错误之处。还望指正。

很多其它相关文章，去看看

巴特西

jQuery中实现自己定义方法的扩展

最新文章

热门文章