使用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 相关文章推荐
JavaScript实现的类字典插入或更新方法实例
Jul 10 Javascript
JavaScript实现网站访问次数统计代码
Aug 12 Javascript
基于javascript实现浏览器滚动条快到底部时自动加载数据
Nov 30 Javascript
基于Angularjs实现分页功能
May 30 Javascript
jQuery层次选择器用法示例
Sep 09 Javascript
vue利用better-scroll实现轮播图与页面滚动详解
Oct 20 Javascript
前端MVVM框架解析之双向绑定
Jan 24 Javascript
js实现input密码框显示/隐藏功能
Sep 10 Javascript
es6 symbol的实现方法示例
Apr 02 Javascript
jQuery创建折叠式菜单
Jun 15 jQuery
JS中数据结构与算法---排序算法(Sort Algorithm)实例详解
Jun 17 Javascript
vue简单练习 桌面时钟的实现代码实例
Sep 19 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设计模式之工厂模式与单例模式
2016/09/28 PHP
PHP计算近1年的所有月份
2017/03/13 PHP
浅谈php(codeigniter)安全性注意事项
2017/04/06 PHP
php文件后缀不强制为.php的实操方法
2019/09/18 PHP
PHP网站常见安全漏洞,及相应防范措施总结
2021/03/01 PHP
Jquery实现显示和隐藏的4种简单方式
2013/08/28 Javascript
jQuery表单美化插件jqTransform使用详解
2015/04/12 Javascript
jQuery实现悬浮在右上角的网页客服效果代码
2015/10/24 Javascript
快速掌握Node.js环境的安装与运行方法
2016/02/16 Javascript
详解Bootstrap插件
2016/04/25 Javascript
jQuery 利用$.ajax 时获取原生XMLHttpRequest 对象的方法
2016/08/25 Javascript
jquery实现倒计时小应用
2017/09/19 jQuery
js构建二叉树进行数值数组的去重与优化详解
2018/03/26 Javascript
vue微信分享出来的链接点开是首页问题的解决方法
2018/11/28 Javascript
JavaScript内置对象math,global功能与用法实例分析
2019/06/10 Javascript
vue + typescript + 极验登录验证的实现方法
2019/06/27 Javascript
微信小程序实现点击页面出现文字
2020/09/21 Javascript
vue实现单一筛选、删除筛选条件
2020/10/26 Javascript
python3.5 + PyQt5 +Eric6 实现的一个计算器代码
2017/03/11 Python
Python正确重载运算符的方法示例详解
2017/08/27 Python
python文本数据相似度的度量
2018/03/12 Python
浅析HTML5 meta viewport参数
2020/10/28 HTML / CSS
水果花束:Fruit Bouquets
2017/12/20 全球购物
在线学习西班牙语、法语或其他语言:Babbel.com
2018/02/07 全球购物
企业门卫岗位职责
2013/12/12 职场文书
初中化学教学反思
2014/01/23 职场文书
北体毕业生求职信
2014/02/28 职场文书
《伯牙绝弦》教学反思
2014/03/02 职场文书
双拥工作宣传标语
2014/06/26 职场文书
七夕相亲活动策划方案
2014/08/31 职场文书
2015年出纳年终工作总结
2015/05/14 职场文书
2016年寒假生活小结
2015/10/10 职场文书
领导干部学习十八届五中全会精神心得体会
2016/01/05 职场文书
MYSQL主从数据库同步备份配置的方法
2021/05/26 MySQL
用Python爬取英雄联盟的皮肤详细示例
2021/12/06 Python
尝试使用Python爬取城市租房信息
2022/04/12 Python