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

shizisongsong

浏览: 39563 次

最近访客更多访客>>

bumou

xdkk

skycity20171221

青春依旧

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (27)

社区版块

存档分类

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

JavaScript HTML5 CSS jQuery

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

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

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

义的功能扩展。（JQuery没有禁用表单元素的方法哦）精心开发5年的UI前端框架！

上代码：

[javascript]view plaincopy 
 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>

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

前端Ui资源

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

[javascript]view plaincopy 
 jQuery(function()  
  
             {  
  
                 $("form input.test").disable();  
  
             });  

看看是不是禁用了按钮：

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

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

[javascript]view plaincopy 
 jQuery.fn.disable=function () {  
  
         return this.each(function()  
  
             {  
  
                 if(this.disabled != null) this.disabled=true;  
  
             });  
  
     }