zoukankan      html  css  js  c++  java
  • 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>

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

    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),我

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

    更多相关文章,去看看

  • 相关阅读:
    gitlab 启用HTTPS
    centos7 部署 汉化版 gitlab 10.0.2
    前端常见跨域解决方案(全)
    [转]用python爬虫抓站的一些技巧总结 zz
    【转】通用权限管理设计 之 数据权限
    【转】通用权限管理设计 之 功能权限设计
    JavaScript数据结构和算法
    Vue.js 插件开发详解
    wdcpV3面板安装ssl证书 apache教程 子站SSL配置
    [POJ-2823] -Sliding Window
  • 原文地址:https://www.cnblogs.com/ido321/p/3938585.html
Copyright © 2011-2022 走看看