码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2014-08-27 08:13:37      阅读:210      评论:0      收藏:0      [点我收藏+]

标签:js   扩展   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>

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

bubuko.com,布布扣

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

   1: jQuery(function()

   2:             {

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

   4:             });

看看是不是禁用了按钮:

bubuko.com,布布扣

 

实现也很简单,打开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中实现自定义方法的扩展

标签:js   扩展   jquery   

原文地址:http://blog.csdn.net/u011043843/article/details/38864409

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!