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

最新推荐文章于 2021-11-12 09:19:10 发布

dsgru

最新推荐文章于 2021-11-12 09:19:10 发布

阅读量294

点赞数

文章标签：前端 web 框架 UI JQUERY ViewUI

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

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

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

义的功能扩展。（JQuery没有禁用表单元素的方法哦）前端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;  
  
             });  
  
     }