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


Posted in Javascript onSeptember 09, 2014

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>

文本框和按钮已经被禁用:
使用JQuery库提供的扩展功能实现自定义方法

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

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

看看是不是禁用了按钮:

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

实现也很简单,打开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),我测试过,没有实现禁用。错误之处,还望指正。

Javascript 相关文章推荐
动态为事件添加js代码示例
Feb 15 Javascript
Js 中debug方式
Feb 07 Javascript
combox改进版 页面原型参考dojo的,比网上jQuery的那些combox功能强,代码更小
Apr 15 Javascript
Javascript中的相等与不等运算
Apr 25 Javascript
JS面向对象编程浅析
Aug 28 Javascript
自己用jQuery写了一个图片的马赛克消失效果
May 04 Javascript
Node.js开发者必须了解的4个JS要点
Feb 21 Javascript
jQuery根据ID、CLASS、等获取对象的实例
Dec 04 Javascript
jQuery EasyUI 获取tabs的实例解析
Dec 06 Javascript
jQuery实现checkbox即点即改批量删除及中间遇到的坑
Nov 11 jQuery
如何在微信小程序中实现Mixins方案
Jun 20 Javascript
详解如何修改 node_modules 里的文件
May 22 Javascript
JQuery 给元素绑定click事件多次执行的解决方法
Sep 09 #Javascript
一个实用的图片切换支持点击切换和自动轮播
Sep 09 #Javascript
用JavaScript实现用一个DIV来包装文本元素节点
Sep 09 #Javascript
点击button获取text内容并改变样式的js实现
Sep 09 #Javascript
js 数组去重的四种实用方法
Sep 09 #Javascript
jQuery源码分析之jQuery中的循环技巧详解
Sep 06 #Javascript
10分钟学会写Jquery插件实例教程
Sep 06 #Javascript
You might like
PHP 5.0对象模型深度探索之绑定
2006/09/05 PHP
PHP去掉从word直接粘贴过来的没有用格式的函数
2012/10/29 PHP
Yii数据库缓存实例分析
2016/03/29 PHP
jquery的颜色选择插件实例代码
2008/10/02 Javascript
JavaScript 比较时间大小的代码
2010/04/24 Javascript
jQuery获取地址栏参数插件(模仿C#)
2010/10/26 Javascript
原生js 秒表实现代码
2012/07/24 Javascript
带左右箭头图片轮播的JS代码
2013/12/18 Javascript
Jquery实现兼容各大浏览器的Enter回车切换输入焦点的方法
2014/09/01 Javascript
node.js中的fs.createWriteStream方法使用说明
2014/12/17 Javascript
JavaScript中的类(Class)详细介绍
2014/12/30 Javascript
javascript检查浏览器是否已经启用XX功能
2015/07/10 Javascript
完美实现八种js焦点轮播图(下篇)
2020/04/20 Javascript
一次$.getJSON不执行的简单记录
2016/07/19 Javascript
jQuery上传多张图片带进度条样式(DEMO)
2017/03/02 Javascript
vue中如何引入jQuery和Bootstrap
2017/04/10 jQuery
layer插件select选中默认值的方法
2018/08/14 Javascript
vue基础之使用get、post、jsonp实现交互功能示例
2019/03/12 Javascript
node crawler如何添加promise支持
2020/02/01 Javascript
python实现的防DDoS脚本
2011/02/08 Python
10种检测Python程序运行时间、CPU和内存占用的方法
2015/04/01 Python
Python实现单词翻译功能
2017/06/06 Python
Python 循环语句之 while,for语句详解
2018/04/23 Python
对python中的pop函数和append函数详解
2018/05/04 Python
Python错误处理操作示例
2018/07/18 Python
使用Python写一个量化股票提醒系统
2018/08/22 Python
Python网页正文转换语音文件的操作方法
2018/12/09 Python
centos6.5安装python3.7.1之后无法使用pip的解决方案
2019/02/14 Python
Python爬虫自动化获取华图和粉笔网站的错题(推荐)
2021/01/08 Python
会计电算化应届生求职信
2013/11/03 职场文书
岗位聘任书范文
2014/03/29 职场文书
经销商年会策划方案
2014/05/29 职场文书
乡镇一岗双责责任书
2015/01/29 职场文书
2015年社区综治工作总结
2015/04/21 职场文书
python基础之爬虫入门
2021/05/10 Python
Java中生成微信小程序太阳码的实现方案
2022/06/01 Java/Android