使用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 相关文章推荐
JQuery Ajax通过Handler访问外部XML数据的代码
Jun 01 Javascript
JavaScript高级程序设计阅读笔记(十六) javascript检测浏览器和操作系统-detect.js
Aug 14 Javascript
jquery如何判断表格同一列不同行input数据是否重复
May 14 Javascript
jQuery多项选项卡的实现思路附样式及代码
Jun 03 Javascript
详解AngularJS中$http缓存以及处理多个$http请求的方法
Feb 06 Javascript
微信小程序 加载 app-service.js 错误解决方法
Oct 12 Javascript
JavaScript的兼容性与调试技巧
Nov 22 Javascript
zTree树形菜单交互选项卡效果的实现方法
Dec 25 Javascript
在 webpack 中使用 ECharts的实例详解
Feb 05 Javascript
详解Vue中组件的缓存
Apr 20 Javascript
微信小程序中如何计算距离某个节日还有多少天
Jul 15 Javascript
vue实现购物车选择功能
Jan 10 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 SQL之where语句生成器
2009/03/24 PHP
PHP生成Gif图片验证码
2013/10/27 PHP
php简单实现文件或图片强制下载的方法
2016/12/06 PHP
兼容ie、firefox的图片自动缩放的css跟js代码分享
2012/01/21 Javascript
Android中资源文件(非代码部分)的使用概览
2012/12/18 Javascript
node.js 开发指南 ? Node.js 连接 MySQL 并进行数据库操作
2014/07/29 Javascript
jquery实现聚光灯效果的方法
2015/02/06 Javascript
jQuery实现鼠标经过时出现隐藏层文字链接的方法
2015/10/12 Javascript
jQuery使用contains过滤器实现精确匹配方法详解
2016/02/25 Javascript
vue.js学习之递归组件
2016/12/13 Javascript
AngularJS Select(选择框)使用详解
2017/01/18 Javascript
Vue中如何实现轮播图的示例代码
2017/07/27 Javascript
微信小程序实现自定义modal弹窗封装的方法
2018/06/15 Javascript
nodejs中方法和模块用法示例
2018/12/24 NodeJs
微信小程序实现圆形进度条动画
2020/11/18 Javascript
js 使用ajax设置和获取自定义header信息的方法小结
2020/03/12 Javascript
关于vue-cli3打包代码后白屏的解决方案
2020/09/02 Javascript
[02:57]2014DOTA2国际邀请赛-观众采访
2014/07/19 DOTA
[01:20:30]OG vs LGD 2018国际邀请赛淘汰赛BO3 第四场 8.26
2018/08/30 DOTA
[52:37]完美世界DOTA2联赛循环赛 Forest vs DM BO2第一场 10.29
2020/10/29 DOTA
用Python编写一个国际象棋AI程序
2014/11/28 Python
python爬虫入门教程--正则表达式完全指南(五)
2017/05/25 Python
python3.x上post发送json数据
2018/03/04 Python
浅析Python 实现一个自动化翻译和替换的工具
2019/04/14 Python
对Django 转发和重定向的实例详解
2019/08/06 Python
什么是python的id函数
2020/06/11 Python
python利用google翻译方法实例(翻译字幕文件)
2020/09/21 Python
德国旅行、体验和活动的预订平台:Watado
2019/12/04 全球购物
会计自荐书
2013/12/02 职场文书
服装设计行业个人的自我评价
2013/12/20 职场文书
煤矿安全承诺书
2014/05/22 职场文书
国庆促销活动总结
2014/08/29 职场文书
物业管理委托协议(2篇)
2014/09/23 职场文书
公司委托书格式范文
2014/10/09 职场文书
工作检讨书范文
2015/01/23 职场文书
十一月早安语录:把心放轻,人生就是一朵自在的云
2019/11/04 职场文书