首页 > 代码库 > jQuery中实现自定义方法的扩展

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

2024-07-19 17:39:47   212人阅读

    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="http://www.mamicode.com/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="http://www.mamicode.com/test"><br/>  18:         <input type="button" value="http://www.mamicode.com/confirm" class="test">  19:     </form>  20: </body>  21: </html>

 

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

1

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

 

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

 

看看是不是禁用了按钮：

2

 

实现也很简单，打开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），我

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

 

更多相关文章，去看看

 

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


联系
我们