使用JQuery库提供的扩展功能实现自定义方法分享


JQuery包装器提供了大量的方法,可以再页面中直接使用。但是,没有任何一个库可以满足所有的需求,所以,JQuery库提供了丰富的扩展功能。以禁用一组表单元素为例,看看怎么简单有效的在JQuery库中添加自定义的功能扩展。(JQuery没有禁用表单元素的方法哦)

上代码:

  <!DOCTYPE>     <html lang="en">     <head>     <title>Custom Method!</title>     <meta http-equiv="content-type" content="text/html;charset=utf-8">     <script type="text/javascript" src="js/jquery-2.1.1.js"></script>     <script type="text/javascript">     jQuery(function()     {     $("form input").disable();     });     </script>     </head>     <body>     <p>测试自定义方法禁用表单元素</p>     <form>     <input type="text" value="test"><br/>     <input type="button" value="confirm" class="test">     </form>     </body>     </html>

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

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

  jQuery(function()   {  $("form input.test").disable();   });

看看是不是禁用了按钮:

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

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

  jQuery.fn.disable=function () {     return this.each(function()     {     if(this.disabled != null) this.disabled=true;     });     }

在按照上述案例的方式调用即可。

在《JQuery In Action》一书中,提到以$.fn.方法名方式扩展(P12),我测试过,没有实现禁用。错误之处,还望指正。

—-想了解更多的jquery相关特效编写怎么解决关注<计算机技术网(www.ctvol.com)!!>



www.ctvol.com true Article 使用JQuery库提供的扩展功能实现自定义方法分享

本文来自网络收集,不代表计算机技术网立场,如涉及侵权请联系管理员删除。

ctvol管理联系方式QQ:251552304

本文章地址:https://www.ctvol.com/jquerytutorial/90965.html

(0)
上一篇 2020年4月24日 上午8:30
下一篇 2020年4月24日 上午8:31

精彩推荐