使用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每次Title显示不同的名言
Sep 25 Javascript
javascript 浏览器判断 绑定事件 arguments 转换数组 数组遍历
Jul 06 Javascript
浅析Js(Jquery)中,字符串与JSON格式互相转换的示例(直接运行实例)
Jul 09 Javascript
jQuery实现点击图片翻页展示效果的方法
Feb 16 Javascript
javascript中callee与caller的区别分析
Apr 20 Javascript
Bootstrap自定义文件上传下载样式
May 26 Javascript
jquery获取form表单input元素值的简单实例
May 30 Javascript
vue 和vue-touch 实现移动端左右导航效果(仿京东移动站导航)
Apr 22 Javascript
vue-cli单页应用改成多页应用配置详解
Jul 14 Javascript
vue中父子组件注意事项,传值及slot应用技巧
May 09 Javascript
vue中如何让子组件修改父组件数据
Jun 14 Javascript
Vue实现本地购物车功能
Dec 05 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
如何限制访问者的ip(PHPBB的代码)
2006/10/09 PHP
PHP生成唯一的促销/优惠/折扣码(附源码)
2012/12/28 PHP
phpmyadmin打开很慢的解决方法
2014/04/21 PHP
PHP基于cookie实现统计在线人数功能示例
2019/01/16 PHP
PHP7引入的&quot;??&quot;和&quot;?:&quot;的区别讲解
2019/04/08 PHP
Laravel框架自定义分页样式操作示例
2020/01/26 PHP
发现的以前不知道的函数
2006/09/19 Javascript
Nodejs实现多人同时在线移动鼠标的小游戏分享
2014/12/06 NodeJs
了不起的node.js读书笔记之mongodb数据库交互
2014/12/22 Javascript
编写自己的jQuery提示框(Tip)插件
2015/02/05 Javascript
jQuery ui实现动感的圆角渐变网站导航菜单效果代码
2015/08/26 Javascript
js多功能分页组件layPage使用方法详解
2016/05/19 Javascript
JavaScript实战之带收放动画效果的导航菜单
2016/08/16 Javascript
javascript验证香港身份证的格式或真实性
2017/02/07 Javascript
javascript 实现文本使用省略号替代(超出固定高度的情况)
2017/02/21 Javascript
用nodeJS搭建本地文件服务器的几种方法小结
2017/03/16 NodeJs
vue-cli3自动消除console.log()的调试信息方式
2020/10/21 Javascript
python中的多重继承实例讲解
2014/09/28 Python
Python 文件管理实例详解
2015/11/10 Python
Python实现模拟登录网易邮箱的方法示例
2018/07/05 Python
python基于socket实现的UDP及TCP通讯功能示例
2019/11/01 Python
python实现批量修改文件名
2020/03/23 Python
Python爬虫爬取百度搜索内容代码实例
2020/06/05 Python
Python Excel vlookup函数实现过程解析
2020/06/22 Python
纯css3使用vw和vh实现自适应的方法
2018/02/09 HTML / CSS
世界上最大的高分辨率在线图片库:Alamy
2018/07/07 全球购物
澳大利亚领先的女帽及配饰公司:Morgan&Taylor
2019/12/01 全球购物
现金会计岗位职责
2013/12/05 职场文书
一份报关员的职业规划范文
2014/01/08 职场文书
农民工创业典型事迹
2014/01/25 职场文书
借款协议书
2014/04/12 职场文书
医学求职自荐信
2014/06/21 职场文书
公司授权委托书范文
2014/09/21 职场文书
大学生村官工作总结2015
2015/04/09 职场文书
教师听课学习心得体会
2016/01/15 职场文书
Python如何快速找到多个字典中的公共键(key)
2022/04/29 Python