使用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脚本类
Aug 27 Javascript
jQuery生成asp.net服务器控件的代码
Feb 04 Javascript
jQuery find和children方法使用
Jan 31 Javascript
jquery实现效果比较好的table选中行颜色
Mar 25 Javascript
jquery实现简单的无缝滚动
Apr 15 Javascript
JS根据key值获取URL中的参数值及把URL的参数转换成json对象
Aug 26 Javascript
漂亮! js实现颜色渐变效果
Aug 12 Javascript
BootStrap 图标icon符号图标glyphicons不正常显示的快速解决办法
Dec 08 Javascript
AngularJS+Bootstrap3多级导航菜单的实现代码
Aug 16 Javascript
bootstrap3-dialog-master模态框使用详解
Aug 22 Javascript
基于JS实现简单滑块拼图游戏
Oct 12 Javascript
微信小程序利用云函数获取手机号码
Dec 17 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使用环形链表解决约瑟夫问题完整示例
2018/08/07 PHP
JQuery 学习笔记01 JQuery初接触
2010/05/06 Javascript
JQuery扩展插件Validate 3通过参数设置错误信息
2011/09/05 Javascript
js+CSS实现弹出居中背景半透明div层的方法
2015/02/26 Javascript
javascript实现判断鼠标的状态
2015/07/10 Javascript
js判断当前页面在移动设备还是在PC端中打开
2016/01/06 Javascript
基于RequireJS和JQuery的模块化编程——常见问题全面解析
2016/04/14 Javascript
关于RequireJS的简单介绍即使用方法
2016/10/20 Javascript
js事件源window.event.srcElement兼容性写法(详解)
2016/11/25 Javascript
详解微信小程序 wx.uploadFile 的编码坑
2017/01/23 Javascript
nodejs学习笔记之路由
2017/03/27 NodeJs
微信小程序 密码输入(源码下载)
2017/06/27 Javascript
实现图片首尾平滑轮播(JS原生方法—节流)
2017/10/17 Javascript
Node.js 中使用 async 函数的方法
2017/11/20 Javascript
在一个页面实现两个zTree联动的方法
2017/12/20 Javascript
利用JS判断客户端类型你应该知道的四种方法
2017/12/22 Javascript
vue中子组件向父组件传递数据的实例代码(实现加减功能)
2018/04/20 Javascript
详解Vue中数组和对象更改后视图不刷新的问题
2018/09/21 Javascript
vue v-for循环重复数据无法添加问题解决方法【加track-by='索引'】
2019/03/15 Javascript
详解Vue之事件处理
2020/07/10 Javascript
js实现随机点名功能
2020/12/23 Javascript
[04:41]2014DOTA2国际邀请赛 Liquid顺利突围晋级正赛
2014/07/09 DOTA
python访问sqlserver示例
2014/02/10 Python
十个Python练手的实战项目,学会这些Python就基本没问题了(推荐)
2019/04/26 Python
python pyinstaller打包exe报错的解决方法
2019/11/02 Python
Django对接支付宝实现支付宝充值金币功能示例
2019/12/17 Python
python爬取王者荣耀全皮肤的简单实现代码
2020/01/31 Python
18-35岁旅游团的全球领导者:Contiki
2017/02/08 全球购物
Talbots官网:美国成熟女装品牌
2019/11/15 全球购物
大学生就业自荐信
2013/10/26 职场文书
告诉你怎样写创业计划书
2014/01/27 职场文书
军训自我鉴定怎么写
2014/02/13 职场文书
公安局负责人查摆问题及整改方案
2014/09/27 职场文书
售房协议书范本2014
2014/10/23 职场文书
逃课检讨书怎么写
2015/01/01 职场文书
2016年村干部公开承诺书(公开承诺事项)
2016/03/25 职场文书