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

迷南。 2022-08-11 12:58 179阅读 0赞

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>

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

[![1][]][1 1]

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

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

看看是不是禁用了按钮：

[![2][]][2 1]

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

的是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），我

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

更多相关文章，[去看看][Link 1]

[1]: http://ido321.qiniudn.com/wp-content/uploads/2014/08/1_thumb1.jpg
[1 1]: http://ido321.qiniudn.com/wp-content/uploads/2014/08/15.jpg
[2]: http://ido321.qiniudn.com/wp-content/uploads/2014/08/2_thumb1.jpg
[2 1]: http://ido321.qiniudn.com/wp-content/uploads/2014/08/21.jpg
[Link 1]: http://www.ido321.com/397.html