`

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

阅读更多

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

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

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

义的功能扩展。(JQuery没有禁用表单元素的方法哦)前端Ui资源

上代码:

 

[javascript] view plaincopy
  1.  1: <!DOCTYPE>  
  2.   
  3.  2: <html lang="en">  
  4.   
  5.  3: <head>  
  6.   
  7.  4:     <title>Custom Method!</title>  
  8.   
  9.  5:     <meta http-equiv="content-type" content="text/html;charset=utf-8">  
  10.   
  11.  6:     <script type="text/javascript" src="js/jquery-2.1.1.js"></script>  
  12.   
  13.  7:     <script type="text/javascript">  
  14.   
  15.  8:         jQuery(function()  
  16.   
  17.  9:             {  
  18.   
  19. 10:                 $("form input").disable();  
  20.   
  21. 11:             });  
  22.   
  23. 12:     </script>  
  24.   
  25. 13: </head>  
  26.   
  27. 14: <body>  
  28.   
  29. 15:     <p>测试自定义方法禁用表单元素</p>  
  30.   
  31. 16:     <form>  
  32.   
  33. 17:         <input type="text" value="test"><br/>  
  34.   
  35. 18:         <input type="button" value="confirm" class="test">  
  36.   
  37. 19:     </form>  
  38.   
  39. 20: </body>  
  40.   
  41. 21: </html>  

 

 

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

前端Ui资源

1

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

[javascript] view plaincopy
  1. 1: jQuery(function()  
  2.   
  3. 2:             {  
  4.   
  5. 3:                 $("form input.test").disable();  
  6.   
  7. 4:             });  

 

看看是不是禁用了按钮:

2

 

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

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

[javascript] view plaincopy
  1. 1: jQuery.fn.disable=function () {  
  2.   
  3. 2:         return this.each(function()  
  4.   
  5. 3:             {  
  6.   
  7. 4:                 if(this.disabled != nullthis.disabled=true;  
  8.   
  9. 5:             });  
  10.   
  11. 6:     }  

 

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

前端Ui资源

 

在《JQuery In Action》一书中,提到以$.fn.方法名方式扩展(P12),我

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

分享到:
评论

相关推荐

    jquery实现自定义下拉条

    本项目聚焦于使用jQuery来实现一个自定义的下拉条,这将赋予开发者更多的设计自由度,使得下拉条可以更好地融入网站的整体风格,并提供个性化的交互体验。 一、jQuery基础 在开始讲解如何实现自定义下拉条之前,...

    jquery 封装select实现select自定义样式插件jquery.easydropdown.min.js

    《jQuery封装Select实现自定义样式插件:jquery.easydropdown.min.js》 在Web开发中,Select元素是常用的数据选择控件,但其默认样式通常较为单一,无法满足设计师们对界面美观度的需求。jQuery库为我们提供了丰富...

    基于jQuery简单可自定义响应式手机电脑端瀑布流

    在jQuery中实现瀑布流,主要依赖于其强大的DOM操作和事件处理能力。首先,你需要引入jQuery库,这可以通过CDN链接或者将jQuery库文件下载到本地项目中来完成。然后,创建一个包含待布局元素的容器,并确保元素的初始...

    基于jquery ui的自定义布局(附下载)

    jQuery UI虽然本身并未内置专门的布局插件,但社区中存在一些第三方扩展,例如“jQuery UI Layout”(也称为“UI Layout”或“Layout Plugin”),它基于jQuery和jQuery UI,为开发者提供了一种高效的方式来创建多...

    jquery.autocomplete 增加自定义查询方法

    在本文中,我们将深入探讨如何在jQuery库的`autocomplete`插件中添加自定义查询方法。这个功能在很多场合都非常实用,特别是在用户输入时需要实时从服务器获取匹配数据的场景。`jquery.autocomplete`插件是jQuery的...

    jquery 自定义方法调用示例

    本文将深入探讨如何在jQuery中自定义方法,并通过一个实际的示例来阐述这一过程。 首先,我们需要理解jQuery的核心理念是提供一个更加简洁、易用的方式来操作HTML元素和执行异步请求。jQuery对象允许我们对一组DOM...

    jquery-easyui自定义样式

    在实际应用中,我们可能会遇到BF_jquery这样的文件,这可能是某种特定的jQuery EasyUI扩展或者示例代码。分析和学习这些文件,有助于更好地理解和实现自定义样式。 总结起来,自定义jQuery EasyUI样式是一个结合CSS...

    jquery 自定义扩展日期插件

    总结,这款jQuery自定义扩展日期插件以其独特的编辑功能和可扩展性,在众多日期组件中脱颖而出。对于需要处理复杂日期编辑场景的开发者来说,它无疑是一个值得考虑的优秀选择。通过深入理解其工作原理和应用方式,...

    基于jquery实现的自定义风格的下拉列表框.zip

    本项目“基于jquery实现的自定义风格的下拉列表框”旨在提供一种灵活、可定制的解决方案,使开发者可以轻松地根据项目需求调整下拉列表的外观和行为。 jQuery是一款广泛使用的JavaScript库,它简化了DOM操作、事件...

    jQuery插件formValidator自定义函数扩展功能实例详解

    本文实例讲述了jQuery插件formValidator自定义函数扩展功能的方法。分享给大家供大家参考,具体如下: jQuery formValidator表单验证插件是什么?感兴趣的读者可参考《jQuery formValidator表单验证插件》以及本站...

    jQuery动态进度条自定义百分比插件

    jQuery动态进度条自定义百分比插件是一种在网页中实现进度可视化效果的工具,它基于JavaScript库jQuery构建,主要用于提供一种交互式的用户体验,显示任务、数据加载或其他过程的完成程度。这种插件允许开发者自由...

    jQuery实现可自定义打字参数的打字机文字特效源码.zip

    通过学习和理解这段代码,开发者可以了解如何在自己的项目中实现类似的效果,也可以根据需要对其进行修改和扩展。 在实际应用中,这样的打字机特效可以用于网站欢迎语、产品介绍或故事叙述等场景,增加用户停留时间...

    jQuery右键自定义菜单.zip

    jQuery右键自定义菜单就是利用jQuery的特性,实现了一个仿照Windows操作系统中标准上下文菜单效果的插件。这个菜单不仅美观,而且功能实用,能够根据用户右键点击的位置显示相应的操作选项。 在创建jQuery右键菜单...

    jquery-esayui 自定义样式

    压缩包中的"Style_jquery"很可能包含用于自定义EasyUI样式的CSS文件。这些文件可能包含了对原生EasyUI样式的覆盖和扩展,开发者可以查看这些文件以了解具体如何自定义和应用样式。 6. **应用场景** 自定义的...

    jquery自定义弹窗对话框.rar

    本文将深入探讨如何使用jQuery实现自定义弹窗对话框,这是Web开发中一个常见且实用的功能。 首先,理解弹窗对话框的概念。弹窗对话框是一种在网页上创建浮动窗口的方法,用于显示警告、确认信息或进行用户交互,如...

    jQuery validate 自定义样式、规则

    2. **JavaScript文件**:可能包含了自定义验证规则的实现,或者对jQuery Validate的配置和扩展。 3. **HTML模板**:可能展示了如何在实际表单中应用这些自定义样式和规则。 通过结合使用这些文件,你可以构建出符合...

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

    尽管jQuery提供了大量的内置方法,但正如描述中所说,有时我们可能需要为它扩展新的功能来满足特定的需求。这个例子展示了如何利用jQuery的可扩展性来创建一个自定义方法——`disable()`,用于禁用一组表单元素。 ...

Global site tag (gtag.js) - Google Analytics